Making Images on Homepage Clickable - Bookworm

Using Themes
1

Hi Guys,

I am sorry if this question is too simple and I just can’t figure out a way to fix/implement this. I have some basic knowledge in HTML, CSS and JS. I am also familiar with GO, yet my head just can’t properly wrap around it. I appreciate all help. Anyway here is my question.

I am currently using the Bookworm theme on my Blog. My goal is to make the images that are displayed on the homepage (single.html) clickable and link them to the underlying article, this currently only works with the titles, which are displayed below the images. Currently the underlying code for the posts which are shown on the homepage is the following:

<div class="card-body">
   <ul class="card-meta list-inline mb-2">
     <li class="list-inline-item mb-2">
       {{ $author:= .Params.Author | urlize | lower}}
       {{ with site.GetPage $author }}
       {{ if .Params.image }}
       {{ $imagePath:= .Params.image }}
       {{ if (fileExists (add "assets/" $imagePath)) }}
       {{ $image:= resources.Get $imagePath }}
       {{ $imageXS:= $image.Fill "26x26" }}
       {{ .Scratch.Set "image" $imageXS.RelPermalink }}
       {{ else }}
       {{ .Scratch.Set "image" ($imagePath | absURL) }}
       {{ end }}
       <a href="{{.Permalink}}" class="card-meta-author">
         <img loading="lazy" src="{{.Scratch.Get `image`}}" alt="{{ .Title }}">
         <span>{{ .Params.name }}</span>
       </a>
       {{else if .Params.Email}}
       <a href="{{.Permalink}}" class="card-meta-author">
         <img loading="lazy" src="https://www.gravatar.com/avatar/{{ md5 .Params.email }}?s=26&pg&d=identicon">
         <span>{{ .Params.name }}</span>
       </a>
       {{ end }}
       {{ end }}
     </li>
     <li class="list-inline-item mb-2">
       <span>{{.PublishDate.Format "02/01/2006"}}</span>
     </li>
     <li class="list-inline-item mb-2">
       <ul class="card-meta-tag list-inline">
         {{range .Params.tags}}
         <li class="list-inline-item"><a href="{{site.BaseURL}}tags/{{.| urlize}}">{{.}}</a></li>
         {{end}}
       </ul>
     </li>
   </ul>
   <h3 class="mb-3">
     <a class="post-title" href="{{.Permalink}}">{{.Title}}</a>
   </h3>
   <p>{{ .Plain | truncate 150 }}</p>

   <a href="{{.Permalink}}" aria-label="Read Article">{{ i18n "read_article" }} <i class="fas fa-angle-right"></i></a>
 </div>
</article>

Thank you for your time reading this, I highly appreciate any help.

2

Please raise an issue with the theme author.