Aligning descriptions in an image gallery

  • Ansarc

    (@ansarc)


    13 years, 4 months ago

    Hi,

    I would like to create a page that introduces the viewer to certain plants and animals, showing an image and a simple accompanying text for each species. So far, I thought about simply making an image gallery that would, upon clicking a thumbnail, display the image next to the few paragraph long description. This seems, however, a bit problematic – probably since I’m fairly new to WP.

    This is what I find difficult:

    I first made a gallery of the relevant images, using the WP native gallery. I get all the thumbnails and their captions lined up nicely in as many columns as I want, but when the thumbnail is clicked, and the image opened, the gallery centers the image and aligns the description text under the image by default, which is inconvenient, especially for vertical images. I’d like to have the description align on either side of the image (that would also be aligned left or right), so that both the text and the image could be easily viewed at the same time. Any ideas on tweaking this?

    Another idea I had was that clicking a thumbnail would open up a neat “pop-up”, again showing both the description and the image. I tried doing this on NextGen and some other gallery plugins, but I ran into pretty much the same problem: either the description text is, again, under the image (and sometimes too long to fit the screen) or (using Lightbox in full screen mode) really far below it, which looks stupid with smallish vertical images. Being able to align the text to the side of the image would pretty much solve this one too.

    I’m not exactly a WP or web development guru, so the easier suggestions you can come up with, the better :). I apologize if this has already been covered here, but at least I couldn’t find it.

    Thanks in advance,
    Antti

    (At the moment, I’m doing this on version 3.5 with the Twenty Twelve theme.)

Viewing 5 replies - 1 through 5 (of 5 total)
  • esmi

    (@esmi)

    13 years, 4 months ago

    Can you post a link to your gallery?

    Thread Starter Ansarc

    (@ansarc)

    13 years, 4 months ago

    Hi,

    Sure! Here’s an example done with the native gallery:

    http://www.luppi.fi/pikkuluppio/testipesti/

    I’d like the image to be aligned to left or right, with the text going around it. Then both the image and the text would be visible with a single glance.

    Here’s the one re-done quickly with NextGen:

    http://www.luppi.fi/pikkuluppio/testpage2/

    As you can see, the text doesn’t really work in this one either. (I also haven’t worked out how to have the image title displayed under the thumbnail. Template=caption, for example, brings out the whole description.)

    This is not the actual page nor are those the images I intend to use :).

    Thanks for your help,
    Antti

    esmi

    (@esmi)

    13 years, 4 months ago

    I’d like the image to be aligned to left or right, with the text going around it.

    Assuming you’re referring to each image’s attachment/post page, you’d need to first create a child theme (or use a custom CSS plugin) and add something like:

    .image-attachment div.attachment img {
    float: left;
    margin:0 20px 20px 0;
}
    Thread Starter Ansarc

    (@ansarc)

    13 years, 4 months ago

    Hi,

    Thanks for the tip :). I’ll have to see if I get that far into this in the near future, since for the time being I’ve even no idea how I’d set up a child theme for (just) the post/attachment pages, if I indeed learnt to make one :).

    Best,
    Antti

    esmi

    (@esmi)

    13 years, 4 months ago

    Download a basic Twenty Twelve child theme 🙂

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Aligning descriptions in an image gallery’ is closed to new replies.