Image block, Polaroid Frame

This thread is resolved. Here is a description of the problem and solution.

Problem: I am using the polaroid frame option for a Toolset Image Block. I have aligned the image to the right side using the blocks alignment features, and chosen a medium size image so it "floats" to the right of some content in the block editor. With the Kadence theme active, the frame background behind the image is too wide - it extends the full width of its parent container element, when it should be just a little bit wider than the image itself.

Solution: As a workaround, you can try adding the following custom CSS:

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

This support ticket is created 3 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Toolset Blocks

This topic contains 6 replies, has 2 voices.

Last updated by jillT 3 years, 1 month ago.

Assisted by: Christian Cox.

Author

Posts

September 19, 2021 at 5:41 pm #2173411

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.

September 20, 2021 at 2:29 am #2173619

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.

September 20, 2021 at 1:18 pm #2174005

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.

September 20, 2021 at 2:53 pm #2174103

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.

September 20, 2021 at 3:25 pm #2174121

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

September 20, 2021 at 6:01 pm #2174229

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.

September 21, 2021 at 8:56 am #2174857

jillT

My issue is resolved now. Thank you!