HubL: How to set image field params on custom_widget

jakeb — Tue, 06 Feb 2018 01:59:58 GMT

Let's say I have a custom module named "Test Module" defined with the following fields:

headline - text type field
body - text type field
url - text type field
image - image type field

I am inserting this module into my custom HTML template via the {% custom_widget %} HubL tag. I want to set some defaults, so I pass the paramaters into the custom_widget tag. Here is the code:

{% custom_widget "test_module" label="Test Module", widget_name="Test Module", show=True, headline="Lorem ipsum", copy="Foo bar.", url="http://www.example.com", no_wrapper=True %}

This works great, except I want to set the image as well. Now, I know I can set the default values in COS, but I want to set them at the template-level as this custom module will be used in different templates and the image will change. The problem is that it isn't clear how to set this, and I can't find any documentation about it anywhere.

Image fields appear to be dict type variables with the following properties:

src - image source URL
width - image width
height - image height
alt - image alternate text

Unfortunately the following code doesn't seem to work:

{% set my_image = {'width': 100, 'height': 100, 'src': 'http://example.com/image.jpg', 'alt': "Alt text."} %}
{% custom_widget "test_module" label="Test Module", widget_name="Test Module", show=True, headline="Lorem ipsum", copy="Foo bar.", url="http://www.example.com", image=my_image, no_wrapper=True %}

Even passing the my_image dict inline doesn't work either.

I'm unsure what to do here. Help?

Re: HubL: How to set image field params on custom_widget

jakeb — Tue, 06 Feb 2018 02:06:01 GMT

...and moments later, I just figured it out!

Image paramaters are passed with underscores between the name of the image field (e.g. "image") and the name of the sub-property (e.g. "src", "width", etc). Here's what these parameters look like:

image_src="http://example.com/test.jpg",
image_width=100,
image_height=100,
image_alt="Alt text."

And here's the final snippet (tabbed for readability):

{% custom_widget "test_module"
    label="Test Module",
    widget_name="Test Module",
    show=True,
    headline="Lorem ipsum",
    copy="Foo bar.",
    url="http://www.example.com",
    image_src="http://example.com/test.jpg",
    image_width=100,
    image_height=100,
    image_alt="Alt text.",
    no_wrapper=True %}

topic Re: HubL: How to set image field params on custom_widget in CMS Development

HubL: How to set image field params on custom_widget

Re: HubL: How to set image field params on custom_widget