SOLVED: urlEncode or Sanitize dynamic content at picture sources

JoseA · February 19, 2025, 9:44pm

Bricks Version: 1.12.1

Browser: Chrome 110
OS: Windows
URL: Link to a page that illustrates this issue

Please check picture with class “brxe-groxvf brxe-image fb-text-center__foto-right tag” at source code.

<picture class="brxe-groxvf brxe-image fb-text-center__foto-right tag">
<source media="(max-width: 478px)" srcset="https://www.ertheo.com/wp-content/uploads/Programas/marcet_visita_2017/Pla Marcet (60)-300x300.jpg" type="image/jpeg">
<source media="(max-width: 767px)" srcset="https://www.ertheo.com/wp-content/uploads/Programas/marcet_visita_2017/Pla Marcet (60)-scaled-550x400.jpg" type="image/jpeg">
<source media="(max-width: 991px)" srcset="https://www.ertheo.com/wp-content/uploads/Programas/marcet_visita_2017/Pla Marcet (60)-scaled-600x600.jpg" type="image/jpeg">
<source srcset="https://www.ertheo.com/wp-content/uploads/Programas/marcet_visita_2017/Pla Marcet (60)-scaled-970x560.jpg" type="image/jpeg">
<img width="600" height="600" src="https://www.ertheo.com/wp-content/uploads/Programas/marcet_visita_2017/Pla Marcet (60)-scaled-600x600.jpg" class="css-filter size-bricks_medium_square" alt="Barcelona - balón parado" decoding="async" data-type="string" sizes="(max-width: 600px) 100vw, 600px" srcset="https://www.ertheo.com/wp-content/uploads/Programas/marcet_visita_2017/Pla%20Marcet%20(60)-scaled-600x600.jpg 600w, https://www.ertheo.com/wp-content/uploads/Programas/marcet_visita_2017/Pla%20Marcet%20(60)-150x150.jpg 150w, https://www.ertheo.com/wp-content/uploads/Programas/marcet_visita_2017/Pla%20Marcet%20(60)-scaled-1200x1200.jpg 1200w, https://www.ertheo.com/wp-content/uploads/Programas/marcet_visita_2017/Pla%20Marcet%20(60)-300x300.jpg 300w, https://www.ertheo.com/wp-content/uploads/Programas/marcet_visita_2017/Pla%20Marcet%20(60)-100x100.jpg 100w"></picture>

My idea is have an small fallback image, same as smallest phone (thumbnail 300x300). But I changed it to “Bricks Medium Square 600x600” while problem is solved. It was showing at Chrome the small fallback image.

If you open Chrome Developer Tools and inspect it, you can see the source URLs are not correctly recognized.

I can create a custom function and use {echo} to filter it, but i think this is a Bug, because same ACF field is well rendered when used at main image URL.

Matej · February 20, 2025, 8:58am

Hey @JoseA,

first, welcome to the community!

Can you create a screenshot of your Image settings (especially sources), because I think I don’t understand what exactly is the issue?

Tanks,
Matej

JoseA · February 20, 2025, 9:38am

Hi,
thanks for reply.

ACF repeater field at source. Chrome uses fallback image, cause sources URLs are malformed. It do not replace spaces by %20.

Matej · February 20, 2025, 12:33pm

Thank you. Hmm, I still can’t reproduce it. In my case, it’s always the correct file name (even if I upload it with spaces, it adds dashes instead)

Can I ask how did you upload the image, and what kind of ACF field it is? Can you make a screenshot of the input data?

Thanks.
Matej

JoseA · February 20, 2025, 5:21pm

My page is a migration from an old Drupal.
All the media was migrated at server level. I used Media Sync plugin to add the files to media.

The image giving problems was first uploaded at 2016 or 2017. We have our images indexed at Google Images. We just made a 301 from old folder to new upload folder at WP, but we keept the old names.

Using Chrome Developer Tools I can see img src and srcset added by Bricks are recognized by Developer Tools but the url at source is not recognized. This gave me the idea: picture ‘source’ has not applied same filters than srcset (added and calculated by Bricks too).

You already filter the srcset, please consider apply same criteria at sources.

Matej · February 21, 2025, 11:55am

Hi @JoseA,

thank you. I was able to reproduce the issue locally and I’ve added it to the internal bug tracker. So, for a workaround, you can create a custom function, that will replace space with %20, and call this one using echo tag.

I also found a quick fix inside Bricks, but that would require changing the Bricks theme file, which would get overridden by the next update. And it’s definitely not tested at all yet.

Best regards,
Matej

timmse · March 6, 2025, 9:43am

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

Changelog: Bricks 1.12.3 Changelog – Bricks

Please let us know if you are still experiencing issues.

Best regards,
timmse