Need help? Check out our Support site, then


Post Thumbnails Shortcode in Horizontal Columns

  1. I am experimenting with an archives of the latest posts. I would like to have thumbnails of the latest posts in horizontal columns. Here is an example, but I want to take out the titles and then list them horizontally. Any ideas with css and shortcode for posts or archives?

    Here is my example page: http://photolord.com/archive/

    The blog I need help with is photolord.com.

  2. The blog you specified at photolord.com does not appear to be hosted at WordPress.com.

    This support forum is for blogs hosted at WordPress.com. If your question is about a self-hosted WordPress blog then you'll find help at the WordPress.org forums.

    If you don't understand the difference between WordPress.com and WordPress.org, you may find this information helpful.

    If you forgot to include a link to your blog, you can reply and include it below. It'll help people to answer your question.

    This is an automated message.

  3. This is on wordpress.com

    Why does this supportbot always pop up when I list something for photolord.com in this forum if it has nothing to do with premium themes? It does not take into consideration domain upgrades.

  4. Hi there, there is no "exclude title" argument for the Display Posts shortcode, but you can use CSS to hide them. Add the following and it will hide the text titles for all of your display posts listings.

    .listing-item .title {
        display: none;
    }

    With the addition of the above code, the thumbnails will show in columns if you take this out of your custom CSS. The posts without images go kind of wonky though, but I expect you will have images for all of them.

    .display-posts-listing .listing-item {
        clear: both;
    }
  5. I have another question. BTW, your instructions worked out very well. Thanks.

    If you look at the page, http://photolord.com/archive/ , you will see that the thumbnails are getting stuck after a thumbnail doesn't fit the same proportions as the others. Back in the day you could simply take care of this by making all the thumbnails square in the media settings, but it looks as if you can not change this anymore, or maybe it's because my theme doesn't allow me to change the thumbnails to square. Is there a way to fix this so that the thumbnails will nest correctly? I wonder how the WP theme Duotone does this? http://duotonedemo.wordpress.com/2008/04/

    The thumbnails do not need to be square, they just have to line up correctly.

    Thanks again for your help.

  6. I'm seeing the images top aligned in rows on your site with identical widths.

    At Settings > Media in your dashboard, the height and width for thumbnails creates a bounding box. If an image is taller than it is wide, the height listed at Settings > Media will rule. If the image is wider than it is tall then the width listed at Settings > Media will rule.

    The only way to have alignment in the vertical and horizontal in the grid is to make the images square and upload those images and use them.

    Right now, I think things look pretty good, considering. I'd rather have the widths the same (columns) than the heights (rows).

  7. Depending on what the width of the screen/window, the photos line up correctly or incorrectly. On my Macbook Pro 13inch, the photos do not line up correctly. Whereas, on my desktop, the photos line up correctly. Try readjusting the window size and you will see what I'm talking about. Is there something I can do to correct for the photos not lining up correctly at various screen resolutions?

  8. Ah, now I see what you mean. I'm unaware of anyway to control that with the display posts shortcode. I've looked at the generated HTML on the page, and each image/item is a separate div.

    I've got an idea using @media rules and will see what I can do. The thing is, it has to drop to two columns on normal smart phone (portrait) widths of 320px, but I may be able to make it less objectionable than it is now.

  9. You know, it seems this might be related to the differences in image heights as the odd breaks seem to happen where the next image seems to block things flowing neatly.

    You might try increasing the "canvas" for each image in your image editing program so that they are all the same height and then save them as PNGs with transparency so the images are effectively all the same height.

    I'm not seeing anyway to do this via CSS.

  10. Ok, I'll just make sure going forward that the images I post are the same proportions so they flow correctly with different screen resolutions. Thanks for all your help. :)

  11. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic