Problem of the example with "Magazine Featured Post with overlay"

Hi there,

not easily, as the Featured image is set as the Background to the Container Block. And that is a requirement for the overlay.
To display 100% of the image ie. no cropping and no empty space in the container requires the Container Block to have the exact same Aspect Ratio as the image.

And thats not easy.

If you consider the width of the container will vary depending on the screen size, and its height will vary depending on the content within eg. the Post title. And that height will also vary as the text reflows to more lines on smaller screens.... the point being they need to have a fluid Aspect Ratio....

It is possible to use some CSS to force the Containers aspect ratio.
For example:

Add this CSS:

.force-aspect-ratio {
    aspect-ratio: 16/9;
}

Then select the Container Block and give it an Advanced > Additional CSS Class of: force-aspect-ratio

And you will see it will now take on a 16:9 Aspect ratio.

There will be a requirement for more CSS to adjust the aspect ratio of the content inside. But first off... the big question is - Are all your images of the same Aspect Ratio ?

Now I am slowly understanding. Yes, I use all the images with same aspect ratio, that is 16:9. As I use marketer template, it looks good with 16:9 aspect ratio. Please guide me.

OK, switch the editor to Code Editor, and paste in this HTML:

<!-- wp:generateblocks/container {"uniqueId":"1b694ec7","paddingTop":"80","paddingRight":"40","paddingBottom":"80","paddingLeft":"40","paddingTopMobile":"40","paddingRightMobile":"20","paddingBottomMobile":"40","paddingLeftMobile":"20","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"0e9c57d3"} -->
<h2 class="gb-headline gb-headline-0e9c57d3 gb-headline-text">Magazine Featured Post with overlay </h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/query-loop {"uniqueId":"83a317d4","query":{"post_type":"post","per_page":"2"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"ba2c4fca","columns":1,"horizontalGap":40,"verticalGap":40,"isDynamic":true,"blockVersion":2,"isQueryLoop":true,"lock":{"remove":true},"className":"aspect-169"} -->
<!-- wp:generateblocks/container {"uniqueId":"1c5ee426","isGrid":true,"isQueryLoopItem":true,"gridId":"ba2c4fca","width":50,"widthTablet":100,"minHeight":250,"bgOptions":{"selector":"pseudo-element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"bgImageInline":true,"verticalAlignment":"flex-end","innerZindex":1,"isDynamic":true,"blockVersion":2,"useDynamicData":true,"dynamicContentType":"featured-image","dynamicLinkType":"single-post","lock":{"remove":true,"move":true},"className":"forced-aspect","useTransition":true,"transitions":[{"state":"normal","target":"self","customSelector":"","timingFunction":"ease","property":"all","duration":0.5,"delay":""},{"state":"normal","target":"backgroundImage","timingFunction":"ease","property":"all","duration":0.5,"delay":""}],"useTransform":true,"transforms":[{"type":"scale","state":"normal","target":"backgroundImage","device":"desktop","scale":1},{"type":"scale","state":"hover","target":"backgroundImage","device":"desktop","scale":1.1}]} -->
<!-- wp:generateblocks/container {"uniqueId":"9fda4856","paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingSyncUnits":true,"backgroundColor":"rgba(33, 33, 33, 0.85)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"5551c725","textColor":"var(\u002d\u002dbase-3)","linkColor":"var(\u002d\u002dbase-3)","linkColorHover":"var(\u002d\u002dbase-3)","fontWeight":"700","fontSize":20,"fontSizeMobile":18,"marginBottom":"0","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
<h2 class="gb-headline gb-headline-5551c725 gb-headline-text"></h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"e4ee23cf","element":"div","textColor":"#ffffff","linkColor":"#ffffff","linkColorHover":"#ffffff","fontWeight":"500","fontSize":16,"fontSizeMobile":12,"textTransform":"uppercase","useDynamicData":true,"dynamicContentType":"terms","dynamicLinkType":"term-archives","termTaxonomy":"category"} -->
<div class="gb-headline gb-headline-e4ee23cf gb-headline-text"></div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->
<!-- /wp:generateblocks/container -->

Then switch back to the Visual Editor.

Then add this CSS to your site:

.aspect-169 > .gb-grid-column {
    aspect-ratio: 16/9;
}
.forced-aspect {
    min-height: unset;
}

Notes:
1. the Grid Block has an Advanced > Additional CSS Class of: aspect-169
2. The Container Block ( Post Template ) has the Additional CSS Class of: forced-aspect - this is to remove the minimum height from the container. The min-height is added to the container so you can actually see the background image in the editor.

wow 🤩. What you have done man! It is working nicely for one column grid and two columns.

But for three column- image is not 100% showing and is being slightly cropped. Please guide for it.

and also one thing has done-the title area is now 100% (entire below portion).

Is it possible to make the title area below the image with same effects? As for three columns more than below half of the portion of image is covered by title area.

You can try changing the CSS to:

.aspect-169 > .gb-grid-column .forced-aspect {
    aspect-ratio: 16/9;
}
.forced-aspect {
    min-height: unset;
}

So do you not want the text over the image ? Sorry i am bit confused here

Now image is 100% showing for three column grid. Thank you so much.

No, I don't want text over image. I want it below the image with the same hover effect of the image. Please guide me.

try this HTML instead:

<!-- wp:generateblocks/container {"uniqueId":"689027b7","paddingTop":"80","paddingRight":"40","paddingBottom":"80","paddingLeft":"40","paddingTopMobile":"40","paddingRightMobile":"20","paddingBottomMobile":"40","paddingLeftMobile":"20","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"a557db38"} -->
<h2 class="gb-headline gb-headline-a557db38 gb-headline-text">Magazine Featured Post with overlay </h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/query-loop {"uniqueId":"9d5f9a24","query":{"post_type":"post","per_page":"3"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"ef194627","columns":1,"horizontalGap":40,"verticalGap":40,"isDynamic":true,"blockVersion":2,"isQueryLoop":true,"lock":{"remove":true},"className":"aspect-169"} -->
<!-- wp:generateblocks/container {"uniqueId":"bba31432","isGrid":true,"isQueryLoopItem":true,"gridId":"ef194627","width":33.33,"widthTablet":100,"minHeight":250,"bgOptions":{"selector":"pseudo-element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"bgImageInline":true,"verticalAlignment":"flex-end","innerZindex":1,"isDynamic":true,"blockVersion":2,"dynamicLinkType":"single-post","lock":{"remove":true,"move":true},"useTransition":true,"transitions":[{"state":"normal","target":"self","customSelector":"","timingFunction":"ease","property":"all","duration":0.5,"delay":""},{"state":"normal","target":"backgroundImage","timingFunction":"ease","property":"all","duration":0.5,"delay":""}],"useTransform":true,"transforms":[{"type":"scale","state":"normal","target":"backgroundImage","device":"desktop","scale":1},{"type":"scale","state":"hover","target":"backgroundImage","device":"desktop","scale":1.1}]} -->
<!-- wp:generateblocks/container {"uniqueId":"58d98094","isQueryLoopItem":true,"width":50,"widthTablet":100,"minHeight":180,"paddingSyncUnits":true,"bgOptions":{"selector":"pseudo-element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"bgImageInline":true,"verticalAlignment":"flex-end","innerZindex":1,"shapeDividers":[],"isDynamic":true,"blockVersion":2,"useDynamicData":true,"dynamicContentType":"featured-image","dynamicLinkType":"single-post","lock":{"remove":true,"move":true},"className":"forced-aspect","opacities":[],"useTransition":true,"transitions":[{"state":"normal","target":"self","customSelector":"","timingFunction":"ease","property":"all","duration":0.5,"delay":""},{"state":"normal","target":"backgroundImage","timingFunction":"ease","property":"all","duration":0.5,"delay":""}],"boxShadows":[],"useTransform":true,"transforms":[{"type":"scale","state":"normal","target":"backgroundImage","device":"desktop","scale":1},{"type":"scale","state":"hover","target":"backgroundImage","device":"desktop","scale":1.1}],"textShadows":[],"filters":[],"advBackgrounds":[]} /-->

<!-- wp:generateblocks/container {"uniqueId":"be786390","paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingSyncUnits":true,"backgroundColor":"rgba(33, 33, 33, 0.85)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"0e82e2c2","textColor":"var(\u002d\u002dbase-3)","linkColor":"var(\u002d\u002dbase-3)","linkColorHover":"var(\u002d\u002dbase-3)","fontWeight":"700","fontSize":20,"fontSizeMobile":18,"marginBottom":"0","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
<h2 class="gb-headline gb-headline-0e82e2c2 gb-headline-text"></h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"3506a939","element":"div","textColor":"#ffffff","linkColor":"#ffffff","linkColorHover":"#ffffff","fontWeight":"500","fontSize":16,"fontSizeMobile":12,"textTransform":"uppercase","useDynamicData":true,"dynamicContentType":"terms","dynamicLinkType":"term-archives","termTaxonomy":"category"} -->
<div class="gb-headline gb-headline-3506a939 gb-headline-text"></div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->
<!-- /wp:generateblocks/container -->

but please no more changes, there is only so many custom revisions i can make.

Please only one request: the entire container of the title area is not linked. Only the title is linked. How can I do it?

Select the Container Block that has the Background Image, then check its Dynamic Data options:

https://docs.generateblocks.com/article/container-overview/#dynamic-data

Change the Link Source to the Current Post.

There is no option of current post under link source. Current post option is only available under data source.

Now it is done. I have changed to current post option under data source of dynamic data. But hover effect is not working now. Please check my site.

Hi David, Please please help me, I said it is the last question in this topic.

Hi Ashim,

We can’t view the site. It’s currently under maintenance mode. Can you temporarily turn this off so we can see the issue?

Thank you Fernando for your reply.
As David don’t want to help me on this issue. So I make maintenance mode on.

I don’t want any help. Thanks.