Help with Recent Posts Featured Image position

Support
#1

I’m having an issue with the positon of images in recent posts element. I’ve tried editing CSS but it’s not working. The image looks like it is center center and overflow is hidden—no matter how I change the CSS! Am I addressing the wrong element?

.x-recent-posts-img

Presently the most Recent Post is ok. The second most Recent Post is cropping the top and bottom of the image even though it should be “top.” It looks terrible! What am I doing wrong? How can I fix this so that the featured image will always load top and if necessary, have bottom overflow?

http://new.murphypeakperformance.com/

#2

Howdy, @leslie!

Thanks for writing in! The images used in the Recent Posts element are set as background images on a <div> with a particular aspect ratio set, which helps to ensure that the height of the elements remains consistent when in a horizontal line. This background image is set to background-size: cover; to ensure that the image is always filling up the entire space of the <div> proportionally and there are no unsightly background colors showing through. While there is no way to alter how browsers render this cover effect (as it has to do with the dimensions of the image itself and the aspect ratio of the container), you can update the position of the background image within its container. For example, you could try:

.x-recent-posts .x-recent-posts-img {
  background-position: 50% 0%;
}

This will set your image to be centered horizontally with the 50% value for the x-axis and aligned at the top of the <div> with the 0% value for the y-axis.

That being said, the reason your second image is appearing “cropped” no matter what you do is because the source image itself is physically cropped at the top and bottom:

If you unintentionally edited this before uploading, you will need to upload a new one to ensure you have the proper version in place.

Hopefully this helps to point you in the right direction. Cheers!

#3

I tried the code but it doesn’t do anything, even with !important.

And no, the second source image is not physically cropped. It shows the full image in the post here: http://new.murphypeakperformance.com/tips/peak-performance-tips/

I tried deleting the image and uploading a new file but X theme duplicates the media file (many times and sizes) and crops it. I uploaded a full image. Why is X theme doing this?

#4

Hello @leslie,

You correct that the image is cropped in the Recent Post element, which is something that I had forgotten about. This is intended because of the design reasons mentioned in my previous post.

Regarding the cropping and duplicating of media files, this is standard for WordPress themes and plugins. Any WordPress theme or plugin you use, if it utilizes images in any way has the ability to specify various sizes of images that are used throughout the design. For example, with X, some of these image sizes are used in blog posts, others in your portfolio (if you have one), et cetera). If you were using WooCommerce to run an online shop, you would find that the plugin generates many various thumbnail sizes of any product image you upload, which is used throughout your design. This is a standard practice and not something you have any control over and is necessary for any products you are using.

Because of the nature of the Recent Post element and how it is designed, in conjunction with the types of images you are using, it is likely that this element might not be a good fit for what you’re trying to accomplish. Here are a couple options you can explore:

  1. If you don’t absolutely need images to show, you can disable them for the shortcode and just leave the text output.
  2. If you do require images while displaying recent posts, you can try using either “Essential Grid” or “The Grid,” two of our integrated third party Extensions. These plugins are built to display recent posts and offer a wide variety of styling options and functionality. They will require a little bit of setup to get just right, but I think that it may fit your needs better than the simple implementation that our native element is intended to provide. If you have not used any of our Extensions before, you can read all about doing so here.
#5

Kory,

I have used many other themes before and frankly, they have not given me this problem. I have tried Essential Grid and it didn’t work for me. I have Recent Posts set up and I do not have a desire or the time to redevelop that section.

The problem is the way the theme crops the photos. It crops off the top and the bottom of the image and leaves an unrecognizable, unpleasant image.

Is there a way to have it crop the image so it always shows the top portion of the image? And is there a size and aspect ratio that works best for uploading Featured Images?

I need this to work well because the Editor (who is not a designer or developer) will be uploading new posts with featured images and we need to be sure that the blog looks good. Presently, it does not look good the way the images are auto-cropped.

#6
#7

@leslie,

As stated previously, this element is setup to function this way for a very specific reason. Also, because of the way all elements are registered, they cannot be directly overwritten because that could cause potential conflicts with our builders if users overwrote native elements.

If the images you’re using do not work in a cropped fashion, you will either need to turn off images for this element completely, or explore finding different types of images that could work better in this context (that example image is from Unsplash, a website that features free stock photography that can be used in any project, and something along those lines would work great no matter how it is cropped).

If you absolutely need images to be displayed and they must be images like the ones you’re already using, you will need to explore using Essential Grid or The Grid. We have these plugins as options for these very situations and their flexibility will allow you to achieve exactly what you want.

#8

How can you just apply an algorithm to an image for cropping? An algorithm cannot properly decide how an image needs to be cropped.

What size images should we upload to have attractive featured images on all posts—no matter who uploads them? Is there a size and aspect ratio that works best for uploading Featured Images?

#9

All themes and plugins specify image sizes for their products as mentioned above. You can try uploading your images already resized to a 16:9 aspect ratio. Some cropping still might occur though based on other theme settings that determine the cropped image size.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.