Archived topic
Blog posts featured images cropped!
3 replies · Started by Ismail on February 25, 2023
Hi,
I'm a new user of GP and so far I like it a lot.
However, I have a small problem with featured images cropped in blog posts.
They look all right on archive pages.
Thanks in advance for your help.
Hi there,
that site uses a Block Element, and displays the featured image as a background, which is what allows the content to sit over the image.
We can guid you on how to change that for an image block so it shows all the image. But will you still require the content overlay ?
I don't need the content overlay, I just want the image to be fully shown with no cropping.
Is there a way to do that without altering how the website looks like?
Whilst viewing a post, check the Admin Bar > Elements menu to see any Elements attached to that page.
Thats a shortcut to the admin screen found in Appearance > Elements.
Edit the one titled: Single Post Hero
When you're in there, delete all of the blocks.
From the 3 dot menu in top, switch to code editor.
Paste in the following:
<!-- wp:generateblocks/image {"uniqueId":"bbdc6829","sizeSlug":"full","useDynamicData":true,"dynamicContentType":"featured-image"} /-->
<!-- wp:generateblocks/container {"uniqueId":"8a25fc79","outerContainer":"contained","borderColor":"#e8edf0","backgroundColor":"var(\u002d\u002dbase-3)","textColor":"var(\u002d\u002dcontrast)","linkColor":"var(\u002d\u002dcontrast)","linkColorHover":"var(\u002d\u002dcontrast-2)","fontSize":14,"isDynamic":true,"blockVersion":3,"useInnerContainer":true,"alignment":"center","paddingTop":"20","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","gpInlinePostMeta":true,"gpInlinePostMetaJustify":"center"} -->
<!-- wp:generatepress/dynamic-image {"imageType":"author-avatar","avatarRounded":true} /-->
<!-- wp:generateblocks/headline {"uniqueId":"3fb4928a","element":"div","blockVersion":2,"display":"inline-block","marginLeft":"10","paddingRight":"10","inlineWidth":true,"gpDynamicTextType":"post-author","gpDynamicLinkType":"author-archives","gpDynamicTextReplace":"Author Name"} -->
<div class="gb-headline gb-headline-3fb4928a gb-headline-text">Author Name</div>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"f9b55781","element":"div","blockVersion":2,"display":"inline-block","paddingLeft":"10","borderSizeLeft":"1","inlineWidth":true,"borderColor":"#e8edf0","gpDynamicTextType":"post-date","gpDynamicTextReplace":"Date"} -->
<div class="gb-headline gb-headline-f9b55781 gb-headline-text">Date</div>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"8fca9ec9","element":"div","blockVersion":2,"display":"inline-flex","alignItems":"center","marginLeft":"10","paddingLeft":"10","borderSizeLeft":"1","inlineWidth":true,"borderColor":"#e8edf0","hasIcon":true,"gpDynamicTextType":"comments-number","gpDynamicLinkType":"comments","gpDynamicTextReplace":"Comments","gpDynamicTextTaxonomy":"category","gpDynamicNoCommentsText":"0","gpDynamicSingleCommentText":"1","gpDynamicMultipleCommentsText":"%"} -->
<div class="gb-headline gb-headline-8fca9ec9"><span class="gb-icon"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M14.2 14c.6-.5 1.8-1.6 1.8-3.2 0-1.4-1.2-2.6-2.8-3.3.5-.6.8-1.5.8-2.4C14 2.3 11.1 0 7.4 0 3.9 0 0 2.1 0 5.1c0 2.1 1.6 3.6 2.3 4.2-.1 1.2-.6 1.7-.6 1.7L.5 12H2c1.2 0 2.2-.3 3-.7.3 1.9 2.5 3.4 5.3 3.4h.5c.6.5 1.8 1.3 3.5 1.3h1.4l-1.1-.9s-.3-.3-.4-1.1zm-3.9-.3C8 13.7 6 12.4 6 10.9v-.2c.2-.2.4-.3.5-.5h.7c2.1 0 4-.7 5.2-1.9 1.5.5 2.6 1.5 2.6 2.5s-.9 2-1.7 2.5l-.3.2v.3c0 .5.2.8.3 1.1-1-.2-1.7-.7-1.9-1l-.1-.2h-1zM7.4 1C10.5 1 13 2.9 13 5.1s-2.6 4.1-5.8 4.1H6.1l-.1.2c-.3.4-1.5 1.2-3.1 1.5.1-.4.1-1 .1-1.8v-.3C2 8 .9 6.6.9 5.2.9 3 4.1 1 7.4 1z"></path></svg></span><span class="gb-headline-text">Comments</span></div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
And then switch back to visual editor.
Publish the changes.