Displaying recent posts with an image/thumbnail
-
Hi there,
Working on updating my site and I want to add a spot on my homepage for users to be able to see my latest post. I tried using the ‘recent posts’ widget, but that does not give the option to add an image or thumbnail. Since all of my posts are images with text embedded, I would just like to be able to have a spot on the main page where the most recent post is displayed. I have been messing around with some CSS but have so far gotten nowhere. Does anyone have any directions or ideas?
The blog I need help with is: (visible only to logged in users)
-
A couple of possibilities that would let you display your latest post with a thumbnail image:
Display Posts shortcode – https://en.support.wordpress.com/display-posts-shortcode/
Something like this should get you started:
[display-posts image_size="thumbnail" posts_per_page="1"]You’ll likely want to style the output with CSS.
Display WordPress posts widget – https://en.support.wordpress.com/widgets/display-wordpress-posts/
In the widget’s settings, choose to display 1 post and select the “Show Featured Image” option.
Just let me know if you need further help.
-
So far I like the display posts short-code idea. I have tried yours, and it does give me the post but will not include the image on the post. I can get the image if i include include_content=”true”, but then the size is massive. If I can change this with CSS to be a set size I wouldn’t mind, and this option would work for me. I do not currently have my changes saved, but the shortcode I added was [display-posts include_content="true" image_size="thumbnail" posts_per_page="1"], there has so far been no other way that will allow images from the post to appear
-
I have gotten that result to also reduce the image size a bit with css using max-width and height, but it looks funny when switching between different device sizes. I suppose my issue is just trying to get the image to show without having to use include_content=”true”, so that I can just show the image without all the text
-
I have tried yours, and it does give me the post but will not include the image on the post.
The post needs a featured image set on it – could you verify that your post has a featured image added? It’s the featured image that’s displayed with
image_size="thumbnail". -
It might also depend where exactly you’re trying to add the shortcode. Could you tell me where on your page you’re adding it so I can do some further testing?
-
Sorry for the late reply. I did add a featured image, and it looks like that would work for me. However, the issue with this method would be that when scrolling through the posts on the blog, it will display both the featured image as well as the image in the post, which would be a double of the same image. If there is a way to hide the featured image from showing this would definitely work for me, or I may just have to remove the image that is located in the post.
-
I was also adding the shortcode directly under the construction symbol on the front page, and it looked okay when I did add a featured image to the latest post.
-
If you don’t add
include_content="true"then the image won’t be repeated twice. Would you be able to add the shortcode to your page so I can take a look directly? -
Okay, so I think I am fine with the way it looks currently, and I will style it later with CSS. So my issue now would definitely be the layout of the blog page. By adding featured images it looks a bit messy because the images are different sizes, and some are simply too large. I would like to:
1. Make it so that each of my posts uses the workout image as the featured image so that it will display on the front page (DONE)
2. Make the blog page so that users can only see the featured image and not the text. (This is because I want to add the workout in plain text for search purposes, but don’t want to add unnecessary length to the blog page. If they click on the actual post I am fine with them seeing the text. For examples you can see my post on Feb 16 and Feb, I have changed those two to only use featured images and included plain text. (NOT DONE)
3. Restrict the size of the featured images on the actual blog page so that all images are fairly uniform. If this can be achieved through CSS or options that’d be great, but if I must manually change my picture sizes so be it. (NOT DONE)
I appreciate all your help thus far, thank you!
-
Okay, so I think I am fine with the way it looks currently, and I will style it later with CSS.
Great.
Let’s look at each of the not-yet-done things separately:
2. Make the blog page so that users can only see the featured image and not the text. (This is because I want to add the workout in plain text for search purposes, but don’t want to add unnecessary length to the blog page. If they click on the actual post I am fine with them seeing the text. For examples you can see my post on Feb 16 and Feb, I have changed those two to only use featured images and included plain text. (NOT DONE)
You could use the More tag for this, placing it just after the featured image on each post:
https://en.support.wordpress.com/more-tag/
That would give you a “continue reading” link after the featured image.
-
-
You could use the More tag for this, placing it just after the featured image on each post:
Just to clarify, you’d probably have to put the tag at the beginning of the post editor since the featured image isn’t set within the post itself.
3. Restrict the size of the featured images on the actual blog page so that all images are fairly uniform. If this can be achieved through CSS or options that’d be great, but if I must manually change my picture sizes so be it. (NOT DONE)
The featured images in Goran aren’t cropped – they are 772px wide by unlimited height.
I think you’ll get the best results by making your featured images all have the same height in a graphics editor before uploading them.
-
-
You’re very welcome! I’ll mark this thread as resolved but feel free to start a new one if you need help with anything else.
- The topic ‘Displaying recent posts with an image/thumbnail’ is closed to new replies.
WordPress.com Forums 