Multiple featured images – supported?

Oh wow – just realized this is the first question asked in this support forum:

https://www.ads-software.com/support/topic/using-a-second-featured-image?replies=6

Hah!

I’m not sure that solution applies to the current version of this plugin–that was quite a while ago. This plugin relies pretty heavily on retrieving the post thumbnail by default, although there probably is a way to pull something different out for pages/posts. It would probably require significant enough work to merit forking the plugin, which you are welcome to do–the relevant work would probably all be in class-displayfeaturedimagegenesis-common.php.

The images should not be stretched or skewed, although depending on the image, it may not feel “right” to have it backstretched. Can you share an example link where the image is distorted? I would like to look into that.

Thanks!

Hi Robin! Thanks for taking the time to reply. I really appreciate it.

Here is an example of what I mean:

View post on imgur.com

I have a large 27 inch monitor, and the featured image is also large in height. So the result is that it covers the entire screen.

If I have the featured image inside of the post, then it looks ok:

View post on imgur.com

It’s still large, but all part of the image is visible (no cropping) and it doesn’t take up the entire screen.

But I like the plugin’s effect and so for that reason I was thinking of having a secondary image that I can assign to the post that has preferred dimensions and content that can be cropped.

—

Also, and this is a slightly different topic, but it seems like the featured image height does not adapt when the view area is mobile device size. Here is an example of what I mean:

View post on imgur.com

Even thought the viewing area is much less, the featured image height remains the same.

—

Also, and this is a little off tangent, but I would also be interested in having adaptability, so that the there are several featured image dimension versions that load depending on the screen size. That way a mobile device doesn’t need to download an image that can only be viewed on a desktop in its entirety.

—

Thank you again – I know that this is all volunteer effort, so I’m just sharing my thoughts since you asked about it.

Hey Alexander!

I see what you mean. For myself, what I will do sometimes is add some CSS so that the featured image cannot go above a certain pixel height, because on truly large screens, you’re right, it can be overwhelming.

So, for example, in my own theme, I have this:

.big-leader {
	max-height: 800px;
}

The backstretch script is intended to cover the screen, period, regardless of the width/height ratio. So yes, on a phone, for example, the sides of the image will be cropped. So not every image is a good candidate for this effect, but again, you can target this with CSS, so that the height of the image will be shorter to compensate. Since mobile device screen sizes vary so wildly, you can get into a decent ballpark, but it may not be possible to get the entire image to show, no matter what, as long as you are using the backstretch image.

I have thought about the possibility of serving smaller image files for smaller devices, and I agree with you on that, but it’s not easy to implement. The plugin does make sure that even if you upload a ridiculously large image (if someone uploaded something straight from their camera, for example, it could be 8000 pixels wide), it will use a smaller size, but there is still room for improvement there. Thank you for the suggestion!

I think I can add in a filter to allow you to use a different image as the backstretch featured image, although it will be up to you to implement. The key will be to retrieve the ID of the new image–the URL or anything else will not work. My initial tests suggest that it’s doable, though.

Hi Robin! Hey, I’m using the utility pro theme and I found a way to use built in backstretch functionality to achieve the same below header effect. I’ll send you the link once the customizations are complete so that you can see how I did it. Thanks again for taking the time to reply!

Yes, Utility Pro has the backstretch functionality built in, and you can absolutely use it to get this same kind of effect. I built the plugin partly because there are times were more control is needed–for example, if the featured image is too small to effectively backstretch, but is anyway, it looks pretty awful. So part of what the plugin does is to “measure” the featured image and evaluate the best way to use it.

I have added a filter on the image ID, so it would be possible to set an alternate featured image for a post or page, and use that image instead of the WP featured image. If you’re interested, it’s in the development branch of the plugin. The new filter would be display_featured_image_genesis_image_id.