Twig hard coded image with link field conditional Drupal 10

If you need an Image hard code such as a social media icon, but only want to display when a certain link field is filled out.... Here's your twig code.

My link field is field.hudl.url replace it with your link field.

The twig:

<div id="social">
{% if content.field_hudl_link is not empty %}

<img src="https://sandyardbeachacademy.com/sites/default/files/default_images/Hudl...">
<a class="hudl_link" href="{{ content.field_hudl_url.0['#url'] }}">
{% endif %}
</div>

 

The css:

#social {
  position: relative;
}
  a.hudl_link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

That's it. :)

Blog Type: