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
@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.
@anon76427325
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:
`<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:
<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
@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?
@anon76427325 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:
<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:
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:
---
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
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
Do you see the following in Admin? And have you tried ‘Add item’?
Child fields will not be shown if you haven’t added an item…
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
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’ .
...
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.
@anon76427325 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
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
<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
---
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