[Fixed]Images with captions and table cell

Arronax
Arronax
edited August 2010 in Campaign Portal Building
Hello
I apologise if this has been asked several times already but my attempts to search the forum came up with zero results so I thought I should try asking.

I have been recently trying to produce image formatting that is used in most other wiki's (that being the whole box with the picture shrunk to fit complete with caption and direct link to enlarged picture, similar to how wikipedia formats its pictures) but my attempts with implementing it using html have been varied.
I had some success in making a cell and filling it with the picture and caption but it required way too much work to be viable (as the picture, cell and caption had to be measured in pixels and adjusted repeatedly till it all lined up, and even then it was quite haphazard.

I was therefore wondering if anyone has had any luck in producing enclosed image boxes and could give some pointers in how to produce them.
Thank you

Comments

  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    You should be able to do this with a little inline CSS pretty easily. I gave it a "quick try":http://www.obsidianportal.com/campaign/chainsawxiv-test-campaign/wikis/test-page-3, and it works out pretty well. In that example, you can just adjust the two widths (300px by default) to whatever width you want the presentation to be, and the browser will automatically proportionally scale the image (so the box will vary in height depending on the proportions of the image, and the amount of caption text).
  • Duskreign
    Duskreign
    Posts: 1,085
    ChainsawXIV, you spoil us.
  • sandman
    sandman
    Posts: 155
    Chainsaw, you just solved a problem I've been having regarding pre tags, and the "overflow" style attribute you used was the answer!! Thanks man!

    Oh, and Duskreign is right, you spoil us xD
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Happy to help. :)
  • Arronax
    Arronax
    Posts: 3
    Outrageous, thank you.
    Guess I should start remembering all the CSS I was meant to learn at uni.
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    It's much cleaner and more powerful than doing it old-school HTML style anyway. :)
  • HecklerusPrime
    HecklerusPrime
    Posts: 3
    Chainsaw: Awesome! Thanks! One problem. When I try to copy that code I get a large border of white space above my image but still inside the box. I've tried adjusting the margin and padding options, but no change. Instead of using an image from the internet I'm using the url for one of my OP uploaded images. Any thoughts?
  • GamingMegaverse
    GamingMegaverse
    Posts: 3,034
    Please realize @Hecklerus Prime that this is a thread from 2010- preReforge! Therefore many things have changed in the coding.

    Just trying to help out.

  • HecklerusPrime
    HecklerusPrime
    Posts: 3
    Of course. Through a little tinkering (read: complete accident) I found that the code Chainsaw linked to should all be entered on one line in order to avoid any spacing issues. So for now, that seems to be the fix. In case his link ever becomes broken, I'll re-post the code in question. Since it's all on one line it's going to shoot way to the right. Sorry for that. Just replace the stuff in ALL CAPS with relevant website/caption.

    @ CAPTION @
  • Vayday
    Vayday
    Posts: 22

    Hey, I've just used this code for my obsidian portal page and it works amazingly when viewed on a computer, unfortunately the pictures are not resizing properly on cellphone. Is there anything that can be done to fix this?

  • C4RB0N
    C4RB0N
    Posts: 58

    Hey @Vayday! Let me look into this and see what can be done. Will get back to you soon!

  • C4RB0N
    C4RB0N
    Posts: 58

    Hi again @Vayday! Could you please provide an example url that is not working on your phone?

  • Vayday
    Vayday
    Posts: 22 edited February 2025
    Of course ! I'm using captions as a way to credit the arts I'm using for my setting

    You can see it for yourself on this page https://horai.obsidianportal.com/wikis/distributeurs

    Here is an exemple of what it looks like on cellphones : https://i.imgur.com/L68wpZg.jpg

    Granted I'm not the best coder in the world (far from it) so I might have made a mistake
    Post edited by Vayday on
  • GamingMegaverse
    GamingMegaverse
    Posts: 3,034

    Good looking site Vayday!

    Just trying to help out.

  • C4RB0N
    C4RB0N
    Posts: 58

    @Vayday Thank you! I'm passing this along to the team, we will get back to you soon!

  • Vayday
    Vayday
    Posts: 22

    @GamingMegaverse thank you so much ! It doesnt hold a candle compared to yours though ! I wish I knew how to code such beautiful sites x).



    @C4RBON thank you !

  • vadercomplex
    vadercomplex
    Posts: 252 edited February 2025

    Hello my friend! @vayday We got some information that should help you out:

    The problem is the fixed “width: 500px;” in both the div style and the img style.

    Change the img style width to be “100%” (instead of “500px”).

    Like this:

    style=“width: 100%;”

    Change the div style width to be “70%” (instead of “500px”), and add in a min-width of “269px”.

    Like this:

    style=“width: 70%; min-width: 269px; margin:0px 0px 3px 3px;padding:3px 3px 3px 3px;border-style:solid;border-width:1px;border-color:#000;float:left;”

    Using “%” will keep the div within the width of the column when viewed on mobile or tablets.

    And the min-width will make sure that in mobile view, the image takes up enough room to keep small amounts of text from trying to flow around the side.

    Try leaving out the min-width to see if you like that or not. It looked a little squished to me.

    Post edited by vadercomplex on

    Obsidian Portal Support Druid | [email protected]

  • Vayday
    Vayday
    Posts: 22

    Thank you for your help @vadercomplex, I think I might have gotten this wrong somehow though.



    If I understand correctly this bit of code for instance, which is the one I'm using currently :


    <div style="width:500px;margin:0px 0px 3px 3px;padding:3px 3px 3px 3px;border-style:solid;border-width:1px;border-color:#000;float:left;"><strong><img src="https://i.imgur.com/Xpn8w2E.jpg"; style="width:500px;" /><a href="https://i.imgur.com/Xpn8w2E.jpg"> </a><a href="https://www.artstation.com/rilun">Artwork par Rilun</a> </strong></div>

    Should be replaced by this :


    <div style=“width: 70%; min-width: 269px; margin:0px 0px 3px 3px;padding:3px 3px 3px 3px;border-style:solid;border-width:1px;border-color:#000;float:left;”><strong><img src="https://i.imgur.com/Xpn8w2E.jpg"; style=“width: 100%;” /><a href="https://i.imgur.com/Xpn8w2E.jpg"> </a><a href="https://www.artstation.com/rilun">Artwork par Rilun</a> </strong></div>

    While on first glance it does seem to fix the image resizing just fine, it throws off the caption as well as the floating property of the picture. Maybe I didnt copy and paste what you gave me properly though, is there any problem with my fix?

  • vadercomplex
    vadercomplex
    Posts: 252

    Hi @vayday! We're checking in on this for ya. :~) 

    Obsidian Portal Support Druid | [email protected]

  • Vayday
    Vayday
    Posts: 22

    Thank you for your time !

  • C4RB0N
    C4RB0N
    Posts: 58

    @Vayday

    Absolutely! Unfortunately, we can't see the fix in place right now to see if it is working or not. If you don't want to leave the real page "fixed", could you possibly create a copy of the page as a test page where you can leave the fix in place on so we can see what is or isn't working? You can also mark it as "GM Only" if you don't want the players to get confused by it)

  • Vayday
    Vayday
    Posts: 22

    I think I'm going to start listing artist credits at the bottom of the article. To be fair I'm not the best at coding so this might work better for all of us. Thank you for your help nonetheless I truly appreciate it !

  • vadercomplex
    vadercomplex
    Posts: 252

    Of course, friend! @vayday if anything else comes up, please don't hesitate to reach out! 

    Obsidian Portal Support Druid | [email protected]

Sign In or Register to comment.

June 2026
Dungeons of the Multiverse

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

Categories