HubL: How to set image field params on custom_widget

SOLVE
Occasional Contributor

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?

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Occasional Contributor

...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 %}

 

Reply
0 Upvotes
1 Reply 1
Occasional Contributor

...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 %}

 

Reply
0 Upvotes