[Resolved] Image with ribbon behind it – how to create?

[Emily]

Greetings! I’m using GP and GP Blocks and want to create images that look like this:

How can I go about doing that? Thank you very much!!

[David]

Hi there,

if you:

1. Add a GB Container Block.
1.1 Set its text alignment ( in block toolbar ) to center. This will center all content.
1.2 In spacing give it some Padding and a Border Top value for your ribbon.
Also give it a high top margin value, start with 120px, this will vary depending on the size of your image.
1.3 in Colors set a background and border color.

2. Add inside the container a GB Image Block.
2.1 Set the Attachment size, eg. Thumbnail and set its width and height if needed. Optional: set the OBJECT-FIT to Cover if you’re forcing a non-square image to be square.
2.2 In Spacing add a Border value and set the Border Radius to 100%. This will make it round. Now set the Top Margin to a Negative value eg. -120px. this will drag the image up to create the overlap.

To help out, i made one, and here is the code:

<!-- wp:generateblocks/container {"uniqueId":"95c44320","paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingSyncUnits":true,"marginTop":"130","borderSizeTop":"20","borderColor":"#000000","backgroundColor":"#e2e2e2","alignment":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/image {"uniqueId":"21309f72","sizeSlug":"full","width":"200px","height":"200px","marginTop":"-130","marginBottom":"40","borderSizeTop":"4","borderSizeRight":"4","borderSizeBottom":"4","borderSizeLeft":"4","borderRadiusTopRight":"100","borderRadiusBottomRight":"100","borderRadiusBottomLeft":"100","borderRadiusTopLeft":"100","borderRadiusUnit":"%"} -->
<figure class="gb-block-image gb-block-image-21309f72"><img class="gb-image gb-image-21309f72" src="https://picsum.photos/id/237/200/200" alt=""/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/headline {"uniqueId":"aaafd08f"} -->
<h2 class="gb-headline gb-headline-aaafd08f gb-headline-text">More content below</h2>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

Just copy and paste it in to the editor.

[Emily]

This is why I love you guys so much!!! Thank you. 🙂

[Emily]

This is working great. One more question… how can I make three of these sit side-by-side and all be the same height?

[David]

You can build it inside a Grid, as each Grid column is a Container Block:

<!-- wp:generateblocks/container {"uniqueId":"5533c64c","paddingTop":"120","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","backgroundColor":"#cc1515","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/grid {"uniqueId":"a50e56a7","columns":1,"horizontalGap":20,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"c44b1b9b","isGrid":true,"gridId":"a50e56a7","width":33.33,"paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","borderSizeTop":"20","borderColor":"#000000","backgroundColor":"#e2e2e2","bgOptions":{"selector":"element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"innerZindex":1,"alignment":"center","shapeDividers":[],"isDynamic":true,"blockVersion":2,"opacities":[],"transitions":[],"boxShadows":[],"transforms":[],"textShadows":[],"filters":[],"useAdvBackgrounds":true,"advBackgrounds":[]} -->
<!-- wp:generateblocks/image {"uniqueId":"740c1927","sizeSlug":"full","width":"200px","height":"200px","marginTop":"-130","marginBottom":"40","borderSizeTop":"4","borderSizeRight":"4","borderSizeBottom":"4","borderSizeLeft":"4","borderRadiusTopRight":"100","borderRadiusBottomRight":"100","borderRadiusBottomLeft":"100","borderRadiusTopLeft":"100","borderRadiusUnit":"%"} -->
<figure class="gb-block-image gb-block-image-740c1927"><img class="gb-image gb-image-740c1927" src="https://picsum.photos/id/237/200/200" alt=""/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/headline {"uniqueId":"d5dffc14"} -->
<h2 class="gb-headline gb-headline-d5dffc14 gb-headline-text">More content below</h2>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->

If you select the Container inside the Grid Block, in its Toolbar you will see a + Duplicate Grid Item button. So you can duplicate them after you get the first one how you need it.

[Author]

Posts