2023 Theme, Image size display as full width when set to medium size

  • Unknown's avatar
    philhuhn · Member ·

    I have set the size of the image block to medium (300px) and is displayed in the editor appropriately but displayed as full width of 1000px.

    <div class="wp-block-group has-global-padding is-layout-constrained wp-container-13 wp-block-group-is-layout-constrained">
<figure class="wp-block-image alignleft size-medium">
<img decoding="async" width="996" height="996" data-attachment-id="59" data-permalink="https://-website-.wordpress.com/hyperactivation/" data-orig-file="https://-website-.files.wordpress.com/2020/12/hyperactivation.jpg" data-orig-size="996,996" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="hyperactivation" data-image-description="" data-image-caption="" data-medium-file="https://-website-.files.wordpress.com/2020/12/hyperactivation.jpg?w=300" data-large-file="https://-website-.files.wordpress.com/2020/12/hyperactivation.jpg?w=996" src="https://-website-.files.wordpress.com/2020/12/hyperactivation.jpg?w=300" alt="" class="wp-image-59" srcset="https://-website-.files.wordpress.com/2020/12/hyperactivation.jpg?w=300 300w, https://-website-.files.wordpress.com/2020/12/hyperactivation.jpg?w=600 600w, https://-website-.files.wordpress.com/2020/12/hyperactivation.jpg?w=150 150w" sizes="(max-width: 300px) 100vw, 300px">
</figure>
</div>

    This is actually for another WordPress.com site: https://kaganlab.wordpress.com/

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    philhuhn · Member ·

    I tried applying medium size on an image in a post on 2023 theme on my local laptop with 6.2.2 version of WordPress and it worked as expected, and not as I’m experiencing on WordPress.com.

  • Unknown's avatar
    philhuhn · Member ·

    I tried the same scenario on a different WordPress.com site and had the same problem.

    https://friendsofthewoods.wordpress.com/2023/07/02/canadian-geese-2/

  • staff-totoro · Staff ·

    Hi there,

    Can you tell us a little more about what you mean (the steps you are taking) when you are applying medium size on an image so we can try to retrace your steps?

    The reason I ask is because I created a test page on your site and copied your image block over to the test page, and it had the same issue. Then I added the same image below it (a second time) and for me the image scale was correct.

    I recorded myself doing this, so please take a look at the video linked here and compare how I am adding the image to how you usually add it. What are you doing differently, can you walk us through it? Are you somehow editing the image URL to add a width parameter that way? Thanks for the additional info!

  • Unknown's avatar
    kbahleda · Member ·

    Insert a block (+)
    Type /im
    Select Image block
    Click Select Image
    Select Image Library
    Select the image and click Insert
    On the Block sidebar scroll down to RESOLUTION and select Medium
    Click the Update button in the upper right

    … the image displays full width

  • Unknown's avatar
    kbahleda · Member ·

    Hey:

    Again, I note that I have a non WordPress.com 2023 theme installed an instance on my laptop that displays as I expected when I perform the above steps. My translation is something is different in your implementation.

    I also, noted that in your video that the 300px image display over part of the footer, which is also not desirable.

  • staff-totoro · Staff ·

    Hi again,

    In my testing I was able to replicate your issue, thank you for the clear steps. The resolution setting is a recent addition to the interface, so I’m going to have our developers take a closer look. Based on what I can see this issue may be theme-specific since in my tests the image is the correct size on other themes. Before I report this issue I have a question about this:

    Again, I note that I have a non WordPress.com 2023 theme installed an instance on my laptop that displays as I expected when I perform the above steps.

    I’m not sure what you meant by “installed an instance” can you clarify? You are working on a different site and not seeing this issue? If so what is the URL of the site so we can take a closer look and see if it offers any clues.

    I also, noted that in your video that the 300px image display over part of the footer, which is also not desirable.

    This is likely not a related issue. My test page had no text or other content (and only two images) so I suspect that the footer was showing up due to that reason. Normally it would be further down and something you would need to scroll to see.

    Thanks for the additional info!

  • Unknown's avatar
    kbahleda · Member ·

    Hey;

    Instance is a term used a lot in databases. Therefore to rewrite the comment:

    Again, I note that I have a non WordPress.com 2023 theme installed on WordPress on my laptop that displays as I expected when I perform the above steps.

    The URL is localhost and is not publicly accessible.

    Per the footer… I’m not saying it is related to the initial problem. I’m saying it is an additional issue. One should take every opportunity to see and note issues and add it to a list of things to fix.

  • The topic ‘2023 Theme, Image size display as full width when set to medium size’ is closed to new replies.