Please help with Twig!

Started by Muut Archive 11 years ago · 9 replies · 347 views

11 years ago

Hi!

Using notepad I tried to use my own twig to display content as well as articles (posts) on the same page. I think Im on the right way but my formatting is a little crappy and I cant figure out why.

Blog_OK
Sub_NOK

I created a site.yaml.twig with the following code:

{% extends 'partials/base.html.twig' %}
{% set collection = page.collection() %}
{% block body %}
<body class="post-template page" itemscope itemtype="http://schema.org/WebPage">
{% endblock %}
{% block header %},{% endblock %}

{% block content %}
<main id="summer-page-container" class="summer-page-container" role="main">
<header class="summer-page-header">
<div class="summer-page-menu-header">
<a class="summer-blog-logo" href="{{ basebase_url_absolute_url }}">
<img src="{{ base_url }},{{ site.logo }}" alt="Blog Logo" /></a>
</a>

TWIG

            {% include 'partials/navigation.html.twig' %}
        </div>
        <div class="summer-page-title row">
            <div class="small-12 columns">
                <h1>{{ page.title }}</h1>
            </div>
        </div>
    </header>
    <article class="summer-page-content">
        <div>{{ content }}</div>
    </article>

   <div class ="summer-content" role="main">
    {% for post in collection %}
        {% include 'partials/article.html.twig' %}
    {% endfor %}

    {% if config.plugins.pagination.enabled and collection.params.pagination %}
        {% include 'partials/pagination.html.twig' with {'pagination':collection.params.pagination} %}
    {% endif %}
</main>

{% endblock %}

{% block footer %},{% endblock %}

What I`m doing wrong?

Best regards; siren

11 years ago

First thing that is throwing me is site.yaml.twig ? YAML? shoudln't this be site.html.twig ?

11 years ago

Sorry for that, of course it`s site.html.twig ...

11 years ago

To be honest i have trouble reading your post because you have not put your code in codeblocks (triple back ticks). Makes it very hard to read!

11 years ago

So, here is the code:

TWIG

{% extends 'partials/base.html.twig' %}
{% set collection = page.collection() %} 
{% block body %}
<body class="post-template page" itemscope itemtype="http://schema.org/WebPage">
{% endblock %}
{% block header %},{% endblock %}

{% block content %}
    <main id="summer-page-container" class="summer-page-container" role="main">
        <header class="summer-page-header">
            <div class="summer-page-menu-header">
                <a class="summer-blog-logo" href="{{ basebase_url_absolute_url }}">
                    <img src="{{ base_url }},{{ site.logo }}" alt="Blog Logo" /></a>
                </a>

                {% include 'partials/navigation.html.twig' %}
            </div> 
            <div class="summer-page-title row">
                <div class="small-12 columns">
                    <h1>{{ page.title }}</h1>
                </div>
            </div>
        </header>
        <article class="summer-page-content">
            <div>{{ content }}</div>
        </article>

       <div class ="summer-content" role="main">
        {% for post in collection %}
            {% include 'partials/article.html.twig' %}
        {% endfor %}

        {% if config.plugins.pagination.enabled and collection.params.pagination %}
            {% include 'partials/pagination.html.twig' with {'pagination':collection.params.pagination} %}
        {% endif %}
    </main>
{% endblock %}

{% block footer %},{% endblock %}

11 years ago

I don't think it's your Twig per say, as it looks alright to me, more likely it's your CSS. To really be able to see what's going I would need to be able to inspect your site with my browser.

11 years ago

http://notepad.ff-landegg.at/ is the start-page (that is working fine using the original default.html.twig

http://notepad.ff-landegg.at/einsaetze/2015 is the one with the above twig, that is not working as expected.

Thanks in advance!

11 years ago

2015 2015-08-25 15-02-54

You can clearly see it's related to this min-height setting that is being applied to that <div>

11 years ago

Change the class on that div, or remove the min-height requirement. Problem solved :)

11 years ago

Again, thanks for your help, here is what I did (if others experience the same):

In the user/themes/notepad/css/postb146.css I changed

CSS

    .post-template .summer-post-header {
        position: relative;
        margin: 0 auto;
        min-height: 35rem;
        width: 100%; }

CSS

    .post-template .summer-post-header {
        position: relative;
        margin: 0 auto;
        min-height: 3rem;
        width: 100%; }

Best regards; siren

Topic	Replies	Views	Activity
About the Archive category Archive · by Deleted User, 9 years ago	0	1335	9 years ago
Hey buddies! Archive · by Muut Archive, 9 years ago	2	925	9 years ago
There is a way to do a "if condition" in MD page? Archive · by Muut Archive, 9 years ago	2	4056	9 years ago
Official docker image of grav (+admin +gitsync) Archive · by Muut Archive, 9 years ago	1	2940	9 years ago
Weird Grav + caddy + iOS + https problem Archive · by Muut Archive, 9 years ago	3	1112	9 years ago

Suggested topics