SOLVED: Issue with Custom Breakpoints Not Generating <source> Tags in Picture Element

Bugs
1

Browser: Firefox 115.18.0esr
OS: macOS
OS: Latest( Version 6.7.1)
URL: Local
screenshot:

Description:
Hi everyone,

I’m encountering an issue with custom breakpoints in Bricks Builder when working with the “Image” element and responsive image sources.

Problem:

I’ve added an image for the desktop by default and then included two responsive sources:

  • 360px (a custom breakpoint)
  • 478px (a predefined breakpoint)

However, in the generated HTML, there’s no <source> tag for the custom breakpoint (360px). This causes the image for 478px to be displayed instead when viewing the page on devices with a width of 360px or smaller.

Here’s the HTML code that gets generated:

<picture id="brxe-ngpvzg" class="brxe-image clouds-images tag">
  <source media="(max-width: 478px)" srcset="https://icom2025.local/abada/wp-content/uploads/cloud3-478.png" type="image/png">
  <img src="https://icom2025.local/abada/wp-content/uploads/cloud3.png" class="css-filter size-full" alt="nuages" decoding="async" data-type="string" width="500" height="238">
</picture>

The <source> tag for (max-width: 360px) is missing, even though the breakpoint and image source are configured in the builder.

Tests Conducted:

  • With Predefined Breakpoints: Everything works as expected. The <source> tags are correctly generated for each breakpoint.
  • With Custom Breakpoints: The issue occurs only when using custom breakpoints, even though they are defined in the global settings.

Steps to Reproduce:

  1. Add a custom breakpoint (360px) in the Bricks Builder global settings.
  2. Use the “Image” element and set a default image.
  3. Add sources for the custom breakpoint (360px) and a predefined breakpoint (e.g., 478px).
  4. Check the generated HTML on the frontend.

Expected Behavior:

The <source> tag for the custom breakpoint (360px) should be generated as:

<source media="(max-width: 360px)" srcset="https://icom2025.local/abada/wp-content/uploads/cloud3-360.png" type="image/png">

Actual Behavior:

The <source> tag for the custom breakpoint is missing entirely, causing the fallback image for 478px to be displayed instead.

Questions:

  1. Is this a bug in how Bricks handles custom breakpoints in the “Image” element?
  2. Is there a workaround to force the <source> tag to be generated for custom breakpoints?

Thank you for your help!

2

Hello @Edison,

Thank you a lot for this very detailed report! I was able to replicate the issue, if the “key” of the custom breakpoint is only numbers, but if I name the breakpoint as “Mobile small”, then it works.

So, this will not work:

CleanShot 2024-12-24 at 10.46.02@2x
CleanShot 2024-12-24 at 10.46.02@2x1196×790 31.5 KB

But this one will:

CleanShot 2024-12-24 at 10.48.13@2x
CleanShot 2024-12-24 at 10.48.13@2x1156×652 28.2 KB

So, for the workaround, for now, I suggest naming your custom breakpoints with something different. And you can still rename it then to just “360”, just the key needs to be different.

Or use “Custom” option as a source.

I’ll create an internal bug report.

Thanks,
Matej

3

Hi Matej,

Thanks a lot for your help et reactivity.

How can I edit the “key” of an existing breakpoint, knowing that modifying the “label” does not affect it? Otherwise, if I create a new breakpoint, is there a way to copy the content from one breakpoint to another?

Thank you very much in advance!

4

Hi @Edison,

currently, there is no way to edit the key of the breakpoint or copy all content form one breakpoint to another. :frowning:

Probably best if you add a “custom” option for the source, and define the new image on some breakpoint there as a workaround.

Matej

5

Hi Edison,
We fixed this issue in Bricks 1.12.2, now available as a one-click update in your WordPress Dashboard.

Changelog: Bricks 1.12.2 Changelog – Bricks

Please let us know if you are still experiencing issues.

Best regards,
timmse