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.

Log in Register
Content & Markdown

Multiple boxes – but unique content?

Started by Tim Guy 8 years ago · 10 replies · 875 views
8 years ago

Hi there
I've just discovered the world of Grav. It's great! I'm up and running and creating a modular page but looking for some [rookie] help please.

What I'd like to achieve is the following:
Three content boxes (text and an icon) in a page row that can be edited from the admin with different content. They appear in non-contiguous parts of that row template – in different divs. In this case how do I do it? I can only see a way to do this if each of the three boxes are three distinct pages and templates.

Or can this info be pulled from the md Frontmatter and output as
{{ page.header.contentofboxone }}
{{ page.header.contentofboxtwo }}
{{ page.header.contentofboxthree }}

If so, how do I tell a blueprint to render these as form fields - not just md content – in the admin?

I'm using a custom one-page template – not a Grav skeleton or theme.

Many thanks
Tim

last edited 08/18/18 by Tim Guy
8 years ago

@RiverTim Maybe I haven't understood you correctly, but this sounds very much like the 'features' module of theme Quark.

  • /user/themes/quark/blueprints/modular/features.yaml containts a 'features' list field containing fields for icon, header and text.
    You might want to copy that blueprint into your own theme, rename it and rename/delete fields to suit your needs.
  • The template /user/themes/quark/templates/modular/features.html.twig loops through the list of features defined in frontmatter.
    Copy this template to your own theme, rename it and tweak the layout to your liking.
8 years ago

@pamtbaau
Thank you for the info. I've had a look at the quark theme, but that's not quite what I want to achieve. The quark twig file has this block:

TWIG
`<div class="columns">
            {% for feature in page.header.features %}
               <div class="column {{ columns }}">
                   <div class="feature-icon">
                       <i class="fa fa-fw {{ feature.icon }}"></i>
                       {% if feature.header %}
                           <h6>{{ feature.header }}</h6>
                       {% endif %}
                   </div>
                   <div class="feature-content">
                       {% if feature.text %}
                        <p>{{ feature.text }}</p>
                       {% endif %}
                   </div>
               </div>
            {% endfor %}
            </div>`

When the content is added from the md file it duplicates the .column as many times as you add content – but it will always add the next block directly under the previous.
I don't want this. I want to add content split between different areas of the template say:

TWIG
<div id="box">{{ box content here }}</div>
----- a few lines away ---
<div id="col">{{ col content here }}</>
----- some more lines away ---
<div id="article">{{ article content here }}</>

I can't make the quark example print this way across non-contiguous areas of the template.

So how do I do it all in one template? Or, do I need to split my divs above into three different pages e.g. box, col, article? which seems very inefficient.

Thank you!
Tim

8 years ago

@RiverTim I suggested to have a look at Quark's 'features' module to get an overall idea and then adapt a copy of its blueprint/template to suit your needs.

What have you tried so far but hasn't worked?

8 years ago

@pamtbaau Thanks. I described above how I have already looked at the quark theme. The code block I quote is from the features page. I have adapted it using the following code. It creates the content where I want it on the page – but the admin fields are not showing up. Here is my complete code:

showcase twig:

HTML
<section class="showcase">
      <div class="showcase-wrap">
        <div class="texture-overlay"></div>
        <div class="container">
          <div class="row">
            <div class="col-md-6">
              <div class="device wp3">
                <div class="device-content">
                  <div class="showcase-slider">
                    <ul class="slides" id="showcaseSlider">
                     {% for item in page.media.images %}
                       <li>
                        <img src="{{ item.url }}" alt="Device Content Image">
                      </li>
                    {% endfor %}
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
                {{ page.content }} {# this pulls in the main markdown content from the body of the showcase.md file #}
              <blockquote class="team-quote">
                <div class="avatar"><img src="{{ url('theme://img/avatar.png') }}" alt="User Avatar"></div>
                <p>{{ page.header.bio }}</p> {# this pulls in the bio content from the frontmatter (header) of the showcase.md file labelled bio #}
                <div class="logo-quote">
                  <a href="http://tympanus.net/codrops/"><img src="{{ url('theme://img/codrops-logo.png') }}" alt="Codrops Logo"></a>
                  <p>{{ page.header.more }}</p> {# this pulls in the more content from the frontmatter (header) of the showcase.md file labelled more #}
                  <h1>{{ page.header.evenmore }}</h1>
                </div>
              </blockquote>
              <a href="http://tympanus.net/codrops/?p=22554" class="download-btn">Download! <i class="fa fa-download"></i></a>
            </div>
          </div>
        </div>
      </div>
    </section>

showcase yaml:

YAML
title: Showcase
'@extends': default

form:
  fields:
    tabs:
      fields:
        advanced:
          fields:
            columns:
              fields:
                column1:
                  fields:
                    name:
                      default: modular/showcase
                      '@data-options': '\Grav\Common\Page\Pages::modularTypes'
            overrides:
              fields:
                header.more:
                  default: modular/showcase
                  '@data-options': '\Grav\Common\Page\Pages::modularTypes'
        more:
          type: tab
          title: Showcase # Tab title
          fields:
            header.more: 
              name: more
              type: list
              label: Showcase # Tab body left title

              fields:     # Editable fields in the admin tab            
                .title:
                  type: text
                  label: Title
                .text:
                  type: text
                  label: Text

showcase md:

YAML
---

hidemenu: true

bio: '"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc." - Peter FinlanLorem ipsum dolor amet jianbing sustainable edison bulb, beard semiotics helvetica deep v occupy cornhole +1 kinfolk dreamcatcher venmo. Neutra ethical coloring book, pop-up narwhal pork belly hell of pug humblebrag health goth master cleanse authentic freegan. '

more: 'Lorem ipsum dolor amet jianbing sustainable edison bulb, beard semiotics helvetica deep v occupy cornhole +1 kinfolk dreamcatcher venmo. Neutra ethical coloring book, pop-up narwhal pork belly hell of pug humblebrag health goth master cleanse authentic freegan. '

evenmore: 'Even More Content!'

---

# Content!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.Lorem ipsum dolor amet jianbing sustainable edison bulb, beard semiotics helvetica deep v occupy cornhole +1 kinfolk dreamcatcher venmo. Neutra ethical coloring book, pop-up narwhal pork belly hell of pug humblebrag health goth master cleanse authentic freegan.

Thanks again.
Tim

8 years ago

@RiverTim

@RiverTim:
but the admin fields are not showing up

Uhhh....

  • They show up in Admin in tab 'Showcase'
  • They save to fontmatter in 'showcase.md' (but override the 'more' you already defined manually)
    YAML
    more:
  -
      title: 'My title'
      text: 'My text'
  • But need to be accessed in Twig using:
    TWIG
    <p>{{ page.header.more[0].title }}</p>
8 years ago

Thanks. But this breaks the content's display:
<p>{{ page.header.more[0].title }}</p>
The tab 'Showcase' is visible in the admin, but it contains no fields. I guess what I'm simply trying to ask is:

I have several content snippets in my Frontmatter that I want to display at certain points in the template and be editable via fields in a tab in the Admin. How do I get this working? I don't find it at all clear from the 'learn grav' documentation – or any template examples (three or four) I have looked at so far.
Tim

8 years ago

@RiverTim:
The tab ‘Showcase’ is visible in the admin, but it contains no fields.

Do you see the following in Admin? And have you tried 'Add item'?
image|428x39
Child fields will not be shown if you haven't added an item...

8 years ago

Yes I see them, but when I try to add an item using the buttons they appear. But upon saving them they disappear.

Rather than revisit my earlier question, I think it's better to restate that this is what I'm trying to achieve:

I have several content snippets in my Frontmatter that I want to display at certain points in the template and be editable via fields in a tab in the Admin. How do I get this working? I don’t find it at all clear from the ‘learn grav’ documentation – or any template examples (three or four) I have looked at so far.

Tim

8 years ago

Tim, the blueprint you have shared before works fine in my installation. They show fine, they save fine... No idea what goes wrong in your context.

If you need no variable list but have fixed fields only, you could use the following blueprint for 'showcase.yaml' .

YAML
...
more:
  type: tab
  title: Showcase # Tab title
  fields:
      header.bio:
        type: textarea
        rows: 5
        label: Bio
      header.more:
        type: textarea
        label: More
        rows: 5
      header.evenmore:
        type: textarea
        label: Even more
        rows: 5

You can then access them in Twig using 'header.more', 'header.evenmore' etc.

8 years ago

@pamtbaau Thanks. I couldn't get that to work for me. But after twiddling I finally got it working as I wanted. If anyone else needs a similar solution, here are the .yaml, .twig, .md files:

.yaml

YAML
title: Features
'@extends': default

form:
  fields:
    tabs:
      fields:
        features:
          type: tab
          title: Features
          fields:
            header.featbox:  # begin the first fieldset
              name: features
              type: list
              label: Features
              fields:
                .title:
                  type: text
                  label: Title
                .text:
                  type: text
                  label: Text # end the first fieldset
            header.featboxtwo:  # begin the second fieldset
              name: features
              type: list
              label: Features
              fields:
                .title:
                  type: text
                  label: Title
                .text:
                  type: text
                  label: Text # end the second fieldset
            header.featboxthree:  # begin the third fieldset
              name: features
              type: list
              label: Features
              fields:
                .title:
                  type: text
                  label: Title
                .text:
                  type: text
                  label: Text # end the third fieldset

.twig

HTML
<div class="container-fluid">

    <div class="row">
            <div class="col-md-8 section-1 nopadding" id="work">
                <div class="logo-1 wp1"></div>
            </div>
            <div class="featbox col-md-4 section-text nopadding">
                 {% for header in page.header.featbox %}
                <div class="render wp4">
                    <h2 class="frame">{{ header.title }}</h2>
                    <p>{{ header.text }}</p>
                    <div class="thin-sep"></div>
                </div>
                {% endfor %}

                <div class="small-featured-img seat-red">
                    <div class="arrow"></div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="featboxtwo col-md-4 section-text nopadding">
                {% for header in page.header.featboxtwo %}
                <div class="render wp5">
                    <h2 class="mech">{{ header.title }}</h2>
                    <p>{{ header.text }}</p>
                    <div class="thin-sep"></div>
                </div>
                {% endfor %}

                <div class="small-featured-img seat-black">
                    <div class="arrow"></div>
                </div>
            </div>
            <div class="col-md-8 section-2 nopadding">
                <div class="logo-2 wp2"></div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4 section-3">
                <div class="logo-3 wp3"></div>
            </div>
            <div class="featbox col-md-4 section-text nopadding">

                    {% for header in page.header.featboxthree %}
                <div class="render wp6">

                    <h2 class="front-frame">{{ header.title }}</h2>
                    <p>{{ header.text }}</p>
                    <div class="thin-sep"></div>
                </div>
                {% endfor %}

                <div class="small-featured-img frame-red">
                    <div class="arrow"></div>
                </div>
            </div>
            <div class="col-md-4 section-4"></div>
        </div>
    </div>

.md

YAML
---
title: 'Boxes within images'
featbox:
    -
        title: 'Title one'
        text: 'Venmo flannel hell of messenger bag. '
featboxtwo:
    -
        title: 'Title two'
        text: 'Hashtag stumptown pork belly, brunch vegan.'
featboxthree:
    -
        title: 'Title three'
        text: 'Corn hole vinyl offal freegan church-key pour-over '
---

If anyone sees a cleaner way of achieving the same result, please add!
Many thanks
Tim

Suggested topics

Topic Participants Replies Views Activity
Definition lists in Markdown extra not working
Content & Markdown · by Jochen, 8 months ago
6 100 8 months ago
Theme PinPress: No 'about' on Dutch pages
Content & Markdown · by Ton Haarmans, 1 year ago
10 187 1 year ago
Is it possible to make the sub-directories foldable in the menu?
Content & Markdown · by Jan L'Am, 1 year ago
4 148 1 year ago
Delimiter doing the opposite
Content & Markdown · by Leonardo, 1 year ago
3 63 1 year ago
New Installation - Navigation Menu and Table Styling
Content & Markdown · by belthasar, 1 year ago
4 259 1 year ago