Get images from bundles in my categorie page

Using Themes
1

Hi,

This is my categories page

image
image1610×793 47.5 KB

All is ok, just there’s no images. I use one template where is writting this :

<figure class="image is-3by2">        
      {{ $firstChild := index .Pages 0 }}
      {{ with $firstChild.Params.images }}
      <img src="{{ index . 0 }}" alt="">
      {{ end }}
 </figure>

Also in my case i use Bundles for my articles and all of them have a cover image. In the others pages i use for exemple :

 Resources.GetMatch "cover.*"

How can i write the loop above with my bundles images cover ?

Thank’s for read and thank’s for help

2

You are more likely to receive a prompt and accurate response if you post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

1 Like
3

Thank you @jmooring

I created the repository : My repo
My problem is located in : …\themes\Azimut\layouts\categories\terms.html

Thank’s for watching

4

themes/Azimut/layouts/categories/terms.html

{{ with index .Pages 0 }}
  {{ with .Resources.ByType "image" }}
    {{ with index . 0 }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
    {{ end }}
  {{ end }}
{{ end }}
1 Like
5

@jmooring
Thank you so much, it’s amazing.
Jut one question, for my knowledges and understanding about Hugo.
How can i specify With and Height parameters in this case ? In front matter ? or declare as variables before the loop ?

6

In my example .Width and .Height are the dimensions of the original image. See:
https://gohugo.io/content-management/image-processing/#image-rendering

If you want to change the size of the image, use one of the image processing methods. For example:

{{ with index .Pages 0 }}
  {{ with .Resources.ByType "image" }}
    {{ with index . 0 }}
      {{ with .Fill "300x200" }}
        <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}

In this example the target dimensions are hardcoded in the template. If you don’t want to hardcode the target dimensions, you could specify them in front matter..

3 Likes
7

@jmooring Thank you very much for all these explanations. It becomes clearer.

I try now to get the image by the name and follow the methods

Like this

 {{ with index .Pages 0 }}
     {{ with .Resources.Match "images/cover.*" }}
     {{ with index . 0 }}
     <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
     {{ end }}
     {{ end }}
     {{ end }}

And there’s no images :sweat_smile: :man_facepalming:

Am thinking, if am using multiple pictures in my bundles… so i can call it by the name

8

Please push your local changes to your repository (https://github.com/Jeanmi05/Azimut). Without seeing your entire site, I would just be guessing.

9

Thank you, @jmooring, I did it

(Azimut/terms.html at master · Jeanmi05/Azimut · GitHub)

I tried to adapt the code.

10

Your code:

{{ with .Resources.Match "images/cover.*" }}

But your cover images are in the root of the page bundle, not in a subdirectory. Do this instead:

{{ with .Resources.Match "cover.*" }}

Also, to comment out template code, do this:

{{/* 
{{ $foo := "bar" }}
*/}}

not this:

<!--
{{ $foo := "bar" }}
-->
11

Thank you @jmooring, I understand better.

12

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.