Images Linking with Local Files

support
1

Hi,

I’ve been working on markdown layout where there are four images A, B, C, and D and I would like to add links to them such that A is directed to a.md under folder A and so on.

Here are the details:

  1. File structure
- index.md
- A
  - a.md
- B
  - b.md
...
  1. Layout. Four images, better with captions for each of them, better positioned at center of the page.
    image
    image1310×1272 15.2 KB
  2. Linking
    Clicking A can direct to a.md; Clicking B can direct to b.md…

Could someone give some tips how to achieve such effect?

2

This is a common construct.

content structure 
content/
├── products/
│   ├── product-1/
│   │   ├── cover.jpg
│   │   └── index.md
│   ├── product-2/
│   │   ├── cover.jpg
│   │   └── index.md
│   ├── product-3/
│   │   ├── cover.jpg
│   │   └── index.md
│   ├── product-4/
│   │   ├── cover.jpg
│   │   └── index.md
│   └── _index.md
└── _index.md

layouts/products/list.html 
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ with .Pages.ByTitle }}
    <div class="grid">
      {{ range $p := . }}
        {{ with .Resources.GetMatch "cover.*" }}
          {{ with .Fill "250x250 webp" }}
            <div class="grid-item">
              <figure>
                <a href="{{ $p.RelPermalink }}">
                  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
                </a>
                <figcaption>{{ $p.Title }}</figcaption>
              </figure>
            </div>
          {{ end }}
        {{ end }}
      {{ end }}
    </div>
  {{ end }}
{{ end }}

4

Hi Joe,

Thank you for the response. Just I’m not very familiar with Hugo and I wonder if you mind sharing more details, like what to specify in both _index.md as I just tried creating blank files but it does not work.

5

Here’s a simple example:

git clone --single-branch -b hugo-forum-topic-44744 https://github.com/jmooring/hugo-testing hugo-forum-topic-44744
cd hugo-forum-topic-44744
hugo server
6

Now I understand.

Thank you!

7

So sorry for getting back to this thread as I didn’t realize the problem was actually due to the theme I’m using and the problem is still there.

I thought I had done wrongly before but now I find it should be about the theme configuration. Would you mind looking into this via Ros Ark / Layout · GitLab?

8

Assuming you are using an unmodified copy of the current version of the LoveIt theme, your photography list template should look something like…

layouts/photography/list.html 
{{- define "title" }}
    {{- .Params.Title | default (T .Section) | default .Section | dict "Some" | T "allSome" }} - {{ .Site.Title -}}
{{- end -}}

{{ define "content" }}

  <h2 class="single-title animate__animated animate__pulse animate__faster">
    {{- .Params.Title | default (T .Section) | default .Section | dict "Some" | T "allSome" -}}
  </h2>

  {{ .Content }}

  {{ with .Pages.ByTitle }}
    <div class="grid">
      {{ range $p := . }}
        {{ with .Resources.GetMatch "cover.*" }}
          {{ with .Fill "250x250 webp" }}
            <div class="grid-item">
              <figure>
                <a href="{{ $p.RelPermalink }}">
                  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
                </a>
                <figcaption>{{ $p.Title }}</figcaption>
              </figure>
            </div>
          {{ end }}
        {{ end }}
      {{ end }}
    </div>
  {{ end }}

{{ end }}

In the theme’s baseof.html template, you can see that the block is named “content” not “main”.

Please contact the theme author for additional assistance with the LoveIt theme.

9

Thank you so much for you great help!