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: 230

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

  • Kallak
    Kallak
    Posts: 1,090 edited February 2020

    @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
  • Abersade
    Abersade
    Posts: 417

    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.

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • 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,090

    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
  • Ahpook
    Ahpook
    Posts: 4

    Great!  Thanks so much!

Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
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