• Resolved seotaro

    (@seotaro)


    Hi there.

    I created a gallery block with two images with similar ratios but different sizes.

    1) 1875 X 2500
    2) 581 X 680

    In the Gutenberg preview, they are displayed as shown in the screenshot.

    But in the actual post, it looks completely different.

    Screenshot

    I tried changing the size of the images in the gallery, but that didn’t work.

    Can you tell me how I can make the image look like the preview?

    Thanks a lot.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hi @seotaro – to rule out plugin and theme conflicts, could you please go the following and let me know how it goes:

    • What version of WordPress are you using?
    • If you also have the standalone Gutenberg plugin active, what version is it?
    • Is the issue present with all your plugins temporarily deactivated? You can use the Health Check plugin‘s troubleshooting mode for this, which will not change your live site. If the problem goes away, reactivate your plugins one by one (while still in troubleshooting mode) to find the culprit.
    • Is the issue present with a default theme like Twenty Twenty? Again, you can use the Health Check plugin for this.
    • Is the issue present on a test page or post, with only this single gallery on it, and no other blocks?
    Thread Starter seotaro

    (@seotaro)

    Hi, Thank you for your answering.

    I did some additional testing with a different theme based on your answer and found that it works fine.

    And I removed the snippet below and it works fine!

    add_action ( 'wp_enqueue_scripts', function() { // Remove the CSS from the frontend. wp_dequeue_style ( 'wp-block-library' );<p _d-id="7112" style="box-sizing: border-box; border-width: 0px; border-color: currentcolor; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(0 125 178 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; margin-bottom: 0px; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Helvetica, Arial, sans-serif;"></p> // Remove the Gutenberg theme. wp_dequeue_style ( 'wp-block-library-theme' );<p _d-id="7115" style="box-sizing: border-box; border-width: 0px; border-color: currentcolor; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(0 125 178 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; margin-bottom: 0px; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Helvetica, Arial, sans-serif;"></p> // Remove inline global CSS from the frontend. wp_dequeue_style ( 'global-style' );}, 20 );<p _d-id="7119" style="box-sizing: border-box; border-width: 0px; border-color: currentcolor; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(0 125 178 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; margin-bottom: 0px; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Helvetica, Arial, sans-serif;"></p>function sertmedia_remove_dashicons_junk() { if ( ! is_user_logged_in() ) { wp_dequeue_style('dashicons'); }}add_action( 'wp_enqueue_scripts', 'sertmedia_remove_dashicons_junk' );

    Thanks for letting us know!

    Hi @seotaro thank you for providing more information after troubleshooting. If you have any questions please feel free to reach out to us

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Problems displaying images with similar ratios in a gallery block’ is closed to new replies.