Strip Image Height and Width from source variable

Develop, Build & Integrate CMS Development
1

Hello,

I am trying to strip the height and width from the returned source variable from an image in a module.

I am using an Image Field in a custom module and it’s called “image”. Here, I am returning the image source and, if they have selected to open in a modal window, it adds “fancybox” to trigger the fancybox modal.

The issue is, if the user selects a custom size image, the width and height are appended to the url per the Hubspot standards. Example image source:

https://www.inpixon.com/hs-fs/hubfs/website_graphics/diagrams/how-rtls-tags-work-diagram.png?width=300&height=130&name=how-rtls-tags-work-diagram.png

Now, when this open in a modal window, Fancybox sees it as an image only 300px wide, whereas I want it to return the url without the width and height appended, or return the source url and be able to strip it so it looks like this:

https://www.inpixon.com/hs-fs/hubfs/website_graphics/diagrams/how-rtls-tags-work-diagram.png

Here is the module code:

<img {% if module.open_image_in_modal_window %}data-fancybox {% endif %}src="{{ module.image.src }}" alt="{{ module.image.alt }}" {{ sizeAttrs }}>

Thanks!

2

Hi @redbranchmedia ,
I suppose you need to remove the option from the field itself instead of trying to prevent this through HubL. You could use a filter to retrieve everything before the ?

{% set image_array = module.image.src|split('?') %}
{% set image_url = image_array[0] %}

But you could also decide to prevent setting an explicit width and height by setting resizable to false in the fields.json:

{
 "name" : "image",
 "label" : "Image",
 "sortable" : false,
 "required" : false,
 "locked" : false,
 "responsive" : false,
 "resizable" : false,
 "type" : "image",
 "default" : {}
}
3

Thank you! That worked great. I couldn’t prevent the explicit width and height settings because I didn’t want to increase load times by outputting all full-sized images on the page. And, the point of the fancybox modal was to allow the users to view the full-size images in a modal window if they wanted to. I used your code above to strip the url parameters and added a data-src attribute with the full-sized image url and now it works great. Thanks again.

4

Sounds like a great setup! Happy you got this working!