Adding and "alt" image to a +Product Recommendation

Developer help
1

And

  • How was Ghost installed and configured? Using Ghost.io and I’m using a Custom Theme Reco v5.0.0
  • What Node version, database, OS & browser are you using? Latest version of Chrome
  • What errors or information do you see in the console? SEMRush site evaluation showing “No Alt Description” errors on my product pictures.
  • What steps could someone else take to reproduce the issue you’re having? Simply add an image through a +Product insert.

Wondering if it would be possible for you to also add an “alt=” to either the pop-up box that is associated with the +Product for the image that is inserted. Or allow the “Description” value to also be the “alt=” value.
Thanks in advance!
-Rich

4 Likes
2

I second this. I was surprised to learn that when I use /product that I cannot add the alt tag for the image. Please consider adding this functionality - it is an option on most other blogging platforms for all images.

1 Like
3

I third this!

If you could add this functionality, I’d really appreciate it!

Regards,
Johanna.

4

Till the time this feature ships, you can add the below code in your “Site Footer” using “Code Injection” in Ghost settings.

<script>
    const divs = document.querySelectorAll('.kg-product-card-container');
    for (const div of divs) {
      const images = div.querySelectorAll('img');
      const titles = div.querySelectorAll('h4');
      for (var i = 0; i < images.length; i++) {
        images[i].alt = titles[i].textContent;
      }
    }
</script>

This seems to do the trick in a simple way. Please note that this can be further optimized but why over engineer when the feature will roll out soon.

This code assumes that all Product cards have an image and a title.

1 Like