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?
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>
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>