CMS Development

noahb
Member

Add link field for image in module with rich text and image

 

I have a little basic coding knowledge. I'd like to make it so there is a link field for the image in the module below. I've tried adding a new field called "Image URL" and inputting this line of code 

 <a href="{{ widget.image_url }}">

It doesn't work. Any thoughts?

 

<div class="grid__item lap-and-up-four-twelfths portable-one-whole short">
    <div class="image-container equalize--1" style="background: url('{% if widget.image.src %} {{ widget.image.src }} {% endif %}') center center/cover no-repeat;">
        {% if widget.image.src %}
          <img src="{{ widget.image.src }}" width="100%" height="auto" alt="{{ widget.image.alt }}" style="opacity: 0; visibility: hidden;">     
        {% endif %}
    </div>
    {{ widget.content }}
    
</div>

Screen Shot 2020-02-12 at 5.19.25 PM.png

 

0 Upvotes
1 Reply 1
prosa
Top Contributor

Add link field for image in module with rich text and image

Hi there, what is the type you are using for the image_url variable? if that is a text field pasting the URL should work link this {{ module.link_field }}

 

but if you are adding a link type you need to do something like this

{{ module.link_field.url.href }}

since using {{ module.link_field }} is going to give you an object

{
   url={  
          type=EXTERNAL, 
           content_id=null, 
           href=https://www.pablo-rosa.com
         }, 
    open_in_new_tab=false, 
    no_follow=false
}

 

If this post helped you resolve your issue, please consider marking it as the solution. Thank you for supporting our HubSpot community.