I'm pretty new to patternlab and am just migrating my php based project onto the node version.
I am having issues to access global data and block in a block file, which I didn't have previously.
I am using Pattern Lab Node v3.0 on Mac, with Node v13.9.0, using a Gulp Edition with Twig.
source/_data/data.json
"img": {
"landscape": {
"w_1024": {
"src": "../../images/1536x864_16x9.jpg",
"alt": "16x9 Image"
}
}
}
source/macros/ui.twig
{% macro icon( name ) %}
{% if name == "airplay" %}<img src="airplay.png"/>{% endif %}
{% endmacro %}
source/02-organisms/00-global/file-1.twig
{% import "#macros/blocks.twig" as blocks %}
{% import "#macros/ui.twig" as ui %}
<p class="icon">{{ ui.icon( "airplay" ) }}</p>
<p class="output">{{img.landscape.w_1024.src}}</p>
{{ blocks.media(item) }}
source/macros/blocks.twig
{% import "#macros/ui.twig" as ui %}
{% macro media( params ) %}
<p class="icon2">{{ ui.icon( "airplay" ) }}</p>
<p class="output2">{{img.landscape.w_1024.src}}</p>
{% endmacro %}
Expected Behavior
Generated html should look as follow :
<p class="icon"><img src="airplay.png"/></p>
<p class="output">../../images/1536x864_16x9.jpg</p>
<p class="icon2"><img src="airplay.png"/></p>
<p class="output2">../../images/1536x864_16x9.jpg</p>
Actual Behavior
Generated html looks as follow :
<p class="icon"><img src="airplay.png"/></p>
<p class="output">../../images/1536x864_16x9.jpg</p>
<p class="icon2"></p>
<p class="output2"></p>
Any help is welcome!
Macro's have their own variable scope. If you want to access any other defined variables you'd need to pass the special variable _context.
{% macro foo(bar, context) %}
{{ bar }}
{{ context['foo'] }}
{% endmacro %}
{% import _self as macros %}
{{ macros.foo(42, _context) }}
demo - demo with include
Related
Trying to use a paginator in a view. Getting none from page = request.GET.get('page'). As is, the call to paginator limits posts on a page properly, but any call to page sequence henceforth fails. Pages will display, but there will be nothing form pagination.html displayed. For clarity, Base.html is the base template from which all others inherit. list.html is the page where I expect to see pagination.html displayed.
This code is based off of the django manual. Is there something else that needs to be setup to give the requests querydict a key of 'page' or a better way to paginate?
views.py
from django.shortcuts import render, get_object_or_404
from .models import Post
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
def post_list(request):
object_list = Post.published.all() #a list of the posts
paginator = Paginator(object_list, 4) # 4 posts in each page
page = request.GET.get('page')
try:
posts = paginator.page(page)
except PageNotAnInteger:
# If page is not an integer deliver the first page
posts = paginator.page(1)
except EmptyPage:
# If page is out of range deliver last page of results
posts = paginator.page(paginator.num_pages)
return render(request,'blog/post/list.html',{'page': page,'posts': posts})
pagination.html
<div class="pagination">
<span class="step-links">
{% if page.has_previous %}
Previous
{% endif %}
<span class="current">
Page {{ page.number }} of {{ page.paginator.num_pages }}.
</span>
{% if page.has_next %}
Next
{% endif %}
</span>
</div>
base.html
#...
<div id="content">
{% block content %}
{% include "pagination.html" with page=posts %}
{% endblock %}
</div>
#...
list.html
{% extends "blog/base.html" %}
{% block title %}My Blog{% endblock %}
{% block content %}
<h1>My Blog</h1>
{% for post in posts %}
<h2>
<a href="{{ post.get_absolute_url }}">
{{ post.title }}
</a>
</h2>
<p class="date">
Published {{ post.publish }} by {{ post.author }}
</p>
{{ post.body|truncatewords:30|linebreaks }}
{% endfor %}
{% endblock %}
When you fill a block in a child template it replaces the super template's block's content (not literally the block named content here). If you want to keep the parent's block along with some extra content, you should use {{ block.super }}, i.e. list.html should be:
{% extends "blog/base.html" %}
{% block title %}My Blog{% endblock %}
{% block content %}
<h1>My Blog</h1>
{% for post in posts %}
<h2>
<a href="{{ post.get_absolute_url }}">
{{ post.title }}
</a>
</h2>
<p class="date">
Published {{ post.publish }} by {{ post.author }}
</p>
{{ post.body|truncatewords:30|linebreaks }}
{% endfor %}
{{ block.super }}
{% endblock %}
I have the following code that I repeat multiple times in my layout:
<div id="hi">
<div class="howAreYou">
<p class="fineTYForAsking">
<!-- additional HTML logic goes here -->
</p>
</div>
</div>
How can I put in the above html into a single Twig template, and then use that template and put in my additional specific html in the <!-- additional HTML logic goes here --> section?
You could just define blocks and embed the template where ever you want
partial.twig.html
<div id="{{ id | default('hi') }}">
<div class="howAreYou">
<p class="fineTYForAsking">
{% block content %}
{% endblock %}
</p>
</div>
</div>
template.twig.html
{% embed "partial.html.twig" with { 'id' : 'foo' } %}
{% block content %}
Lorem Ipsum
{% endblock %}
{% endembed %}
You could also use an embed in a for-loop. Variables known inside the loop, are also know in the embedded file, e.g.
item.html.twig
<div{% if item.id|default %} id="{{ item.id }}"{% endif %}>
<div class="howAreYou">
<p class="fineTYForAsking">
{% block title %}
{% if item.title is defined %}
<h1>{{ item.title }}</h1>
{% endif %}
{% endblock %}
{% block content %}
{% if item.content is defined %}
<p>{{ item.content }}</p>
{% endif %}
{% endblock %}
</p>
</div>
</div>
template.html.twig
{% for item in items %}
{% embed "item.twig" %}
{% endembed %}
{% endfor %}
demo
can someone help me.
How can I modify default template to bootstrap version?
Because input's doesn't have a class "form-control".
Here is defaul:
{% block a2lix_translations_widget %}
{{ form_errors(form) }}
<div class="a2lix_translations tabbable">
<ul class="a2lix_translationsLocales nav nav-tabs">
{% for translationsFields in form %}
{% set locale = translationsFields.vars.name %}
<li {% if app.request.locale == locale %}class="active"{% endif %}>
<a href="#" data-toggle="tab" data-target=".{{ translationsFields.vars.id }}_a2lix_translationsFields-{{ locale }}">
{{ locale|capitalize }}
{% if form.vars.default_locale == locale %}[Default]{% endif %}
{% if translationsFields.vars.required %}*{% endif %}
</a>
</li>
{% endfor %}
</ul>
<div class="a2lix_translationsFields tab-content">
{% for translationsFields in form %}
{% set locale = translationsFields.vars.name %}
<div class="{{ translationsFields.vars.id }}_a2lix_translationsFields-{{ locale }} tab-pane {% if app.request.locale == locale %}active{% endif %} {% if not form.vars.valid %}sonata-ba-field-error{% endif %}">
{{ form_errors(translationsFields) }}
{{ form_widget(translationsFields) }}
</div>
{% endfor %}
</div>
</div>
{% endblock %}
{% block a2lix_translationsForms_widget %}
{{ block('a2lix_translations_widget') }}
{% endblock %}
I have no idea what should I insert/delete/modify :(
Thanks
I have done a custom form template for a2lix_translations with bootstrap(full code is too long and not optimal to paste here) But to get the classes I need like form-control into the widgets I have done the following:
{%for field in translationsFields%} {# further break the transliationsfields into individual inputs #}
{%if field.vars.attr is not empty and field.vars.attr['class'] is defined and field.vars.attr['class']=="tinymce"%}
{{form_widget(field ,{'attr':{'class':' tinymcertl'}} )}}
{%else%}
{{form_widget(field,{'attr':{'style':'direction:rtl','class':class~' form-control'}} )}}
{%endif%}
{%endfor%}
The ugly code above is basically saying, if the widget already has a class, add the class form-group to it. If the widget does not have a class at all, set the class to be form-group. I have done that if statement to avoid null pointers since if I try to reference the form class and there isn't one, the code will crash. And if I just do set class to form-group, it will erase the previous classes.
I hope this helps. My full code might not be helpful to you because the languages I was working with involved left to right language and right to left languages, so a lot of conditions had to be implemented to orient my page in the right direction, which is messy and you might not need...
PS: this was done on symfony 2.7 or so. Did not test on symfony 3.
in my case sf 3.2 i just did this change in my config.yml and all forms are bootstraped :
# app/config/config.yml
twig:
//....
form_themes:
- 'bootstrap_3_layout.html.twig'
I have a symfony3/twig skeleton template
page1/skeleton.twig
{# set default values #}
{% block content %}
{% set test = {
sec1: {
title: "null",
content: 'null'
},
}
%}
{% endblock %}
<ul>
19 {% for sec in test[0:] %}
<li>
<p>{{ sec.title }}</p>
<div>
<p>{{ sec.content }}</p>
</div>
</li>
{% endfor %}
</ul>
I then create a layout template that extends the skeleton with 'real' data
page1/layout.html.twig
{% extends 'page1/skeleton.html.twig' %}
{% block content %}
{% set test = {
sec1: {
title: "title1",
content: 'content2'
},
sec2: {
title: "title2",
content: 'content2'
}
%}
{% endblock %}
But when I generate/publish the page, Symfony fires an error
Variable "test" does not exist in :page1:skeleton.html.twig at line 19
500 Internal Server Error - Twig_Error_Runtime
complaining about the skeleton itself.
That 'test' array is defined in the skeleton. Afaict from reading the docs on 'block', 'extends' & 'set', and can't figure out what exactly the problem is.
What do I need to change to eliminate this error?
blocks in twig have their own variable scope.Variables created inside a block can't be accessed outside of it.
Imo you should only test if the variable exist and otherwise create the default value :
skeleton.twig
{% if not test is defined %}
{%
set test = {
sec1: {
title: "null",
content: 'null'
},
}
%}
{% endif %}
<ul>
{% for sec in test[0:] %}
<li>
<p{{ sec.title }}</p>
<div>
<p>{{ sec.content }}</p>
</div>
</li>
{% endfor %}
</ul>
controller.php
<?php
echo $twig->render('page/page.twig', array(
'foo' => [
'title' => 'title1',
'content' => content1',
],
);
Change this in the file page1/skeleton.twig:
{% for sec in test %}
Then it will work.
I tried it. Make sure you understand why!
Im new to Twig. Is there something similar to Jade's mixins with nested blocks?
I mean something like this:
mixin button(text)
.btn
.txt= text
.dropdown
block
+button("button")
+button("sub1")
+button("sub1-1")
+button("sub1-2")
+button("sub2")
+button("sub2-1")
.custom1 blah-blah
+button("sub3")
+button("sub3-1")
+button("sub3-2")
I found some kind of solution.
I have just splitted macro into 2+ macros.
{% __btns.twig %}
{% macro btn1_opening(text) %}
<div class="button1">
<div class="text">{{ text }}</div>
<div class="dropdown">
{% endmacro %}
{% macro btn1_closing() %}
</div>
</div>
{% endmacro %}
{# main.twig #}
{% import "__btns.twig" as btns %}
{{ btns.btn1_opening("I am button") }}
<div class="something-inside-dropdown">
{% include "somefile.twig" %}
</div>
{{ btns.btn1_closing() }}
So, in this case even if i need multiple blocks inside of my macro i can just write some HTML between opening, intermediate and closing macros.