Archived topic
Dynamic featured image background
10 replies · Started by Paul on January 29, 2022
Hi,
I'm trying to set the background of one container in a grid to use the featured image of the page/post.
Setting the background manually obviously isn't desirable and doesn't work on older versions of iOS - tested on iPad iOS 9.
Using the dynamic image option in turn has sizing issues on tablet portrait and smaller screens in that it can't fill the container. Also, strangely, the image doesn't display on the latest version of Safari or Chrome (iPhone & Galaxy), but will display on the older iOS 9.
Is there a happy medium possible for this?
Element is a page hero with a grid of 66/33, 66/33, 100/100.
Thanks,
Paul.
Adding a custom field 'hero_image' and using dynamic option of post meta produces same fault as featured image - doesn't work on latest Safari or Chrome, image is displayed on older Safari.
Hi there,
can you share a link to the site where i can see the issue?
Hi David,
Featured image is now displaying after removing and re-adding to the post. Not sure if there's a way to have it fill the container on all devices without setting it manually as the background?
Link is below.
Thanks,
Paul.
So you want the Image in right hand column to fill the height at all screen sizes ?
Yeah exactly. Or the minimum height I set - I haven't checked that across devices yet. But the image to fill the column yeah.
OK. So in the Grid column layout below the % widths there is:
grow shrink basis
The column with the image try setting them to 0 0 400px - adjust the 400px to suit the width of the image.
then in the first column set them to:
grow: 1
shrink: 1
basis: calc(100% - 400px)
You will need to adjust or modify them for tablet and mobile
Yeah that's a much better result! How did you arrive at the 400px value?
I used the Browser developers tools. Inspect the left columns height ( padding + headline block ) and that was around 260px.
So we needed the image to be a little bit taller so it would set the height of the container.
To control that we can define the flex basis value, which sets the 'preferred' width of the column.
Now we just need to calc the preffered width. I knew the height was 260px so i multiplied that by the images orignal aspect ratio ( 2400 / 1600 ) of 1.5 which equaled 390px. And i rounded it up :)
Hi David,
Sorry late reply, I see the logic now.
Thanks for your help,
Paul.
You're welcome
