Need help to output page media files and page heading text in a one loop

1

Hi!
I need some help to output media files and text in the right way.
Firsly I’ve uploaded images thourgh a admin panel and created meta files for them.
The html block was pretty simple:

{% for image in page.media.images %}
<div class="card">
	<div class="service-feature-box">
		<div class="service-media">
			{{ image.cropResize(360,216).html }}
		</div>
		<div class="card-body">
		   <div class="service-body">
			 <div class="custom-heading">
			   <h4>{{ image.heading }}</h4>            
			 </div>	
		   <p class="text-justify">{{ image.description }}</p>            
		   </div>
		</div>
	</div>
</div>
{% endfor %}

heading and description were inside meta file.

Now I need to reorganize this block in a proper way: the text is stored in .md files while meta data is stored in meta yaml file.

So, this is the full .md file:

---
title: Services
menu: Portfolio
process:
    markdown: true
    twig: true
recaptchacontact:
    enabled: false
text:
    -
        heading: 'Header 1'
        description: 'desc1'
    -
        heading: 'Header 2'
        description: 'desc2'
    -
        heading: 'Header 3'
        description: 'desc3'
---

<section class="service-container container-fluid">    
	<div class="container py-4">
		<div class="card-deck">
			{% for item in page.header.text %}
			<div class="card">
				<div class="service-feature-box">
					<div class="service-media">
						{{ page.media.cropResize(360,216).html }}
						{{ dump(page.media) }}
					</div>
					<div class="card-body">
					   <div class="service-body">
						 <div class="custom-heading">
						   <h4>{{ item.heading }}</h4>            
						 </div>	
					   <p class="text-justify">{{ item.description }}</p>            
					   </div>
					</div>
				</div>
			</div>
			{% endfor %}
		</div>
		<br>
	</div>
</section>

In the same folder I’ve 3 images, like work1.jpg, work2.jpg, work3.jpg and 3 meta files:
workN.jpg.meta.LANG_VAR.yaml .

Meta files cotain some data:

title: Image title
alt_text: alt_image_text

So, as a result I’m getting output with text, but without images. While I need text + images(with metal data).

When I didn’t have to output a text, the

{% for image in page.media.images %}
{{ image.cropResize(360,216).html }}

did the trick for me, but that was valid only for images

2

@01K I’m having difficulty figuring out what exactly you are trying to achieve…

Would you mind revisiting your question and maybe add some more details? For example:

  1. What higher-level problem are you trying to solve?
  2. How should the result look like?
  3. What is the added value of ‘page.header.text’ containing ‘header’ and ‘description’ while you already have a meta.yaml containing the same properties?
  4. Anything else you might want to add for further clarification…
4

@01K, During our private conversation, I got a better picture of your technical problem: A ‘parallel’ loop over 2 arrays: An array of images and an array inside frontmatter.

Some programming language have nice solutions to ‘combine’ or ‘zip’ two arrays, Twig unfortunately doesn’t… But it can be solved when using indexers to access array items.

Twig provides a handy loop variable we can use: loop.index0:

{% for image in page.media.images %}
   {{ page.header.text[loop.index0].title }} <-- To get header.text values
   {{ image.meta.alt_text }}                 <-- To get image values
{% endfor %}
1 Like