I am looking for a solution to a problem with Plugin Essential Blocks for Gutenberg. Problem: The images have 2 ways to be viewed, in grid and in masonry. If you select grid and insert 4 images of different sizes the system crops the images to form a square I think 300x300. If you choose masonry the images take the original size but as there are very small images and other big ones, it looks very bad. What I am looking for: That the image has the same percentage or value of 300 but that the width is respected. I leave an image of what I want. enter image description here https://blog.logrocket.com/how-create-responsive-image-gallery-css-flexbox/ And a website where I saw the result that looks amazing and that this plugin does not bring. You must scroll to the TITLE that says: Responsive image gallery maintaining image aspect ratios. I'm using Elementor and Elementor Pro, but the content is inside a Post Type, and I use Gutenberg. The plugin that has this error is Essential Blocks for Gutenberg. And no word yet when they will release an update with this setting.

Plugin Essential Blocks for Gutenberg - Fix that maintains image aspect ratios

Excuse me, it's a question... and as for the code I'm just starting, and I'm uploading image galleries...

I am sharing with you the gallery code that is inside the Gutenberg block.

This I'm in test mode locally because I can't go to the live site to test.

<!-- wp:essential-blocks/image-gallery {"blockId":"eb-image-gallery-9vwl1bx","blockMeta":{"desktop":" .eb-gallery-img-wrapper.eb-image-gallery-9vwl1bx{ gap:10px; transition:background 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s ; }  .eb-gallery-img-wrapper.eb-image-gallery-9vwl1bx.grid{ grid-template-columns: repeat(3, auto); } .eb-gallery-img-wrapper.eb-image-gallery-9vwl1bx.masonry{ columns: 3; } .eb-gallery-img-wrapper.eb-image-gallery-9vwl1bx.masonry .eb-gallery-img-content{ margin-bottom: 10px; } .eb-gallery-img-wrapper.eb-image-gallery-9vwl1bx .eb-gallery-img-content .eb-gallery-link-wrapper { transition: border 0.5s, border-radius 0.5s, box-shadow 0.5s ; }  .eb-gallery-img-wrapper.eb-image-gallery-9vwl1bx .eb-gallery-img-content .eb-gallery-img-caption { color: #ffffff; background-color: rgba(195 195 195 / 0.7); text-align: center; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; padding-top: 5px; padding-right: 10px; padding-left: 10px; padding-bottom: 5px; font-size: 13px; } .eb-gallery-img-wrapper.eb-image-gallery-9vwl1bx.caption-style-2 .eb-gallery-link-wrapper:after { background-color: rgba(0 0 0 / 0.7); } ","tab":"   .eb-gallery-img-wrapper.eb-image-gallery-9vwl1bx.grid{ grid-template-columns: repeat(, auto); } .eb-gallery-img-wrapper.eb-image-gallery-9vwl1bx.masonry{ columns: ; } .eb-gallery-img-wrapper.eb-image-gallery-9vwl1bx.masonry .eb-gallery-img-content{ margin-bottom: calc(px - px); }    ","mobile":"   .eb-gallery-img-wrapper.eb-image-gallery-9vwl1bx.grid{ grid-template-columns: repeat(, auto); } .eb-gallery-img-wrapper.eb-image-gallery-9vwl1bx.masonry{ columns: ; } .eb-gallery-img-wrapper.eb-image-gallery-9vwl1bx.masonry .eb-gallery-img-content{ margin-bottom: calc(px - px); }    "},"images":[{"sizes":{"full":{"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-11-La-pluma-el-tintero-y-el-secante-Historia-del-mundo-2.jpg","height":175,"width":215,"orientation":"landscape"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":747,"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-11-La-pluma-el-tintero-y-el-secante-Historia-del-mundo-2.jpg","alt":"","link":"http://localhost/labexp/?attachment_id=747","caption":"F"},{"sizes":{"full":{"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-27-C-Nils-Lofgren-y-Bengt-Historia-del-mundo-2.jpg","height":630,"width":764,"orientation":"landscape"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":749,"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-27-C-Nils-Lofgren-y-Bengt-Historia-del-mundo-2.jpg","alt":"","link":"http://localhost/labexp/?attachment_id=749","caption":""},{"sizes":{"full":{"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-1.jpg","height":332,"width":247,"orientation":"portrait"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":744,"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-1.jpg","alt":"","link":"http://localhost/labexp/?attachment_id=744","caption":"I"},{"sizes":{"full":{"url":"http://localhost/labexp/wp-content/uploads/2022/09/1.jpg","height":482,"width":351,"orientation":"portrait"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":743,"url":"http://localhost/labexp/wp-content/uploads/2022/09/1.jpg","alt":"","link":"http://localhost/labexp/?attachment_id=743","caption":""},{"sizes":{"full":{"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-7-3-ABCD-Primer-telefono-celular.jpg","height":249,"width":808,"orientation":"landscape"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":731,"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-7-3-ABCD-Primer-telefono-celular.jpg","alt":"","link":"http://localhost/labexp/?attachment_id=731","caption":"H"},{"sizes":{"full":{"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-5-7-Primera-junta-directiva-De-Izq-a-Der.jpg","height":235,"width":147,"orientation":"portrait"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":729,"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-5-7-Primera-junta-directiva-De-Izq-a-Der.jpg","alt":"","link":"http://localhost/labexp/?attachment_id=729","caption":"C"},{"sizes":{"full":{"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-3-5-B-TraitE-anatomie-humaine.jpg","height":312,"width":283,"orientation":"portrait"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":726,"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-3-5-B-TraitE-anatomie-humaine.jpg","alt":"","link":"http://localhost/labexp/?attachment_id=726","caption":""},{"sizes":{"full":{"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-2-17-B-Placa-de-Burke-co.jpg","height":255,"width":389,"orientation":"landscape"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":723,"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-2-17-B-Placa-de-Burke-co.jpg","alt":"","link":"http://localhost/labexp/?attachment_id=723","caption":""},{"sizes":{"full":{"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-41-C-Placa-de-Danis-con-su-coapteur.png","height":641,"width":152,"orientation":"portrait"}},"mime":"image/png","type":"image","subtype":"png","id":721,"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-41-C-Placa-de-Danis-con-su-coapteur.png","alt":"","link":"http://localhost/labexp/?attachment_id=721","caption":""}],"sources":[{"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-11-La-pluma-el-tintero-y-el-secante-Historia-del-mundo-2.jpg","caption":"F"},{"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-27-C-Nils-Lofgren-y-Bengt-Historia-del-mundo-2.jpg","caption":""},{"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-1.jpg","caption":"I"},{"url":"http://localhost/labexp/wp-content/uploads/2022/09/1.jpg","caption":""},{"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-7-3-ABCD-Primer-telefono-celular.jpg","caption":"H"},{"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-5-7-Primera-junta-directiva-De-Izq-a-Der.jpg","caption":"C"},{"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-3-5-B-TraitE-anatomie-humaine.jpg","caption":""},{"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-2-17-B-Placa-de-Burke-co.jpg","caption":""},{"url":"http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-41-C-Placa-de-Danis-con-su-coapteur.png","caption":""}],"commonStyles":{"desktop":" .wp-admin .eb-parent-eb-image-gallery-9vwl1bx { display: block; opacity: 1; } .eb-parent-eb-image-gallery-9vwl1bx { display: block; } ","tab":" .editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-image-gallery-9vwl1bx { display: block; opacity: 1; } .eb-parent-eb-image-gallery-9vwl1bx { display: block; } ","mobile":" .editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-image-gallery-9vwl1bx { display: block; opacity: 1; } .eb-parent-eb-image-gallery-9vwl1bx { display: block; } "},"customCss":"eb-parent-eb-image-gallery-9vwl1bx {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 10px;\r\n}\r\neb-parent-eb-image-gallery-9vwl1bx \u003e li {\r\n    height: 300px;\r\n    cursor: pointer;\r\n    position: relative;\r\n}\r\neb-parent-eb-image-gallery-9vwl1bx li img {\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n    vertical-align: middle;\r\n    border-radius: 5px;\r\n}\r\n} {\r\n}\r\n"} -->
<div class="wp-block-essential-blocks-image-gallery"><div class="eb-parent-wrapper eb-parent-eb-image-gallery-9vwl1bx "><div class="eb-gallery-img-wrapper eb-image-gallery-9vwl1bx grid overlay-bottom caption-style-0 " data-id="eb-image-gallery-9vwl1bx"><a href="http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-11-La-pluma-el-tintero-y-el-secante-Historia-del-mundo-2.jpg" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-11-La-pluma-el-tintero-y-el-secante-Historia-del-mundo-2.jpg" image-index="0"/></span></a><a href="http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-27-C-Nils-Lofgren-y-Bengt-Historia-del-mundo-2.jpg" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-27-C-Nils-Lofgren-y-Bengt-Historia-del-mundo-2.jpg" image-index="1"/></span></a><a href="http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-1.jpg" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-1.jpg" image-index="2"/></span></a><a href="http://localhost/labexp/wp-content/uploads/2022/09/1.jpg" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/1.jpg" image-index="3"/></span></a><a href="http://localhost/labexp/wp-content/uploads/2022/09/Figura-7-3-ABCD-Primer-telefono-celular.jpg" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/Figura-7-3-ABCD-Primer-telefono-celular.jpg" image-index="4"/></span></a><a href="http://localhost/labexp/wp-content/uploads/2022/09/Figura-5-7-Primera-junta-directiva-De-Izq-a-Der.jpg" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/Figura-5-7-Primera-junta-directiva-De-Izq-a-Der.jpg" image-index="5"/></span></a><a href="http://localhost/labexp/wp-content/uploads/2022/09/Figura-3-5-B-TraitE-anatomie-humaine.jpg" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/Figura-3-5-B-TraitE-anatomie-humaine.jpg" image-index="6"/></span></a><a href="http://localhost/labexp/wp-content/uploads/2022/09/Figura-2-17-B-Placa-de-Burke-co.jpg" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/Figura-2-17-B-Placa-de-Burke-co.jpg" image-index="7"/></span></a><a href="http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-41-C-Placa-de-Danis-con-su-coapteur.png" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-41-C-Placa-de-Danis-con-su-coapteur.png" image-index="8"/></span></a></div></div></div>
<!-- /wp:essential-blocks/image-gallery -->

This is the code from the browser > tools > inspect >

<section class="elementor-section elementor-top-section elementor-element elementor-element-800e958 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="800e958" data-element_type="section" data-settings="{&quot;jet_parallax_layout_list&quot;:[]}">
                        <div class="elementor-container elementor-column-gap-default">
                    <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-6bf7992" data-id="6bf7992" data-element_type="column">
            <div class="elementor-widget-wrap elementor-element-populated">
                                <div class="elementor-element elementor-element-2b6551a elementor-widget elementor-widget-theme-post-content" data-id="2b6551a" data-element_type="widget" data-widget_type="theme-post-content.default">
                <div class="elementor-widget-container">


<div class="wp-block-essential-blocks-image-gallery"><div class="eb-parent-wrapper eb-parent-eb-image-gallery-9vwl1bx "><div class="eb-gallery-img-wrapper eb-image-gallery-9vwl1bx grid overlay-bottom caption-style-0 " data-id="eb-image-gallery-9vwl1bx"><a href="http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-11-La-pluma-el-tintero-y-el-secante-Historia-del-mundo-2.jpg" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-11-La-pluma-el-tintero-y-el-secante-Historia-del-mundo-2.jpg" image-index="0"/></span></a><a href="http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-27-C-Nils-Lofgren-y-Bengt-Historia-del-mundo-2.jpg" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-27-C-Nils-Lofgren-y-Bengt-Historia-del-mundo-2.jpg" image-index="1"/></span></a><a href="http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-1.jpg" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-1.jpg" image-index="2"/></span></a><a href="http://localhost/labexp/wp-content/uploads/2022/09/1.jpg" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/1.jpg" image-index="3"/></span></a><a href="http://localhost/labexp/wp-content/uploads/2022/09/Figura-7-3-ABCD-Primer-telefono-celular.jpg" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/Figura-7-3-ABCD-Primer-telefono-celular.jpg" image-index="4"/></span></a><a href="http://localhost/labexp/wp-content/uploads/2022/09/Figura-5-7-Primera-junta-directiva-De-Izq-a-Der.jpg" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/Figura-5-7-Primera-junta-directiva-De-Izq-a-Der.jpg" image-index="5"/></span></a><a href="http://localhost/labexp/wp-content/uploads/2022/09/Figura-3-5-B-TraitE-anatomie-humaine.jpg" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/Figura-3-5-B-TraitE-anatomie-humaine.jpg" image-index="6"/></span></a><a href="http://localhost/labexp/wp-content/uploads/2022/09/Figura-2-17-B-Placa-de-Burke-co.jpg" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/Figura-2-17-B-Placa-de-Burke-co.jpg" image-index="7"/></span></a><a href="http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-41-C-Placa-de-Danis-con-su-coapteur.png" class="eb-gallery-img-content" data-fslightbox="gallery" data-type="image"><span class="eb-gallery-link-wrapper"><img class="eb-gallery-img" src="http://localhost/labexp/wp-content/uploads/2022/09/Figura-1-41-C-Placa-de-Danis-con-su-coapteur.png" image-index="8"/></span></a></div></div></div>
        </div>

Plugin Essential Blocks for Gutenberg - Fix that maintains image aspect ratios

1 Answers