Please help with Twig!

Archive
1

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 %}

{% endblock %} {% block header %},{% endblock %}

{% block content %}




Blog Logo
            {% 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

2

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

3

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

4

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!

5

So, here is the 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>

                {% 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 %}
6

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.

7

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!

8

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>

9

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

10

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

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

to

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

Best regards; siren