Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

General

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

Solved by pamtbaau View solution

Started by 01K 7 years ago · 2 replies · 548 views
7 years ago

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:

HTML
{% 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:

HTML
---
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:

YAML
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

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

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

last edited 12/09/19 by 01K
7 years ago

@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...
last edited 12/09/19 by pamtbaau
7 years ago Solution

@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:

TWIG
{% 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

Suggested topics

Topic Participants Replies Views Activity
General · by Jerry Hunt, 4 days ago
2 85 13 hours ago
General · by pamtbaau, 18 hours ago
1 60 18 hours ago
General · by Andy Miller, 1 day ago
0 47 1 day ago
General · by Marcel, 12 months ago
6 350 5 days ago
General · by Duc , 6 days ago
3 44 5 days ago