I’m working on a WordPress site and I’m having trouble adjusting the size of images and text on my pages. Right now, the images appear too small, and there’s a lot of unused space around them. I’d like to make the gallery section wider so that the images and text have more room to breathe.
I’m using a block-based editor, and the gallery is wrapped inside a .wp-block-group.alignfull
container. Additionally, I have a MetaSlider, which is also affected by the layout limitations. However, in editor everything appears to be bigger.
Here’s the code I’m using on this page:
<!-- wp:group {"align":"full","className":"hostinger-ai-gallery-1 hostinger-ai-fade-up","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull hostinger-ai-gallery-1 hostinger-ai-fade-up"><!-- wp:group {"align":"full","className":"hostinger-ai-fade-up","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull hostinger-ai-fade-up" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:heading {"textAlign":"center","className":"hostinger-ai-title","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|20","left":"0","right":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|light"}}}},"textColor":"light","fontSize":"x-large"} -->
<h2 class="wp-block-heading has-text-align-center hostinger-ai-title has-light-color has-text-color has-link-color has-x-large-font-size" style="margin-top:0;margin-right:0;margin-bottom:var(--wp--preset--spacing--20);margin-left:0">Galeria Fotografii</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","className":"hostinger-ai-description","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|light"}}}},"textColor":"light","fontSize":"medium"} -->
<p class="has-text-align-center hostinger-ai-description has-light-color has-text-color has-link-color has-medium-font-size" style="margin-top:0;margin-bottom:0">Odkryj nasze wyj?tkowe obrazy i produkty fotograficzne w minimalistycznym stylu.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:metaslider/slider {"slideshowId":732} -->
<div class="alignnormal">[metaslider id="732"]</div>
<!-- /wp:metaslider/slider -->
<!-- wp:group {"className":"hostinger-ai-fade-up","layout":{"type":"constrained"}} -->
<div class="wp-block-group hostinger-ai-fade-up"><!-- wp:group {"align":"full","className":"alignwide hostinger-ai-fade-up","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group alignfull alignwide hostinger-ai-fade-up"><!-- wp:image {"id":503,"sizeSlug":"full","linkDestination":"none","className":"hostinger-ai-image hostinger-index-2","style":{"border":{"radius":"8px"}}} -->
<figure class="wp-block-image size-full has-custom-border hostinger-ai-image hostinger-index-2"><img src="https://images.unsplash.com/photo-1647884440187-574c6c77c7e7?q=85&w=800&h=400&fit=crop" alt="" class="wp-image-503" style="border-radius:8px"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":504,"sizeSlug":"full","linkDestination":"none","className":"hostinger-ai-image hostinger-index-3","style":{"border":{"radius":"8px"}}} -->
<figure class="wp-block-image size-full has-custom-border hostinger-ai-image hostinger-index-3"><img src="https://images.unsplash.com/photo-1609814634675-51ff11599922?q=85&w=300&h=400&fit=crop" alt="" class="wp-image-504" style="border-radius:8px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:group {"align":"full","className":"alignwide hostinger-ai-fade-up","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group alignfull alignwide hostinger-ai-fade-up" style="margin-bottom:var(--wp--preset--spacing--20)"><!-- wp:image {"id":504,"sizeSlug":"full","linkDestination":"none","className":"hostinger-ai-image","style":{"border":{"radius":"8px"}}} -->
<figure class="wp-block-image size-full has-custom-border hostinger-ai-image"><img src="https://images.unsplash.com/photo-1593421986221-661584df8820?q=85&w=300&h=400&fit=crop" alt="" class="wp-image-504" style="border-radius:8px"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":503,"sizeSlug":"full","linkDestination":"none","className":"hostinger-ai-image hostinger-index-1","style":{"border":{"radius":"8px"}}} -->
<figure class="wp-block-image size-full has-custom-border hostinger-ai-image hostinger-index-1"><img src="https://images.unsplash.com/photo-1692726502700-1f98e3bbe784?q=85&w=800&h=400&fit=crop" alt="" class="wp-image-503" style="border-radius:8px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"align":"full","className":"hostinger-ai-resume-1 hostinger-ai-fade-up","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull hostinger-ai-resume-1 hostinger-ai-fade-up"><!-- wp:group {"align":"wide","className":"hostinger-ai-fade-up","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"grid","columnCount":2,"minimumColumnWidth":null}} -->
<div class="wp-block-group alignwide hostinger-ai-fade-up" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:group {"className":"hostinger-ai-fade-up","layout":{"type":"constrained"}} -->
<div class="wp-block-group hostinger-ai-fade-up"><!-- wp:image {"id":18,"sizeSlug":"full","linkDestination":"none","className":"hostinger-ai-image","style":{"border":{"radius":"8px"}}} -->
<figure class="wp-block-image size-full has-custom-border hostinger-ai-image"><img src="https://images.unsplash.com/photo-1601490702107-f101b2eaaf87?q=85&w=584&h=650&fit=crop" alt="" class="wp-image-18" style="border-radius:8px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"hostinger-ai-fade-up","style":{"spacing":{"blockGap":"0px","padding":{"right":"var:preset|spacing|60","left":"var:preset|spacing|60"}},"layout":{"columnSpan":1,"rowSpan":1}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"left","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group hostinger-ai-fade-up" style="padding-right:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)"><!-- wp:heading {"className":"hostinger-ai-title","style":{"elements":{"link":{"color":{"text":"var:preset|color|dark"}}},"spacing":{"margin":{"bottom":"var:preset|spacing|20"}}},"textColor":"dark","fontSize":"x-large"} -->
<h2 class="wp-block-heading hostinger-ai-title has-dark-color has-text-color has-link-color has-x-large-font-size" style="margin-bottom:var(--wp--preset--spacing--20)">Moje zdj?cia</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"hostinger-ai-description","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|70"}},"elements":{"link":{"color":{"text":"var:preset|color|dark"}}}},"textColor":"dark","fontSize":"medium"} -->
<p class="hostinger-ai-description has-dark-color has-text-color has-link-color has-medium-font-size" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--70)">Oferuj? szeroki wybór produktów fotograficznych, w tym obrazy, kalendarze oraz kursy online, które odzwierciedlaj? moj? pasj? do fotografii krajobrazowej.</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"className":"hostinger-ai-title hostinger-index-1","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}},"fontSize":"x-large"} -->
<h2 class="wp-block-heading hostinger-ai-title hostinger-index-1 has-x-large-font-size" style="margin-bottom:var(--wp--preset--spacing--30)">Portfolio</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"hostinger-ai-subtitle hostinger-index-1 hostinger-ai-font-bold"} -->
<p class="hostinger-ai-subtitle hostinger-index-1 hostinger-ai-font-bold">Zobacz moje prace</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"hostinger-ai-description hostinger-index-1","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|50"}}}} -->
<p class="hostinger-ai-description hostinger-index-1" style="margin-bottom:var(--wp--preset--spacing--50)">Przegl?daj moje najlepsze zdj?cia i projekty, które pokazuj? moj? wizj?.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"hostinger-ai-subtitle hostinger-index-2 hostinger-ai-font-bold"} -->
<p class="hostinger-ai-subtitle hostinger-index-2 hostinger-ai-font-bold">Us?ugi</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"hostinger-ai-subtitle hostinger-index-2"} -->
<p class="hostinger-ai-subtitle hostinger-index-2">Us?ugi</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"align":"full","className":"hostinger-ai-customer-reviews-2 hostinger-ai-fade-up","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"backgroundColor":"color2","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull hostinger-ai-customer-reviews-2 hostinger-ai-fade-up has-color-2-background-color has-background" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:columns {"className":"alignfull"} -->
<div class="wp-block-columns is-not-stacked-on-mobile alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":715,"width":"412px","height":"auto","sizeSlug":"full","linkDestination":"none","align":"center","className":"hostinger-ai-testimonial-image hostinger-index-2","style":{"border":{"radius":"8px"}}} -->
<figure class="wp-block-image aligncenter size-full is-resized has-custom-border hostinger-ai-testimonial-image hostinger-index-2"><img src="https://images.unsplash.com/photo-1640738960969-c50af172f4a1?q=85&w=400&h=450&fit=crop" alt="" class="wp-image-715" style="border-radius:8px;width:412px;height:auto"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"className":"hostinger-ai-fade-up","style":{"spacing":{"blockGap":"0px","padding":{"right":"0","left":"0"}},"layout":{"columnSpan":1,"rowSpan":1}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"left","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group hostinger-ai-fade-up" style="padding-right:0;padding-left:0"><!-- wp:paragraph {"className":"hostinger-ai-subtitle","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|20"}},"elements":{"link":{"color":{"text":"var:preset|color|light"}}}},"textColor":"light","fontSize":"medium"} -->
<p class="hostinger-ai-subtitle has-light-color has-text-color has-link-color has-medium-font-size" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--20)">Opinie klientów</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"hostinger-ai-testimonial-text hostinger-ai-font-bold hostinger-index-2","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|50"}},"elements":{"link":{"color":{"text":"var:preset|color|light"}}},"typography":{"fontSize":"21px"}},"textColor":"light"} -->
<p class="hostinger-ai-testimonial-text hostinger-ai-font-bold hostinger-index-2 has-light-color has-text-color has-link-color" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--50);font-size:21px">”Korzysta?em z us?ug Adam Gieraltowski Photography i jestem zachwycony jako?ci? zdj?? oraz profesjonalizmem. Zdecydowanie polecam ka?demu, kto szuka wyj?tkowych produktów.”</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
I’ve tried modifying CSS, such as increasing max-width
and adjusting display: flex
, but the changes don’t seem to have the desired effect. Any suggestions on how I can expand the available space for the gallery and improve image scaling?
Thanks in advance for your help!
]]>With the 6.3.2 WordPress update the <picture> tag inline styling is not being added to the <img> tag. Can we have the functionality that worked on 6.3.1 updated to work with 6.3.2?
]]>Can you help me figure out what I’m doing wrong and how to fix it…please.
I love this theme and am creating our home page to be virtually identical to your example so I sure don’t want to have to start over!!
Thanks for any help or suggestions you can offer,
Linda
]]>When I checked with the developer who built my site they said I will need to source images of a certain size. But that’s not always possible as my images come from people who are interviewed or from organizations. Asking them to submit an exact size is difficult. How can I tackle this issue from my end and ensure my site has evenly sized images across all posts?
I tried the option within WP (Large, Small etc.) but they don’t always work as they all resize to different image sizes ultimately.
Any advice would be very helpful as I’ve been stressing out on this for a while
The blog I need help with is: www.myndstories.com
]]>I’ve been trying to adjust the size of the images on my homepage. I believe doing this would help out on performance on both desktop and mobile, and would also make the page look better. However, the only default size that looks acceptable is the one that I’m using now which is the medium option. What can I do to get smaller images?
Also, when I use the custom option and use 200×307 px which is what I’ve seen on Book Riot and other book blogs, the text gets cut off.
]]>Now, we have an image that’s 4000px wide. We’d like for it to be displayed responsively across all display sizes and Elementor makes it pretty easy to set the height for different screen sizes (we have set the height of desktop image to be height: 90vh and for the mobile devices height: 57vh). We ensure correct image sizing by setting up an object-fit property to cover. (You can see it on the website)
Is there a way to configure this within the plugin image? I can see that whenever I resize the viewport the image is kind of reloaded with new dimensions? My custom styles I set in developer tools get erased during that process.
Thank you.
]]>If I insert the image into a post using Classic editor at full size, the images are their actual full size at 1200 pixels wide. However, if insert the same photo into a post using Block editor at full size, the image is only 924 pixels wide.
It appears that this only is affecting my horizontal images. My vertical images are displaying at 1200 pixels wide. Any idea on how I can solve or fix this?
]]>i.e. if i have a image of size 4000×4000 and have registered a image size 1920×1080 with minimum turned on the result will be a an image version with size 1920×1920
I think this would be really useful for heros or images that maybe responsive but you know it won’t go above a certain size and will be set to object-fit cover or background cover
]]>I am working on optimizing a new theme and using JEtpack to automatically resize my photos, and I have the one issue I’m noticing that on my homepage, if you look at the “photo gallery” section, the photos in there are not being loaded at the correct resolution and are loading the full size, even though the css says width: 1170px.
I did notice the parent div is 17550px which may be causing the issue, but I’m not sure why it would be looking at the parent div to get the size anyways.
<div style="background-image: url("https://i2.wp.com/www.redroll.com/wp-content/uploads/2019/12/Zeds-Dead-Photo-26-scaled.jpg?fit=2560%2C1730&ssl=1"); width: 1170px; position: relative; left: 0px; top: 0px; z-index: 998; opacity: 0; transition: opacity 500ms ease 0s;" class="slide slide-id-18093 tie-slide-1 tie-thumb slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" data-aria-describedby="slick-slide20">
<a href="https://www.redroll.com/2019/12/23/deadbeats-tour-zeds-dead-aragon-ballroom/" class="all-over-thumb-link" aria-label="Deadbeats Tour: Zeds Dead @ Aragon Ballroom" tabindex="-1"></a>
<div class="thumb-overlay">
<span class="tie-icon tie-media-icon"></span>
<div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-4" href="https://www.redroll.com/category/editorials/" tabindex="-1">Editorials</a></span><div class="thumb-content"><div class="thumb-meta"><span class="date meta-item tie-icon">December 23, 2019</span></div>
<h2 class="thumb-title"><a href="https://www.redroll.com/2019/12/23/deadbeats-tour-zeds-dead-aragon-ballroom/" tabindex="-1">Deadbeats Tour: Zeds Dead @ Aragon Ballroom</a></h2>
</div> <!-- .thumb-content /--></div><!-- .container -->
</div><!-- .thumb-overlay /-->
</div>
]]>