I need to know why this script doesn't work with me and If anyone has a solution it will be appreciated.
My problem is that the image wouldn't be displayed background-image:url('{{asset('uploads/images/')}}{{image.name}}
<div class="carousel-inner">
{% set i = 0 %}
{% for project in projects %}
{% for image in project.images[:1] %}
{% if i == 0 %}
<div class="item active">
{% else %}
<div class="item">
{% endif %}
<div class="fill" style="background-image:url('{{asset('uploads/images/')}}{{image.name}}')"></div>
<div class="carousel-caption">
<h2>{{project.name}}</h2>
</div>
</div>
{% endfor %}
{% set i = i + 1 %}
{% endfor %}
</div>
</div>
You need to include your image.name inside of the asset() function.
{{asset('uploads/images/')}}{{image.name}} changed to
{{asset('uploads/images/' ~ image.name)}}
Related
I would like to ask for help regarding a repeater within a repeater on Wordpress using Twig. The Services section shows up correctly but the Features section within the Services section isn't showing up.
Here is a screenshot of the Wordpress ACF.Click Me
And right below is the code that I am currently using.
Please advise. Thank you!
{% extends "page.twig" %}
{% block additional %}
<div id="page-services">
<section id="services">
<div class="row small-up-1 large-up-1">
<div class="small-12 medium-11 large-9 columns small-centered">
<div class="services-grid animated fadeIn wow">
<p align="center">
{{post.services_desc}}
</p>
</div>
</div>
</div>
<div class="line centered"></div>
</div>
<center>
<div class="row">
<div class="small-12 medium-11 large-9 columns small-centered">
<div class="features-header animated fadeIn wow">
{% for item in post.get_field('services_ist') %}
<div class="column services">
<h2 class="capitalize bold">
{{item.services_title}}
</h2>
{% if item.services_subtitle %}
<h4 class="subtitle">
{{item.services_subtitle}}
</h4>
<div class="line thin"></div>
{% endif %}
{% if item.services_content %}
<div class="description">
{{item.services_content}}
<br><br>
</div>
{% endif %}
{% if feats.services_feat %}
{% for feats in post.get_field('services_feat') %}
<p>{{feats.feat_title}}</p>
{% endfor %}
{% if feats.feats_desc %}
<h4 class="feats description">
{{feats.feats_desc}}
</h4>
{% endif %}
{% endif %}
</div>
{% endfor %}
</center>
</div>
</div>
</div>
</section>
</div>
{% endblock %}
As the ACF Integration Guide says, you shouldn’t use get_field() again when you try to access nested repeater fields:
When you run get_field on an outer ACF field, everything inside is ready to be traversed. You can refer to nested fields via item_outer.inner_repeater
So instead of using:
{% for feats in post.get_field('services_feat') %}
You should use:
{% if feats.services_feat %}
{% for feats in feats.services_feat %}
<p>{{ feats.feat_title }}</p>
{% endfor %}
{# … #}
{% endif %}
I have never done twig before but a quick search got me something.
Change the inner repeater to this:
{% for feats in services_ist.get_field('services_feat') %}
<p>{{feats.feat_title}}</p>
{% endfor %}
This way the second repeater knows that its a child from the first repeater instead of a direct child to the post.
I am having troubles assembling 3 Twig templates, with {% extends %} and {% use %}.
I know how to assemble 2 templates, thanks to {% extends %} but I don't get how to add a third. I got two different types of errors :
Circular reference detected for Twig template "home.html.twig", path:
home.html.twig -> twtts.html.twig -> home.html.twig
OR
Template "twtts.html.twig" cannot be used as a trait.
I don't understand what's wrong in this :
{# home.html.twig #}
{% extends 'layout.html.twig' %}
{% use 'twtts.html.twig' %}
{% block assets %}
<script src="/assets/js/actions.js"></script>
{% endblock %}
{% block page_title %}Twttr | Home{% endblock %}
{% block content %}
<div class="container d-flex">
<div class="col-md-3"></div>
<div class="col-md-6">
<table class="table col-md-6 mt-5" id="twtts">
{% block twtts %}
{% endblock %}
</table>
</div>
<div class="col-md-3"></div>
</div>
{% endblock %}
{% extends 'layout.html.twig' %}
_
{# twtts.html.twig #}
{% block twtts %}
{% for twtt in twtts %}
<tr class="">
<td class="col-md-6">
<div class="media pr-4 pl-4 pt-4 pb-3">
<a href="/profile/{{twtt.author_name}}">
{% if twtt.pp_url is not empty %}
<img src="{{ twtt.pp_url }}" alt="{{ twtt.author_name }} profile picture" class="align-self-start twtt-thumbnail mr-3 ml-3">
{% else %}
<img src="/assets/pp/default_pp.png" alt="PP-Pro" class="align-self-start twtt-thumbnail mr-3 ml-3">
{% endif %}
</a>
<div class="media-body position-relative">
{% if twtt.rt_author_name is not null %}
<small class="text-muted position-absolute rtwtt-msg">{{ twtt.rt_author_name }} rtwtted :</small>
{% endif %}
<h5 class="mt-0 d-flex justify-content-between">
{{ twtt.author_name }}
<span>{% if twtt.rt_author_name is not null %}{{ twtt.post_time|date("d/m/Y H:i") }}{% else %}{{ twtt.date|date("d/m/Y H:i") }}{% endif %}</span>
</h5>
<p>{{twtt.content|nl2br}}</p>
<div class="media-footer d-flex justify-content-center">
<div class="actions d-flex justify-content-around">
<div class="rtwtt {% if twtt.rtwtted == true %}text-success{% endif %}" data-twtt={{ twtt.id }}><span class="rt-nbr">{{ twtt.rtwtts }}</span><i class="fas fa-retweet"></i></div>
<div class="fav {% if twtt.faved == true %}text-warning{% endif %}" data-twtt={{ twtt.id }}><span class="fav-nbr">{{ twtt.favs }}</span><i class="fas fa-star"></i></div>
</div>
</div>
</div>
</div>
</td>
</tr>
{% endfor %}
{% endblock %}
_
{# layout.html.twig #}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block page_title %}{% endblock %}</title>
{# ... #}
{% block assets %}{% endblock %}
</head>
<body>
<main>
<div class="container">
{% block content %}{% endblock %}
</div>
</main>
</body>
</html>
It used to work when the file twtts.html.twig was in home.html.twig but as I am going to reuse it for a lot of other pages, I was trying to shorten it, and make a file for this template.
If you want to simply render the content from twtts.html.twig, you should use include
{# home.html.twig #}
{% extends 'layout.html.twig' %}
....
{% block content %}
<div class="container d-flex">
<div class="col-md-3"></div>
<div class="col-md-6">
<table class="table col-md-6 mt-5" id="twtts">
{% include 'twtts.html.twig' %} <==== Include where you want to render
</table>
</div>
<div class="col-md-3"></div>
</div>
{% endblock %}
See the following thread for difference between include, use and extend.
Difference between Include, Extends, Use, Macro, Embed in Twig
Thanks!
I tried to use the forloop.last template tag
<div class="panel-body">
{% for card in cardlist.card_set.all %}
{% if forloop.last %}
<div class="well" style="margin-bottom: 0px;">{{ card.title }}</div>
{% else %}
<div class="well" style="margin-bottom: 20px;">{{ card.title }}</div>
{% endif %}
{% endfor %}
</div>
How do I refactor the above source like the source below?
In the refactored source, "margin-bottom: {{margin-bottom}} px;" Error in "{{margin-bottom}}".
<div class="panel-body">
{% for card in cardlist.card_set.all %}
{% if forloop.last %}
margin-bottom = 0
{% else %}
margin-bottom = 20
{% endif %}
<div class="well" style="margin-bottom: {{ }}px;">{{ card.title }}</div>
{% endfor %}
</div>
you can try it:
<div class="panel-body">
{% for card in cardlist.card_set.all %}
<div class="well" style="margin-bottom:{% if forloop.last %}0px{% else %}20px{% endif %};">{{ card.title }}</div>
{% endfor %}
</div>
I want to use a looping functionality in region.html.twig file to I can
wrap elements that outputted from {{ content }} section.
Defult region.html.twig
{% if content %}
<div class="Parent">
{{ content }}
</div>
{% endif %}
The schematic generated Output:
<div class="Parent">
Item_1
Item_2
Item_3
</div>
I try to use below code to create a loop and add a wrapper around of each Item outputted from {{ content }}:
My code:
{% if content %}
<div class="Parent">
{% for item in items %}
<div class="child-wrapper">{{ item.content }}</div>
{% endfor %}
</div>
{% endif %}
The Final outpute that I want to achive:
<div class="Parent">
<div class="child-wrapper">Item_1</div>
<div class="child-wrapper">Item_2</div>
<div class="child-wrapper">Item_3</div>
</div>
If your data is: content = [1, 2, 3, ... , 100]
Then write
{% if content %}
<div class="Parent">
{% for item in content %}
<div class="child-wrapper">{{ item }}</div>
{% endfor %}
</div>
{% endif %}
If your data is array of assotiated arrays like this:
content = [
['content' => 1],
['content' => 2],
]
Then write
{% if content %}
<div class="Parent">
{% for item in content %}
<div class="child-wrapper">{{ item.content }}</div>
{% endfor %}
</div>
{% endif %}
I send Cards(some data) from controller to twig and create row with 3 elems.
{% for elem in Cards|batch(3) %}
<div>
<div class="row">
{% include ':appviews/elements/Card:Card.html.twig' with {'elem': elem} %}
</div>
</div>
{% endfor %}
It works well, but now i need to add card with static html (not from Data), that must be rendered one time.
Is there way, to add only 2 elems in row for the first loop?
{% for elem in Cards|batch(3) %}
<div>
<div class="row">
{% if loop.first %}
<div class="col-md-4 noPadding margin">
<div class="square"> SOME TEXT</div>
</div>
{% endif %}
{% include ':appviews/elements/Card:Card.html.twig' with {'elem': elem} %}
</div>
</div>
{% endfor %}
You cannot do this with "batch" filter. I suggest you use some logical tricks. There can be many of them, depending on:
how often do you want to insert the hardcoded block
how much code/template piece is being reused
For example, if you only need this once in the beginning, you can slice your array once, and then slice it again:
{% for elem in Cards|slice(0, 1) %}
<div>
<div class="row">
{% if loop.first %}
<div class="col-md-4 noPadding margin">
<div class="square"> SOME TEXT</div>
</div>
{% endif %}
{% include ':appviews/elements/Card:Card.html.twig' with {'elem': elem} %}
</div>
</div>
{% endfor %}
{% for elem in Cards|slice(2, Cards|length) %}
...
{% endfor %}
If you think there's too much copy/paste going on, you can create a macro for the "row", with some parameters and have all the logic in it. Then you can control, how, when and what is rendered. But this can be an overload in simple cases, so you decide:
http://twig.sensiolabs.org/doc/tags/macro.html
Well, final code is:
<div class="row rowQuest">
<div class="col-md-4 noPadding margin">
<div class="square">HARDCODED CARD</div>
</div>
{% set firstPartOfQuests = quests|slice(0,2) %}
{% for elem in firstPartOfQuests|batch(2) %}
{% include 'appviews/elements/questCard/questCard.html.twig' with {'elem': elem} %}
{% endfor %}
</div>
{% set lastPartOfQuests = quests|slice(2,quests|length) %}
{% for elem in lastPartOfQuests|batch(3) %}
<div class="row rowQuest">
{% include ':appviews/elements/questCard:questCard.html.twig' with {'elem': elem} %}
</div>
{% endfor %}
PS i still don't understand why i can't use for cycle without batch.
{% for elem in first2Quests %}
{% include 'appviews/elements/questCard/questCard.html.twig' with {'elem': elem} %}
{% endfor %}