Accessing images defined in md file

baconlorange · January 23, 2023, 3:08pm

Hi,
i need help in accessing images within a single page.

the file structure is the following:

content
  blog
    blogentry
    mypost.md
      images
        image1.jpg
        image2.jpg

in the mypost.md file i use blocks and template to be able repeat a certain block several times within a blog-post. the file looks like this (simplified)

title: "My awesome blogpost"
draft: false
blocks:
- template: block-gameinfo
  title: "Something"
  copy: "some Text"
- template: block-youtube
  link: test
  tile: "some title"
  description: "some description"
- template: block-gallery
  images:
    - image_url : images/image1.jpg
      image_alt : "some alt text"
    - image_url : images/image2.jpg
      image_alt : "some alt text"
    - image_url : images/image3.jpg
      image_alt : "some other alt text"

now i want to display all images, so that i can put them in a caroussel

{{ define "main" }}
{{.Title}}
{{ range .Params.blocks }}
	
	{{ if  eq .template "block-gameinfo" }}
		Template Name : GameInfo
	{{ else if eq .template "block-youtube"}}
		Template Name : YouTube
	{{ else if eq .template "block-gallery"}}
		Template Name : Gallery <br/>
		{{ range .images }}
			
			{{ with .Resources.GetMatch .image_url}}
			{{ $resized := .Resize "200x"}}
			<img src="{{$resized.Permalink}}" alt="{{ $mainimage_alt }}" />
			{{ end }}
			{{ .image_url}} <br>
			{{ .image_alt }}<br/>
			<br/>
		{{ end }}
	{{ else }}
		No Special Template {{ .template }}
	{{ end }}
	<hr>
{{ end }}

I can access .image_url - but the src in the img-tag will always be emplty. I guess i am missing something obvious here.

{{ .image_url }} and {{ .image_alt }} are there:
images/image1.jpg
some alt text

images/image2.jpg
some alt text

images/image3.jpg
some other alt text

rmaguiar · January 23, 2023, 3:58pm

Have you tried to change the scope when looking for the images? Something like:

{{ with $.Resources.GetMatch .image_url}}

baconlorange · January 23, 2023, 4:01pm

Thank you, it worked. As i mentioned, probably something simple and indeed it was the scope.

baconlorange · January 23, 2023, 8:49pm

Hi,

small follow-up question : to have it easier, I want to use this script now in a partial.
How do I manage then to access

$.Resources.GetMatch

I tried different scenarios, but have no access to it.

jmooring · January 23, 2023, 9:03pm

How are you calling the partial?

baconlorange · January 23, 2023, 9:24pm

Hi,

this is a part of my single.html

{{ range .Params.blocks }}
	
	{{ if  eq .template "block-gameinfo" }}
		Template Name : GameInfo
	{{ else if eq .template "block-youtube"}}
		{{- partial "block-youtube.html" . -}}
	{{ else if eq .template "block-gallery"}}
		{{ partial "block-gallery.html" . .Page .Site   }}
	{{ else }}
		No Special Template {{ .template }}
	{{ end }}
	<hr>
{{ end }}

and now the partial

Template Name : Gallery <br/>
{{ .Site }}
{{ range .images }}
{{ $alt_txt := .image_alt }}
{{ with $.Resources.GetMatch .image_url}}
{{ $resized := .Resize "200x"}}
<img src="{{$resized.Permalink}}" alt="{{ $alt_txt }}" />
{{ end }}
{{ end }}

jmooring · January 23, 2023, 9:27pm

I suspect the page is out of context when you call the partial, but I’m just guessing without seeing your project’s source.

baconlorange · January 24, 2023, 7:09am

Hi,

this is a part of my single.html

{{ range .Params.blocks }}
	
	{{ if  eq .template "block-gameinfo" }}
		Template Name : GameInfo
	{{ else if eq .template "block-youtube"}}
		{{- partial "block-youtube.html" . -}}
	{{ else if eq .template "block-gallery"}}
		{{ partial "block-gallery.html" . .Page .Site   }}
	{{ else }}
		No Special Template {{ .template }}
	{{ end }}
	<hr>
{{ end }}

and now the partial

Template Name : Gallery <br/>
{{ .Site }}
{{ range .images }}
{{ $alt_txt := .image_alt }}
{{ with $.Resources.GetMatch .image_url}}
{{ $resized := .Resize "200x"}}
<img src="{{$resized.Permalink}}" alt="{{ $alt_txt }}" />
{{ end }}
{{ end }}

rmaguiar · January 24, 2023, 5:52pm

Your new issue looks similar to this one: Can’t evaluate existing field - partial content

As @jmooring said, the page is probably out of context when calling the partial.

jmooring · January 24, 2023, 6:00pm

single.html

{{ range .Params.blocks }}
  {{ if  eq .template "block-gameinfo" }}
    Template Name : GameInfo
  {{ else if eq .template "block-youtube" }}
    {{ partial "block-youtube.html" . }}
  {{ else if eq .template "block-gallery"}}
    {{ partial "block-gallery.html" $.Page  }}
  {{ else }}
    No Special Template {{ .template }}
  {{ end }}
{{ end }}

layouts/partials/block-gallery.html

{{ range .Params.images }}
  {{ $alt_txt := .image_alt }}
  {{ with $.Resources.GetMatch .image_url}}
    {{ $resized := .Resize "200x"}}
    <img src="{{$resized.Permalink}}" alt="{{ $alt_txt }}" />
  {{ end }}
{{ end }}

baconlorange · January 24, 2023, 7:33pm

If I use the exact same Code, I get an error.

I see the issue and does not know how to solve it.
The problem I have, i can have several blocks block-gallery,
if i use the following code in block-gallery:

{{ range .Params.blocks }}
{{ range .images }}
  {{ $alt_txt := .image_alt }}
  {{ with $.Resources.GetMatch .image_url}}
    {{ $resized := .Resize "200x"}}
    <img src="{{$resized.Permalink}}" alt="{{ $alt_txt }}" />
  {{ end }}
{{ end }}
{{ end }}

It works, BUT i have all images everytime.If the block is used twice with 3 images each, i will have both times 6 images.

Therefore I need to give the partial the scope of . , but if i do this, the $.Resources.GetMatch does not deliver the image (the variable is still set, but as i have the wrong scope it does not work as expected).
Is there a solution to this?

baconlorange · January 24, 2023, 9:33pm

I found a workaround.

Had to change my .md file, each block which can be repeated got a counter, where i have to make sure, that it is unique.

- template: block-gallery
  gallery_counter: 1
  images:
    - image_url : images/image1.jpg
      image_alt : "some alt text"
    - image_url : images/image2.jpg
      image_alt : "some alt text"
    - image_url : images/needforspeed_logo.jpg
      image_alt : "some other alt text"
- template: block-qoute
  qoute: "You can do it"
  qouted_person: "Bacon L'Orange"
- template: block-gallery
  gallery_counter: 2
  images:
    - image_url : images/needforspeed_logo.jpg
      image_alt : "some other alt text"
    - image_url : images/image1.jpg
      image_alt : "some alt text"
    - image_url : images/image2.jpg
      image_alt : "some alt text"
---

I adapted my single.html file

{{ $gallery_counter := 0}}
{{ range .Params.blocks }}
	
	{{ if  eq .template "block-gameinfo" }}
		{{- partial "block-gameinfo" . -}}
	{{ else if eq .template "block-youtube"}}
		{{- partial "block-youtube.html" . -}}
	{{ else if eq .template "block-qoute"}}
		{{- partial "block-qoute" . -}}
	{{ else if eq .template "block-content"}}
		{{- partial "block-content" . -}}
	{{ else if eq .template "block-gallery"}}
		{{ $gallery_counter = add $gallery_counter 1}}
		{{ $.Scratch.Set "gallery_counter" $gallery_counter}}
		{{ partial "block-gallery" $.Page }}


	{{ else }}
		No Special Template {{ .template }}
	{{ end }}
{{ end }}

I added here a $gallery_counter and in the gallery-tempalte part I add 1 and set it as a Scratch.

In my block-gallery.html tempalte I can now get the variable and check, that it has the right value. That way I get the correct block and just my images I wand in this gallery.

{{ $gallery_counter := .Scratch.Get "gallery_counter"}}
{{ range .Params.blocks }}
{{ if eq .gallery_counter $gallery_counter}}
{{ range .images }}
  {{ $alt_txt := .image_alt }}
  {{ with $.Resources.GetMatch .image_url}}
    {{ $resized := .Resize "200x"}}
    <img src="{{$resized.Permalink}}" alt="{{ $alt_txt }}" />
  {{ end }}
{{ end }}
{{ end }}
{{ end }}

Probably not the best solution, but one I can live with right now - or have to live with.
But if someone has an idea for a nicer and cleaner solution (without the additional counter in the .md file), this would be nice.

Maybe I have this idea tomorrow., i would then reply here again

system · January 26, 2023, 9:33pm

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

Topic		Replies	Views
Question regarding .md structure support	2	284	April 27, 2021
[OT]:Photo Gallery reads from .md file support	3	360	June 24, 2021
Images in posts support	8	8986	January 5, 2018
Create photopost with shortcode support	4	507	June 25, 2020
Hashed images working in file.html but not file.md support	9	1059	June 27, 2017

Accessing images defined in md file

Related topics