[Résolu] Image block, Polaroid Frame

[Auteur]

Publications

[jillT]

Image in block, size 300x200
Block align right to allow other content blocks to flow around it.
Works perfectly until the polaroid frame is selected; then it takes up the whole width so other content blocks do not flow around it.

[Christian Cox]

Hello, I understand you're experiencing an issue where the Polaroid frame option in a Toolset Image block causes a layout problem. Once activated, the frame around the image contents stretches full-width instead. I set up a similar scenario in my local test environment but was unable to replicate the same layout issue with the Polaroid frame active, so there must be a significant difference in our sites or configurations. Please try these troubleshooting steps and let me know the results:
- Temporarily activate a default theme like Twenty Twenty One
- Temporarily deactivate any custom code snippets in Toolset > Settings > Custom Code
- Temporarily deactivate all 3rd-party plugins except Types and Blocks
- Test the problem again.
- If the problem is resolved, reactivate your theme, custom code snippets, and other third-party plugins, one by one, testing each time you activate a new component. Let me know if you are able to isolate a single component responsible for triggering the issue, or if a combination of plugins is required.
- If the problem is not resolved, I may need to take a closer look. Pleas provide login credentials in the private reply fields here.

[Christian Cox]

It appears that it's the Kadence theme causing the problem.
Okay let me check to see if I can replicate the problem when I have Kadence active in my similar scenario. Please stand by and I will give you another update shortly.

[Christian Cox]

Okay I was able to replicate this issue with Kadence active, and then I was able to add a custom CSS snippet to override the problem. In my local site I added this snippet to my child theme's styles.css file:

.wp-block-image .tb-image.tb-image-frame-polaroid {
    width: auto;
}

That seems to solve the problem where the polaroid frame extends to the full-width of its parent element. Please try this and let me know the results. It would be most helpful to be able to see the results on your site live so I can compare the styles in the browser, rather than using screenshots.

[jillT]

Thanks Christian.

It now floats left, however, although the caption correctly shows inside the frame in the admin side, it is outside on the front end.

The link to the actual page is: hidden link

[Christian Cox]

Okay I see, thanks for the update. I was not testing with a caption so I didn't notice that problem. It looks like the following additional CSS will encapsulate the caption as well in the polaroid frame. Please add this code just after the previous code I shared:

.wp-block-image .tb-image.tb-image-frame-polaroid figcaption {
   display: block;
}

The login you sent does not seem to have wp-admin access, so I wasn't able to fully test this out, but it does appear to solve the caption background issue when I add this code in the browser inspector.

[jillT]

My issue is resolved now. Thank you!