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

Laying out a page with text and images

Started by Nathan 6 years ago · 1 replies · 1182 views
6 years ago

how would you lay out something like this in a Grav page? I've been trying to make it work using markdown tables and that just doesn't seem to be the correct method. Any suggestions?

All I want is:
on the left: h1 text, h2 text, paragraph text, button
on the right: image

This seems simple but I can't get a standard page to create this simple layout

Screen Shot 2020-09-14 at 5.19.02 PM|690x317

6 years ago

There is no standard page, none of default.html.twig are created equal. You'll need to use CSS for this, and basically any kind of model: float, flex, grid, position. They can all position something in opposition to something else, in all directions.

More concretely, this looks like you want a wrapper around the whole thing - call it the "autumn background" element. Within that, the first child-element is a "text-for-texts-sake" and the second child-element is an "illustration". They can all be <div>-tags.

This is something to do with Twig-templates and CSS-styling, not directly in Markdown. If you really wanted to, you could write all of it in Markdown, but FrontMatter will be easier. Consider this Page:

MARKDOWN
---
title: Community
join_text: Join tomorrow
join_link: "https://somewhere.elsewhere.com/"
image: illustration.png
---

# A better community

## Make your neighborhood more walkable

...

In Twig, use {{ page.header.join_link }} for the button and {{ page.media[page.header.image].html }} for the illustration.

👍 1

Suggested topics

Topic Participants Replies Views Activity
General · by Jerry Hunt, 4 days ago
2 80 10 hours ago
General · by pamtbaau, 15 hours ago
1 51 15 hours ago
General · by Andy Miller, 1 day ago
0 45 1 day ago
General · by Marcel, 12 months ago
6 346 5 days ago
General · by Duc , 5 days ago
3 40 5 days ago