I have a question about image links not working.

[gramirez]

I'm very new at HubSpot CMS and I have an intermediate experience level of HTML/CSS knowledge. Please see my attached screenshot. I'm having an issue with making my image links work.Need help making my image links work.. I see the url in the "link" box on the left sidebar, but they are not live on my website.
Here is a link to the page:
https://go.socialstudies.com/middle-storypath

[jieyintan]

Hi @gramirez 

It looks like there are no <a> tags around your images in your HTML, which is why your image links are not working.

For example, if we take a look at your custom module's code snippet: 

<div class="storypath-image">
      {% if item2.storypath_image.src %}
          <img src="{{ item2.storypath_image.src }}" alt="{{ item2.storypath_image.alt }}" width="{{ item2.storypath_image.width }}" height="{{ item2.storypath_image.height }}">
      {% endif %}
</div>

We can see that there are no <a> tags coded into your custom module!

To fix this, you can try adding <a> tags around your image in the HTML, and reference your Link input using the {{ item2.link }} HubL tag. Here's an example:

<div class="storypath-image">
     {% if item2.storypath_image.src %}
       <a href="{{ item2.link }}">
          <img src="{{ item2.storypath_image.src }}" alt="{{ item2.storypath_image.alt }}" width="{{ item2.storypath_image.width }}" height="{{ item2.storypath_image.height }}">
       </a>
     {% endif %}
</div>

This should do the trick, but do give it a go in your Design Tools and let me know if it works! 

You can also do the same for your image title. 🙂 

(You can find the custom module in your page's template)

[gramirez]

Thank you SO much! I'll give it a shot and let you know. I'm working from home after being at this job for only 3 weeks! I'm kinda nervous because there's no one else at the company that knows how to use HubSpot CMS for "developers". I may have more questions for you, I won't bombard you but it's nice to know if there's someone out there to help me (so I don't loose my job) that would be awesome!

Thanks again jieyintan!