Visual: display thumbnails evenly within post

  • nilla2014 · Member ·

    I have 3 URL links displayed horizontally across my post and would like the 3 associated thumbnails to display beneath the URLs.

    I don’t really want to put this information in a 3-columned table so is there an easy way to do this?

    Links and thumbnails are not Related Posts or widgets.

    Many thanks.

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Can I have a link to the page or post you are talking about? The code will depend on how you have things done with the links.

  • nilla2014 · Member ·

    It’s still in draft so don’t think I can share just yet.

    I’ve kind of fudged it to look evenly spaced by simply adjusting the image margins in Advanced Options (Image Details) – this seems to work. Although I’ve gone back to medium-sized images to fill up space.

  • thesacredpath · Member ·

    I can preview your drafts. I see the three images at the bottom, are those the ones?

  • thesacredpath · Member ·

    Have you considered linking the text in the caption below the images? We can add links in a caption. If you consider that, this would be the basic link code. You would just replace the caption text with the following and then replace LINK_URL with the link and CAPTION_TEXT with the caption.
    <a href="LINK_URL">CAPTION_TEXT</a>

    The above would simplify things greatly and possibly prevent issues in the future if you were to happen to switch themes or something.

  • nilla2014 · Member ·

    Great, I didn’t realise you could :)
    I’ve changed them around a bit as the thumbnails were too small.

    Thanks for the suggestion that worked but the spacing between images isn’t great.

    Also, I was trying to get a Pin It link in there but think I’ll have to give up on having both and just stick to the main link.

    Just noticed that the font in the other 6 links below the images is smaller than the rest of the post (16px). Any ideas why?

    Thank you for your help!

  • nilla2014 · Member ·

    Just to add to the above, I’ve hit another problem.
    I’ve included the correct link to an external sight but it links back to my own site. Not sure why?

    Many thanks.

  • thesacredpath · Member ·

    Hi there, I looked at the captions on those images, and the LINK_URL had not been replaced with the actual URL, so I corrected that using the same URL that was on the image link. I also added a div to enclose those three images, and created the following CSS rule to center things. Add this to the very bottom of your custom CSS. 

    @media screen and (min-width: 480px) {
.ctr-img {
	display: flex;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-ms-box-orient: horizontal;
	box-orient: horizontal;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
}
@media screen and (max-width: 1035px) {
.site-content {
	margin-right: 1.3%;
}
#secondary {
	width: 100%;
}
}
@media screen and (max-width: 479px) {
.ctr-img .wp-caption {
	width: 100% !important;
}
.ctr-img .wp-caption img {
	width: 100%;
}
}

    This also addresses a number of other things I saw, particularly on narrower screens/windows. See what you think and make sure and view everything in phone and tablet too.

  • thesacredpath · Member ·

    I forgot to mention that you will see a large bit of blank space below those three images. That is due to a bunch of empty paragraphs below, which you will need to remove (unless that space is what you desired).

  • nilla2014 · Member ·

    Wow! Thank you so much – really appreciate your excellent support!
    That looks much better and I’ve removed the block of space.

    The only weird thing with this post is that the links below those 3 images you fixed for me display at a smaller font than the rest of the post. I’ve cleared the formatting but still not resetting to the correct 16px font size.
    Any ideas or should I start a new thread for this?

    Many thanks again :)

  • thesacredpath · Member ·

    Hmmm, nothing we entered would have changed the font size for the captions. If you wish to adjust the caption text size in those, add the following to your custom CSS. Note this will affect all caption text where you set the caption as a link. Adjust as desired. 

    .wp-caption-text a {
    font-size: 16px !important;
}
  • nilla2014 · Member ·

    No it didn’t. It happened before your code. I mentioned it above but think you missed it. :)

    I included the code but it didn’t change the font size in that post.

    Also, is there a way to reduce the thumbnail for this particular post? It seems a lot larger than my usual ‘portrait’ thumbnails. Do I need to start a new thread for this?

    Cheers

  • thesacredpath · Member ·

    The 16px is what it was in the theme CSS. If you wish the captions text/links to be larger, increase the 16px value. I went into your customizer and when I increase the 16px for the captions, the get larger or smaller depending on what I replace 16px with. The code I have given is just for the linked captions, not for regular captions.

    If you want all captions to be larger, then replace the previous CSS with the following and adjust my 30px value as desired. 

    .wp-caption-text a, .wp-caption-text {
	font-size:30px !important;
}

    The first image simply has a much bigger height to width ratio than the other featured portrait images I see in your posts. It is 580px x 302px, which is 1.92 to 1 (height to width). The Venice image further down as a height to width ratio of 1.39 to 1.

  • nilla2014 · Member ·

    Thanks for the info!

  • thesacredpath · Member ·

    You are welcome.

  • The topic ‘Visual: display thumbnails evenly within post’ is closed to new replies.