0

I have been following the Grav documentation (https://learn.getgrav.org/cookbook/general-recipes#render-content-in-columns) to figure out how to do this, but haven't had much luck. The content for my page is in default.md, but I can't figure out to how place images and content into separate columns and rows.

I've included a screenshot of what I've created in HTML and CSS. Basically I want to put an image into the left column of a row, and details into the right column. See here: https://i.stack.imgur.com/rqegC.jpg

When I am editing the page template however, I only seem to have one "variable" (if that's the right word) controlling all the content. See my code for base.html.twig:

<div class="container">
        <div class="row">
            <div class="col-md-4">
                {% block content %} {# thumbnail image goes here #}
                {% endblock %}
            </div> <!-- COLUMN END -->

            <div class="col-md-8">
                {% block content %} {# album details go here #}
                {% endblock %}
            </div> <!-- COLUMN END -->

        </div> <!-- ROW END -->

How do I specify that a content block is specific for an image, and that another is specific for album details?

Rafi Chaudhury
  • 1
  • 1
  • You should rename the first block to `image` imo then you can alter the image block's content when extending from this template – DarkBee Jun 07 '16 at 21:18

1 Answers1

1

{% block content %} is the only block available when showing data from the .md file. To render the data (text or images) in two or more columns as shown in the documentation, you have to split them in the .md file (with ---) and then use the twig function {% for %} in your .html.twig template to show them.

user/pages/my-2-column-page.md
(note the extra line before the ---)

---
title: ' 2 Columns Page'
---

Column one is for the image thumb
![the thumbnail](../my-2-column-page/thumbnail.jpg) 

---
Here goes all the album details content. 

Phasellus id eleifend risus. In dui tellus, dignissim id 
viverra non, convallis sed ante. Suspendisse

---

user/themes/mytheme/templates/my-2-column-page.html.twig
(note the twig function {% for %} )

{% extends 'partials/base.html.twig' %}

{% block content %}
    {% set colsize = [4, 8] %}
    <div class="container">
        <div class="row">
           {% for key, column in page.content|split('<hr />') %}
               <div class="col-md-{{ colsize[key] }}">
                  {{ column }}
               </div>  
           {% endfor %}
        </div>
    </div>
{% endblock %}

OR ...

Other way to do it (more simple) is to define your .html.twig template as normal (with no "for" iteration) and call the image directly:

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <img src="{{ page.media['thumbnail.jpg'].url }}" />
        </div>
        <div class="col-md-8">
            {{ page.content }}
        </div>
    </div>
</div>
{% endblock %}

The image filename must match the file copied in the page folder (user/pages/my-2-column-page/thumbnail.jpg) and just type the album detail in the .md file.

arton
  • 98
  • 4
guillefd
  • 1,903
  • 1
  • 16
  • 26
  • Thanks for providing 2 ways of doing this. I have seen a variation of your first suggested solution when I was trying to create this page in Wordpress (defining a function to iterate bootstrap columns and rows to fill with content). I guess I was hoping that Grav would have a more straightforward way of defining content blocks for rookies like me, but perhaps this is the best-practice solution. – Rafi Chaudhury Jun 09 '16 at 23:15
  • You could do a for loop with a key to avoid the count issue that @MguYiw was running into. Like: `{% for key, column in page.content|split('
    ') %}`     – arton Mar 31 '17 at 04:44