{% asyncEach example in component.examples %}
{% include "./example.njk" %}
{% endeach %}
// example.njk
<article class="spectrum-CSSExample">
<h3 id="{{example.slug}}" class="spectrum-CSSExample-heading spectrum-Heading spectrum-Heading--sizeS">
{{example.name}}
<div class="{{ spectrum-StatusLight spectrum-StatusLight--sizeM spectrum-CSSExample-status spectrum-StatusLight--{{ util.getStatusLightVariant(example.status) }}">
{{example.status}}
</div>
</h3>
{# {% include "./exampleContent.njk" %} #}
</article>
In example.njk example is undefined. How can I pass example inside a include like this?
example is always undefined inside example.njk
Related
I have posts within my blog that have 2 categories: project, and then whatever the name of the project is (i.e. project1 and project2). I've built out a page to display all my projects, with a loop that looks like this:
<div class="container">
{% for post in site.categories.project %}
{% assign remainder = forloop.index | modulo: 3 %}
{% if remainder == 1 or forloop.first %}
<div class="row">
{% endif %}
<div class="col-sm-4 d-flex align-items-stretch">
<div class="card" href="{{ site.baseurl }}{{ post.url }}">
<div class="m-2">
<h3>{{post.title}} {{post.categories[1]}}</h3>
{% if post.image %}
<img src="{{ post.image }}" />
{% endif %}
<p>{{post.projectInfo}}</p>
</div>
<div class="m-2 mt-auto">
{% if post.projectLink %}
Project Link |
{% endif %}
Blog Post
</div>
</div>
</div>
{% if remainder == 0 or forloop.last %}
</div>
{% endif %}
{% endfor %}
</div>
However, when I make an update to the project, I'd like to ONLY display the most recent post, and skip over all the others. I've tried assigning a variable thisProject, and then doing a limit: 1, but because I've grabbed each post already in the outermost for loop, it'll actually show multiple iterations of lastest post for the project that has multiple posts.
Any way I can better limit this?
becuase i want to manuplate/add some html tags after html render and save into nunjucks (like before rendering);
nunjucks before render
<div class="ps-4">
<h1>{{heading}}</h1>
{% if isShowLi %}
<div class="px-4">
{% for item in items %}
<div>{{item.name}}</div>
{% endfor %}
</div>
{% endif %}
</div>
nunjucks after render and html modification
<div class="ps-4">
<h1>hello world</h1>
<img src="abc.png" />
<div class="px-4">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
<div>item 5</div>
</div>
</div>
and i want it like that
<div class="ps-4">
<h1>{{heading}}</h1>
<img src="abc.png" />
{% if isShowLi %}
<div class="px-4">
{% for item in items %}
<div>{{item.name}}</div>
{% endfor %}
</div>
{% endif %}
</div>
please solve and suggest any way to do this thing pleassssss
If you want the output to look like the original nunjucks logic you typed in, then you can try the following technique. On your HTML template within your nunjucks project...
<pre>
<code>
<div class="ps-4">
<h1>{{heading}}</h1>
<img src="abc.png" />
{% if isShowLi %}
<div class="px-4">
{% for item in items %}
<div>{{item.name}}</div>
{% endfor %}
</div>
{% endif %}
</div>
</code>
</pre>
I've built the following liquid for loop to retrieve & output data from a repeating advanced custom field in Shopify. The ACF namespace is faq, and contains heading and content data. My current loop is as follows:
<div class="feed-faqs">
{% if page.metafields.faq != blank %}
{% assign faqs = page.metafields.faq %}
{% for item in faqs %}
{% assign i = forloop.index %}
<div class="item item--{{ i }}">
{{ heading[i] }}
{{ content[i] }}
</div>
{% endfor %}
{% endif %}
</div>
However, on the frontend, this loop returns the following:
<div class="feed-faqs">
<div class="item item--1">
</div>
<div class="item item--2">
</div>
</div>
Is what I'm trying to achieve (to output multiple values from a repeating ACF field) possible with this approach, and if so, where have I gone wrong in fetching the header & content data?
Worked it out, so leaving this answer for anyone else in the future:
<div class="feed--faqs">
{% if page.metafields.faq != blank %}
{% assign faqs = page.metafields.faq.heading %}
{% for value in faqs %}
{% assign i = forloop.index0 %}
<div class="item item--{{ i }}">
<h4>{{ page.metafields.faq.heading[i] }}</h4>
<p>{{ page.metafields.faq.content[i] }}</p>
</div>
{% endfor %}
{% endif %}
</div>
Metafield value type is set to 'Json String'.
For reference, I'm using the ArenaCommerce Advanceds Custom Fields app: https://apps.shopify.com/advanced-custom-field.
Hi i started to built something with Jekyll.
Now i want to built a Top-down list where you can navigate through all the posts with the tag the current page uses.
Here how it looks now.
<div class="list-group">
{% assign custom = page.tag %}
{% for post in site.tags.custom %}
<a href="{{post.url}}" class="list-group-item {% if page.url == post.url %} active {% endif %} ">
{{post.title}}
</a>
{% endif %}
I dont know if the assign is used right.
The working code looks like that:
<div class="list-group">
{% assign custom = page.tag %}
{% for post in site.tags.custom %}
{% if page.url == post.url %} //no liquid inside of attributes
<a href="{{post.url}}" class="list-group-item active">
{% endif %}
<a href="{{post.url}}" class="list-group-item">
{{post.title}}
</a>
{% endfor %} //endif is only for liquids if
I want to render a form. HTML for a field row should be like this:
<li class="text">
<label for="fieldname">
<div>
<input type="text" ... />
</div>
</li>
when the field type is text the li.class have to be the same.
I overwrite the field_row block:
{% block field_row %}
{% spaceless %}
<li class="text">
{{ form_label(form, label|default(null)) }}
{{ form_errors(form) }}
{{ form_widget(form) }}
</li>
{% endspaceless %}
{% endblock field_row %}
but how to replace the class value?
You can try to attach a public member to your FormType class (If present...) and call it from the twig template.
Maybe also the attributes array of a form can be accessed in a twig template...
class YourType extends AbstractType
{
public $class = 'text';
public function buildForm(FormBuilder $builder, array $options)
{
$builder->add('fieldname');
}
//...
}
And
{% block field_row %}
{% spaceless %}
<li class="{{ form.class }}">
{{ form_label(form, label|default(null)) }}
{{ form_errors(form) }}
{{ form_widget(form) }}
</li>
{% endspaceless %}
{% endblock field_row %}
Just replace the "field" word with the name of the type you want to modify.
You do it like this for text fields, but it's the same for any type:
{% block text_row %}
{% spaceless %}
<li class="text">
{{ form_label(form, label|default(null)) }}
{{ form_errors(form) }}
{{ form_widget(form) }}
</li>
{% endspaceless %}
{% endblock text_row %}
or like this for textareas:
{% block textarea_row %}
{% spaceless %}
<li class="textarea">
{{ form_label(form, label|default(null)) }}
{{ form_errors(form) }}
{{ form_widget(form) }}
</li>
{% endspaceless %}
{% endblock textarea_row %}
The important part is the block name, it should be the same as the name of the type you want to modify. The "field_row" is the default for all field types if there is no exact matching name.
This also works for form-types you defined yourself (the ones that inherit from AbstractType, that's why it's important you add a name to your form-types, see http://symfony.com/doc/2.0/book/forms.html#creating-form-classes).