How to range and output page params value with children?

Dear guys,

Can someone help me out with this? I need to insert images into my sitemap.xml but the code I used give me error or blank value. I tried may methods (and I don’t really know if it’s right methods!!) since yesterday until today for hours and hours and it’s not working… my head is spinning wildly now :crazy_face:

I tried to insert images from front matter, and structure is like this (hopefully it’s correct):

---
gallery:
   - image: "/images/first.jpg"
     caption: "this is caption for first image"
     title: "this title is for first image"
   - image: "/images/second.jpg"
     caption: "this is caption for second image"
     title: "this title is for second image"
   - and so on...
---

I don’t know if the structure is valid or not as I followed someone who use jekyll front matter structure. So no idea if it’s also valid for hugo.

I tried to use a dumb method trying to {{ range .Params.gallery }} and then call the images using {{ .Params.gallery.image }} and {{ .Params.gallery.caption}} inside the range… but it’s not working.

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  {{ range (where .Data.Pages "Type" "post") }}
	  {{ if not .Params.robotsdisallow }}
	  <url>
	    <loc>{{ .Permalink }}</loc>
	    <lastmod>{{ safeHTML ( .Date.Format "2006-01-02T15:04:05-07:00" ) }}</lastmod>{{ with .Sitemap.ChangeFreq }}
	    <changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
	    <priority>{{ .Sitemap.Priority }}</priority>{{ end }}
         {{ range .Params.gallery }}
         <image:image>
         <image:title>{{ .Params.gallery.title }}</image:title>
         <image:loc>{{ .Params.gallery.image }}</image:loc>
         <image:caption>{{ .Params.gallery.caption }}</image:caption>
       </image:image>
       {{ end }}
	  </url>
	  {{ end }}
  {{ end }}
</urlset>

My knowledge with this is really limited, after reading and reading a lot since yesterday, what I’ve got is more confusion and my head is really spinning wildly now. :sweat_smile:

Guys, could you please be kind and help me out with this? :blush::yum:

Switching from wordpress to SSG is really challenging!! :scream::confounded:

But for some reason it’s really fun. LOL!

Hi,

You need to read up on the context inside a range: https://gohugo.io/templates/introduction/#iteration

Basically, the ‘dot’ changes when you are inside a range.

1 Like

Pointyfar, thanks for chimed in! But oohh God, all I saw is alien language and I need tons of time to decipher that. :sweat_smile:

Do you have more example or perhaps do you know any theme that is currently using such thing? I’m honestly the weakest if I don’t have close example for doing what I need, as I can only do lightweight modification. :blush::sweat:

Anyway, thank you so much for replying and helping me! :+1::+1:

Got it!!

This post helped me figure it out:

Thank you!!

My purpose is to generate an image sitemap for my blog. However, hugo have no option for second sitemap output (or I haven’t found it yet? please let me know if it’s possible), I have no choice but add the image into the url field of the primary sitemap.

I’m coming from wordpress environment and totally spoiled by yoast plugin for this, and it’s always separating posts sitemap and image sitemap automatically.

I never know it’s actually possible to mix them as one and each URL actually can hold up to 1000 images. New knowledge for me today :slight_smile:

Anyway, if anyone ever need this solution, here is what you need to do:

  1. create a sitemap.xml template in your theme’s layout folder
  2. insert the code like the following:
<urlset
      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:xhtml="http://www.w3.org/1999/xhtml"
      xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
      xsi:schemaLocation="
            http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
  {{ range (where .Data.Pages "Type" "post") }}{{ if not .Params.robotsdisallow }}
  <url>
    <loc>{{ .Permalink }}</loc>
    <lastmod>{{ safeHTML ( .Date.Format "2006-01-02T15:04:05-07:00" ) }}</lastmod>{{ with .Sitemap.ChangeFreq }}
    <changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
    <priority>{{ .Sitemap.Priority }}</priority>{{ end }}{{ range .Params.gallery }}
      <image:image>
        <image:caption>{{ .imgcaption }}</image:caption>
        <image:loc>{{ .imglink | absLangURL }}</image:loc>
        <image:title>{{ .imgtitle }}</image:title>
      </image:image>{{ end }}
  </url>{{ end }}{{ end }}
</urlset>

(Note: To make the XML output extremely clean and beautiful, I purposefully deleted some spaces and joining some lines as one.)
(Note 2: This sitemap template will only list important “post” type pages, and a post can be excluded with “robotsdisallow” params in post’s front matter)

  1. input images into page’s front matter:
---
gallery:
  item1:
    imgtitle: "Coolest guy"
    imgcaption: "Coolest guy"
    imglink: "/images/1.jpg"
  item2:
    imgtitle: "Prettiest girl"
    imgcaption: "Prettiest girl"
    imglink: "/images/2.jpg"
  item3:
    imgtitle: "Coolest HUGO SSG"
    imgcaption: "Coolest HUGO SSG"
    imglink: "/images/3.jpg"  

---
  1. hugo your site.
  2. done! :tada::tada::tada:

The clean XML output:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<urlset
      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:xhtml="http://www.w3.org/1999/xhtml"
      xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
      xsi:schemaLocation="
            http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">

  <url>
    <loc>http://localhost:1313/wowwee-sexy-xml/</loc>
    <lastmod>2019-01-03T15:40:15+07:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
      <image:image>
        <image:caption>Coolest guy</image:caption>
        <image:loc>http://localhost:1313/images/1.jpg</image:loc>
        <image:title>Coolest guy</image:title>
      </image:image>
      <image:image>
        <image:caption>Prettiest girl</image:caption>
        <image:loc>http://localhost:1313/images/2.jpg</image:loc>
        <image:title>Prettiest girl</image:title>
      </image:image>
      <image:image>
        <image:caption>Coolest HUGO SSG</image:caption>
        <image:loc>http://localhost:1313/images/3.jpg</image:loc>
        <image:title>Coolest HUGO SSG</image:title>
      </image:image>
  </url>
  <url>
    <loc>http://localhost:1313/list/first/</loc>
    <lastmod>2019-01-01T20:44:38+07:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

I can’t believe it I actually spent two full days to come up with this solution :sob::sob:

But really happy as I’ve found it :smile:

Big thanks to everyone in this great forum!

1 Like