WordPress.org

Ready to get started?Download WordPress

Forums

Formatting text box captions with images (14 posts)

  1. BitchSpot
    Member
    Posted 5 years ago #

    I'm probably going to kick myself, but for the life of me, I can't figure out a good, relatively simple way to do this. I'm putting together a new blog that is going to primarily feature images and I need to be able to label the images. I was thinking of setting up a CSS entry but it didn't do what I wanted, I also looked for plugins, but all of the plugins that added captions to images only did a single line and I need multi-line descriptions.

    What I really need is the ability to attach a 3-4 line textbox that will remain centered under the image, no matter where I move the image. As I will often have 2-3 images on the same line, just using a CSS entry isn't cutting it.

    Any ideas? Last I looked, I have close to 200 images to put in at present, I don't want to have to code a lot for every one. Thanks.

  2. tomontoast
    Member
    Posted 5 years ago #

    I'm not sure what you mean by CSS entry. CSS is definitely the way to go.
    Use some markup like

    <div>
    <img src="image.jpg" />
    <p class="caption">Caption going over multiple lines</p>
    </div>

    and then style the caption so it is centred:

    p.caption{
    text-align:center;
    }

    This type of markup can be generated automatically using either wordpress's native gallery shortcode or the NextGEN gallery plugin.

  3. BitchSpot
    Member
    Posted 5 years ago #

    That works great for a single image on a line, but once you get more than one image, the captioning doesn't line up under the images. That's what I tried before... no go. :(

    When you try to do that, you get two pictures centered side-by-side, then one caption centered between the pictures below, then the next caption centered beneath that.

  4. tomontoast
    Member
    Posted 5 years ago #

    If you have markup like

    <div>
    <img src="image.jpg" />
    <p class="caption">Caption going over multiple lines</p>
    </div>
    <div>
    <img src="image.jpg" />
    <p class="caption">Caption going over multiple lines</p>
    </div>
    <div>
    <img src="image.jpg" />
    <p class="caption">Caption going over multiple lines</p>
    </div>

    and have css code

    div{
    float:left;
    width:200px;
    }
    p.caption{
    text-align:center;
    }
    img{
    margin:0 auto;
    }

    You should get each caption centred under each image. The built in wordpress shortcode gallery does this for you. Give it a go!

  5. BitchSpot
    Member
    Posted 5 years ago #

    Unfortunately, that doesn't work either. In fact, having the CSS in place stops me from centering anything whatsoever, it forces everything to the left side of the screen. I put together a little demonstration of what I want and what your coding does, hope it helps.

  6. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    Why not use the built in caption functionality and then style it appropriately in your stylesheet?

    You can see the styling rules for captions here: http://wordpress.org/support/topic/164999?replies=1

    The normal caption markup looks sorta like this:
    [caption id="attachment_455" align="alignright" width="300" caption="CAPTION HERE"]<img class="size-medium wp-image-455" title="PICTURE NAME" src="http://example.com/blog/wp-content/uploads/whatever.jpg" alt="CAPTION HERE" width="300" height="200" /></a>[/caption]

  7. BitchSpot
    Member
    Posted 5 years ago #

    Actually, I've tried that, it doesn't give you multiple-line captioning, as you can see in my demo page above. I stuck captioning into the last couple images and... it runs all three lines together. WP hacks out any attempt to force line breaks within the caption.

    Captioning was my first attempt, I'm just not having any luck getting well-formated, multi-line captions to work.

    Actually, what I really want to get, with good multi-line captioning, is something like this.

  8. BitchSpot
    Member
    Posted 5 years ago #

    Actually, I went through and tried your suggestion Otto and while it does fix the captioning problem, and thank you so much for that, it still prevents me from having two images on the same line, which is the whole point of this.

    This is so frustrating. I may just go back to doing it straight HTML, it all worked that way, I was just hoping that WordPress would be easier and more efficient.

  9. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    Having multiple images on the same line is not a matter of the HTML code being used, it's a matter of the styling that you use.

    Use the caption thing like I said. Then modify the stylesheet to put the images side by side. Simple, really, just float them left or right and eliminate the clearing bit.

  10. BitchSpot
    Member
    Posted 5 years ago #

    Not to complain or anything because I am honestly thankful for the help, but floating left or right, while I can get things on the same line, I was really hoping for them centered. It's going to make for a rather messy page since I'll have a mixture of 1, 2 and 3 images on various lines and either they'll bunch to the left if I float the 2 and 3 lines left, or right if I float them right.

    Plus, honestly, having 5 lines of code for each and every image, and as I said, I'm going to have HUNDREDS of images... not a particularly efficient system. With some pages containing 30-40 individual images...

  11. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    Why are you adding these lines of code manually, anyway? The image uploader adds this caption type code for you.

    I just don't get why all this trouble and effort to do things the hard way.

  12. t31os
    Member
    Posted 5 years ago #

    Agreed, the built in gallery functions handle the task perfectly well when used with the classes it generates.

    It's just a matter of adding the classes to the stylesheet and adjusting them as needed.

  13. BitchSpot
    Member
    Posted 5 years ago #

    Thanks for all the help, but I've come to the conclusion that it's not going to be able to do exactly what I want done and there are other non-Wordpress options that I already know work, even if they're not quite as convenient, at least I get all the formatting that I want, exactly as I want, without having to compromise.

    Keep up the good work.

  14. designguy24
    Member
    Posted 5 years ago #

    can you guys help get these images on same line? cant find where my problems at

    http://www.miscuesbilliards.com/cues-cases/

Topic Closed

This topic has been closed to new replies.

About this Topic