I want to add Active class to first li instance through twig without using JS, jQuery or anything else.
How can i achieve that?
Thanks in advance
<ul class="header-search-list" id="streetInputList">
{% for streetOption in streets %}
<li data-label-for="{{ streetOption.id }}" style="display: none;">{{ streetOption.name }}</li>
{% endfor %}
</ul>
If you want to add the class active to the first element in your loop, u could use the loop variable, e.g.
<ul class="header-search-list" id="streetInputList">
{% for streetOption in streets %}
<li data-label-for="{{ streetOption.id }}" {% if loop.first %} class="Active"{% endif %} style="display: none;">{{ streetOption.name }}</li>
{% endfor %}
</ul>
demo
Related
{% set pages = craft.entries.section('interests').all() %}
{% nav page in pages %}
<div class="nav__column">
<li class="nav__parent">
{{ page.getLink() }}
{% ifchildren %}
<ul>
{% children %}
</ul>
{% endifchildren %}
</li>
</div>
{% endnav %}
When using this every nav item has the class of nav parent
Can I determine what classes are on the nav item depending on whether it is a child or parent nav item?
Just wrap that class in the ifchildren conditional, e.g:
{% set entries = craft.entries.section('pages') %}
<ul id="nav">
{% nav entry in entries %}
<li{% ifchildren %} class="nav__parent{% endifchildren %}">
{{ entry.title }}
{% ifchildren %}
<ul>
{% children %}
</ul>
{% endifchildren %}
</li>
{% endnav %}
</ul>
As an aside, your example code is invalid markup; <li> elements can only appear within a valid list type, e.g. <ul> or <ol>.
In the product.twig file, i need to include another twig file , the file gets linked and working, but that disables the add-to-cart button in every product page
{{ header }}
<div id="product-product" class="container">
<ul class="breadcrumb">
{% for breadcrumb in breadcrumbs %}
<li>{{ breadcrumb.text }}</li>
{% endfor %}
</ul>
<div class="row">{{ column_left }}
{{ include('default/template/extension/total/demo_file.twig') }}
{% if column_left and column_right %}
{% set class = 'col-sm-6' %}
{% elseif column_left or column_right %}
{% set class = 'col-md-9 col-sm-12' %}
{% else %}
{% set class = 'col-sm-12' %}
{% endif %}
Event is bind on the add to cart button. The even code lies in the same file , so make sure the id of the button is same as previous button you are replacing.
Other way could be updating the event bind function jQuery selector.
I have a a list of entries.
Each entry has a related person.
Each related person has an avatar.
On my index page I am looping over the entries and creating a <div> with the persons details. Eg
{% set person = entry.relatedPerson[0] ?? null %}
<p>{{person.firstName}} {{person.lastName}} </p>
I need to access the picture related to the person.
Have tried this which displays a list of every asset that is an image in its own div.
{% set person = entry.relatedPerson[0] ?? null %}
{% for image in craft.assets.kind('image') %}
<li>
<img src="{{ image.getUrl }}" alt="{{ image.title }}">
</li>
{% endfor %}
I have also tried this which shows nothing
{% set person = entry.relatedPerson[0] ?? null %}
{% for image in person.assets.kind('image') %}
<li>
<img src="{{ image.getUrl }}" alt="{{ image.title }}">
</li>
{% endfor %}
How can I add the relatedPerson image to each card?
Also it would be great if you could explain as I'm not understanding templating. The docs aren't sufficient for me
I think you missed the parenthesis after getUrl "()" in your code to fetch the image. The getUrl is a method.
{% set person = entry.relatedPerson[0] ?? null %}
{% for image in craft.assets.kind('image') %}
<li>
<img src="{{ image.getUrl() }}" alt="{{ image.title }}">
</li>
{% endfor %}
Use the getUrl as I used in the above code.
I hope it will work for you.
Thanks.
If you want to get the image, Try the below code:
{% for block in entry.relatedPerson.all() %}
{% set image= block.<image-handle>.one() %}
<li>
<img src="{{ siteUrl }}<image-path>/{{ image.filename}}" alt="{{ image.filename }}">
</li>
{% endfor %}
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'm using Twitter Bootstrap and Symfony 2 with Twig. I have this for all my pages:
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<a class="brand" href="{{ path('home') }}">BudgetTracker</a>
<ul class="nav">
<li class="active">Expenses</li>
<li>Reports</li>
<li>Categories</li>
<li>Months</li>
<li>Bank Accounts</li>
</ul>
</div>
</div>
I don't want to copy it on each page... The problem is that the class active attribute should be put only for the cuurent page. Is there a way to succeed without using JavaScript, only with some king of macro or include? Thank you very much in advance!
UPDATE
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<a class="brand" href="{{ path('home') }}">BudgetTracker</a>
<ul class="nav">
{% if var == 'Expenses' %}
<li class="active">Expenses</li>
{% else %}
<li>Expenses</li>
{% endif %}
{% if var == 'Reports' %}
<li class="active">Reports</li>
{% else %}
<li>Reports</li>
{% endif %}
{% if var == 'Categories' %}
<li class="active">Categories</li>
{% else %}
<li>Categories</li>
{% endif %}
{% if var == 'Months' %}
<li class="active">Months</li>
{% else %}
<li>Months</li>
{% endif %}
{% if var == 'Bank Accounts' %}
<li class="active"><li>Bank Accounts</li>
{% else %}
<li><li>Bank Accounts</li>
{% endif %}
</ul>
</div>
</div>
My not very elegant try. And I call it with:
{% include 'EMBudgetTrackerBundle::navbar.html.twig' with {'var':'Categories'} %}
The easy way to do this is using the routes:
<ul class="nav nav-pills">
<li {% if app.request.attributes.get('_route') == 'your_route' %} class="active" {% endif %}>
MyTitle
</li>
...
</ul>
This is an adaptation of a solution provided by #Winzou.
It is quite simple:
Define this as a single twig with
{% block menu_block %} //your content here {% endblock %}
Use your block in every page
{% block menu_block %} {{ parent() }} {% endblock %}
Make conditional statements for give your class at the current menu element. Obviously you have to pass to your twig (or retrieve from request, i.e.) the name or id of your page, to make what you're trying to do
Here's an example.
{% if menu.url == current_url %} class="active"{% endif %}