Aligning Images in the Wiki

Ahpook
Ahpook

Hello there folks!  I am fairly new to working with wiki pages and code.  Please forgive this question for its probable simplicity.  Basically, I am trying to embed 3 small images from the media library on the same line/sentence.  I cant seem to figure it out, as just entering them there simply, even with multiple spaces, makes it so only the first one appears.  Is there a correct process/fix for this? 

Thanks so much inadvance for your help!

Ahpook

Comments

  • Ahpook
    Ahpook
    Posts: 4

    Anyone...?

  • Krothos
    Krothos
    Posts: 217

    Sorry, I thought I had the answer but I don't after numerous testing on one of my sites.

  • Kallak
    Kallak
    Posts: 1,015 edited February 18

    @Ahpook, it looks as though something screwy may be going on with multiple image embeds on the same line. Separate lines looks fine, but single line is only displaying the first one. I'll see if I can't get to the bottom of it. In the meantime, I would use IMG tags inside of a container div element. You can get the URL for the images by clicking on them in the media library, then right clicking the version of the image that appears in the right hand portion of the frame and copying the image location. Then you can paste that inside of HTML IMG tags.

    Put something like this into your wiki page edit window:


    <div class="img-trio-container"><img class="img-trio" src="INSERT-IMG-URL-HERE"><img class="img-trio" src="INSERT-IMG-URL-HERE"><img class="img-trio" src="INSERT-IMG-URL-HERE"></div>

    and then this inside your custom CSS input field:


    .img-trio-container .img-trio {width:INSERT-SIZE-HERE-IF-NEEDEDpx; display:inline-block;}

    Normally in an HTML sense, you wouldn't run your elements back to back like that, but I do that just to make sure no random paragraph tags or break tags get inserted between your elements.

    Post edited by Kallak on

    All the best,
    - Kallak

    Inner Council Member
    CotM Selection Committee
    Writer/Editor - Words In The Dark
    Obsidian Portal Community and Content Manager
    GameMaster - Crucible of the Blacksoul (CotM for Jan. 2013)

  • Abersade
    Abersade
    Posts: 191

    I spent about two hours testing this the day before yesterday, I agree with Kallak's line of reasoning and also think something odd is happening. When examining the code live it looks like the content on the line after the first image is being disregarded entirely. Like Krothos I also wasn't able to find a workaround.

  • Ahpook
    Ahpook
    Posts: 4

    Thank you so much for all of your input and help olks.  I am glad that it wasnt just me not being able to figure that out.  

    Ahpook

  • Kallak
    Kallak
    Posts: 1,015

    As something of an update to this, the issue with only the first image being displayed in cases where multiple images are on the same line has been resolved.

    All the best,
    - Kallak

    Inner Council Member
    CotM Selection Committee
    Writer/Editor - Words In The Dark
    Obsidian Portal Community and Content Manager
    GameMaster - Crucible of the Blacksoul (CotM for Jan. 2013)

  • Ahpook
    Ahpook
    Posts: 4

    Great!  Thanks so much!

Sign In or Register to comment.

August's Campaign of the Month, In Search of Hidden Dragons!

Read the feature post on the blog!
Or return to Obsidian Portal!

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions