Image width increases when there are captions

  • Prior to blocksy, I did everything with the classic editor. After migrating everything over, it turns out that the photos with captions on it have a much wider width and seems to “stretch” past the content container, overlapping into the sidebar. On mobile, it is even worse as you can’t even see the whole picture.

    If I look at the code editor for photos without captions, they look something like this
    <a href="https://staging2.johnnyafrica.com/wp-content/uploads/2020/11/pa028989.jpg"><img class="aligncenter size-full wp-image-41974" src="https://staging2.johnnyafrica.com/wp-content/uploads/2020/11/pa028989.jpg" alt="Positano beautiful view italy amalfi coast" width="1024" height="768"></a>

    With a caption, they look like this

    [caption id="attachment_41909" align="aligncenter" width="1024"]<a href="https://staging2.johnnyafrica.com/wp-content/uploads/2020/11/pa018919.jpg"><img class="size-full wp-image-41909" src="https://staging2.johnnyafrica.com/wp-content/uploads/2020/11/pa018919.jpg" alt="Capri Villa Lysis" width="1024" height="768"></a> Villa Lysis in Capri[/caption]

    If I remove the “width = “1024” from the caption code, it just removes the captions straight up (but the width of the photo is back to normal).

    Similarly, if i convert everything to blocks, the new code for the phtoo with captions becomes this

    <!-- wp:image {"align":"center","id":41909} -->
<figure class="wp-block-image aligncenter"><a href="https://staging2.johnnyafrica.com/wp-content/uploads/2020/11/pa018919.jpg"><img src="https://staging2.johnnyafrica.com/wp-content/uploads/2020/11/pa018919.jpg" alt="Capri Villa Lysis" class="wp-image-41909"/></a><figcaption>Villa Lysis in Capri</figcaption></figure>
<!-- /wp:image -->

    This actually fixes the problem with the width but I really want to stay using the classic editor.

    Is there a way to fix this holistically? I have like 500 posts and I don’t want to go through every post to manually fix this as there are so many photos.

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

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hello @jcnyc

    Blocksy has been built with full compatibility for the Gutenberg editor, as that’s how WordPress is set to evolve. The classic editor might be dropped at any time by the WordPress developers, as it is old technology and it wouldn’t be feasible to build a lot of bug fixes and then have them drop the editor and make our work void.

    Our recommendation would be to switch to the new editor, as everyone has already jumped on the bandwagon developing for it.

    In your case, there might be this little CSS snippet that fixes things, but as long as the WordPress developers make changes to the editor flow and embracing Gutenberg more, it might stop working at any point in time.

    It goes something like this —

    figure {
  width: 100% important;
  max-width: 100% important;
}

    Hope this helps.

    Thanks.

    Thread Starter JohnnyAfrica

    (@jcnyc)

    Hi thanks, good to know but I think I will use classic editor to the very end ??

    I added this code but it diddn’t seem to change anything? I just added it to Blocksy options > Core > Additional CSS

    Hi @jcnyc

    The code actually works, but it seems that something has also added an inline style to these images, which override the CSS that I gave you — https://ibb.co/Gc7xmpL. Without removing the inline styles, there’s no other way to make this work.

    I’m really sorry, but that’s how things go. Blocksy is a Gutenberg theme and using the old classic editor will yield you discrepancies like this. ??

    Thread Starter JohnnyAfrica

    (@jcnyc)

    Thanks again. I think i will just power through all 500 of the posts and convert them to blocks. Gutenberg’s definitely come a long way since it first was released and seems much more user friendly now.

    Hi @jcnyc

    Sorry man, but that’s how things are. We have to embrace new technologies as things change. This ensures that we deliver a smooth experience to our users. ??

    I know its a pain to go through each of the posts, but it’s for the better in the end.

    Thank you.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Image width increases when there are captions’ is closed to new replies.