How to make summary block image for blog a clickable link? Wells template.

On 8/28/2023 at 2:42 PM, architectureshooting said:

how could i make the image clickable and linked to the corresponding blog entry?

Your screenshot shows a Blog List Page and so the main image of a post isn't linked.

If you're on a Business Plan or higher, some JavaScript can be written to pull the URL from each post title and then wrap a duplicate link around the main-image of the post. A simplified version (to add to the Footer Code Injection) might look something like this:

<script>
const articles = document.querySelectorAll('article');
articles.forEach(article => {
  const h1Link = article.querySelector('header h1.entry-title a');
  const mainImageDiv = article.querySelector('.main-image');
  if (h1Link && mainImageDiv) {
    const url = h1Link.href;
    const link = document.createElement('a');
    link.href = url;
    mainImageDiv.parentNode.insertBefore(link, mainImageDiv);
    link.appendChild(mainImageDiv);
  }
});
</script>

This script will find the blog posts (articles) on the page and then iterate through each article to grab the URL being used by the h1 link in each article's header. It will then wrap the main-image div within each article with a duplicate link using the same URL.  Like all code on the forum, this is just an example. It hasn't been extensively tested or designed to apply to lazy-loaded posts that might load later.

In this recording you'll see that each image is now linked, as shown by the link description (bottom-right) that appears when the pointer hovers over one of the images:

Did this help? Please give feedback by clicking an icon below  ⬇️