Hubl Variable Question

[RastaMan]

This is a basic question, but I came across the following code in 'hero-banner.html' of the boilerplate theme and am unclear what 'context. ' is referring to in the OR conditional. It looks like 'context.image_alt' is a placeholder reference to a Hubl variable, correct? So just plug in your own variable assigned to image_alt in fields.json, right?

{% dnd_module
path='@hubspot/linked_image',
img={
'alt': context.image_alt || 'Stock placeholder image with grayscale geometrical mountain landscape', ...

[Indra · Accepted solution]

Hi @RastaMan,

The OR conditional is used if there is nog alt tag assigned. So it's the other way around and is used as a fallback.

So if context.image_alt is empty, set 'Stock placeholder image with grayscale geometrical mountain landscape'.

The OR or || is usefull in other ways if for example you create a custom module to create a card. So when the user has to set an title, description and image. the title and description fields are required, but the image is not. But to make your front-end more consistent it's nice to display a placeholder image. So then you will get something like this:

{# Set variable for card and add placeholder for image and image alt #}
{% set title = module.title %}
{% set description = module.description %}
{% set image_src=module.image.src || 'https://www.sample.com/images/placeholder.jpg' %}
{% set image_alt = module.image.alt || 'Example image' %}

{# Card element #}
<div class="card">
  <img src="{{ image_src }}" alt="{{ image_alt }}" />
  <h2 class="card__title">{{ title }}</h2>
  <div class="card__description">{{ title }}</div>
</div>

So instead of doing an if statement to check if your image exists it is set to make your HTML more readable.

{# Set variable for card and add placeholder for image and image alt #}
{% set title = module.title %}
{% set description = module.description %}
{% set image_src=module.image.src %}
{% set image_alt = module.image.alt %}

{# Card element #}
<div class="card">
  {% if image_src %}<img src="{{ image_src }}" alt="{{ image_alt }}" />
  {% else %}
  {% if image_src %}<img src="https://www.sample.com/images/placeholder.jpg" alt="Example image" />
  {% endif %}
  <h2 class="card__title">{{ title }}</h2>
  <div class="card__description">{{ title }}</div>
</div>

[RastaMan]

Hi @Indra , thank you for your response, it is quite helpful and answers my question completely.

-- RM