I made an upgrade of my SF version (2.0.18 to 2.2) and i have trouble with render routing on a twig template.
Error message :
An exception has been thrown during the rendering of a template ("No route found for "GET Security:login"") in "OlrLoanBundle:Default:index.html.twig".
my layout :
<body>
<div id="main" class="container">
<div class="row-fluid">
<div class="span4">
<img src="{{ asset('img/logo.jpg') }}"/>
</div>
<div class="span8">
{% render "FOSUserBundle:Security:login" %}
<img src="{{ asset('img/pub.jpg') }}"/>
</div>
</div>
{% block content %}{% endblock %}
</div>
<div id="footer" class="left a-left">
{% block footer %}
{% endblock %}
{% block javascripts %}
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="{{ asset('js/bootstrap.min.js') }}"></script>
{% endblock %}
</div>
</body>
i have the same trouble on a template :
{% extends '::base.html.twig' %}
{% block content %}
<div class="row-fluid">
<div class="span7">
{% render "OlrLoanBundle:Demande:index" %}
{% render "OlrLoanBundle:Demande:tribu" %}
{% render "OlrLoanBundle:Objet:index" %}
</div>
</div>
<div class="span5">
<img src="{{ asset('img/pub-carre.jpg') }}"/>
{% render "OlrLoanBundle:Tribu:index" %}
</div>
</div>
{% endblock %}
Yeah, happened to me as well. This is, however, desired behavior as it is stated in official blog:
Since Symfony 2.0.20/2.1.5, the Twig render tag now takes an absolute
url instead of a controller logical path. This fixes an important
security issue (CVE-2012-6431) reported on the official blog. If your
application uses an older version of Symfony or still uses the
previous render tag syntax, you should upgrade as soon as possible.
Good luck fixing code ;)
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 want to create a page in grav, where I have a content area and a sidebar area.
I want to use on modular.md root template in which I refer to a template that loops and displays both content and sidebar modules.
My problem is: how to distinguish between content and sidebar?
my template looks like this:
{% block body %}
{% block content %}
<section id="info">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-8">
<div id="content" class="site-content bg">
<h2 class="heading">{{ page.title }}</h2>
{{ page.content }}
{% for module in page.collection() %}
{{ module.content }}
{% endfor %}
</div>
</div>
<div id="sidebar" class="col-sm-4 sidebar-inner">
{% for module in page.collection() %}
{{ module.content }}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% endblock %}
What I try to achieve is to use filters on both page.collections, so that in one case only "content" (taxonomy.tag was my guess here) and in the other case only sidebar is used.
I could live with naming conventions (sidebar modules have a fixed prefix), but I can't figure it out.
okay, I came along with a hack: I include 'sidebar' in the folder name of the module and filter on module.folder name. I am convinced there is a better solution, though!
<section id="info">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-8">
{% if page.content %}
<div id="content" class="site-content bg">
<h2 class="heading">{{ page.title }}</h2>
{{ page.content }}
</div>
{% endif %}
{% for module in page.collection() %}
{% if 'sidebar' not in module.folder %}
{{ module.content }}
{% endif %}
{% endfor %}
</div>
<div id="sidebar" class="col-sm-4 sidebar-inner">
{% for module in page.collection() %}
{% if 'sidebar' in module.folder %}
{{ module.content }}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
What you can do (I think) is set a value in the fromtmatter of the module
sidebar: true
Then you can filter on that value in your collection like
{% for module in page.collection() %}
{% if page.header.sidebar %}
{{ module.content }}
{% endif %}
{% endfor %}
I am very new to web development and Django. I am following a tutorial called "Try Django 1.8".
In this code I am supposed to change the background-color of jumbotron to #155A1E.
If I press shift + refresh in google chrome, the color shows up then it changes back to gray. When I inspect the code in google chrome, I can see in the styles tab that the background-color in the .jumbotron{} has a strike-through. Also there is another verion of .jumbotron{} in the styles tab that has a background-color and has a check. If I uncheck the box, the color gets fixed.
How can I fix this in Django?
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block head_title %}Welcome | {{ block.super}}{% endblock %}
<style>
{% block style %}
.jumbotron {
background-color: #155A1E;
}
{% endblock %}
</style>
{% block jumbotron %}
<div class="jumbotron">
<div class='container'>
<div class="row">
<div class='col-sm-6'>
<h1>Try Django 1.8</h1>
<p>Some text here!!! This text should be long so that we can test the columns in the webpage. So here we go. We are trying to make this line as long as possible.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">Join us »</a>
</p>
</div>
<div class='col-sm-6' style="background-color:black;height:300px">
</div>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="row">
<div class="row">
</div>
<div class="col-xs-3 pull-right">
<p class='lead text-align-center'>{{ title}}</p>
<!--{{ user }}-->
<!--<!–{{ request.user }}–>-->
<!--abc is = {{ abc }}-->
<form method='POST' action=''>{% csrf_token %}
{{ form|crispy }}
<input class='btn btn-primary' type="submit" value="Signup" />
</form>
</div>
<div class='col-sm-3'>
<p class='lead text-align-center'>Built with Django & Bootstrap</p>
</div>
<div class='col-sm-3'>
<p class='lead text-align-center'>created for starters of all kinds.</p>
</div>
<div class='col-sm-3'>
<p class='lead text-align-center'>Always open source.</p>
</div>
</div>
{% endblock %}
You can add do important to your css attribute.
Just like that:
.jumbotron {
background-color: #155A1E!important;
}
It will be taken instead of the default one
It may be very late to answer the question but could help someone who is doing the tutorial now as myself.
Problem is your style should come under the
{% block jumbotron %}
otherwise its never been executed.
Here it is
{% block jumbotron %}
<style>
{% block style %}
.jumbotron {
background-color : #1e78d2 !important;
}
{% endblock %}
</style>
<div class="jumbotron">
<div class="container">....... {% endblock %}
Hope it helps someone
Makesure source of bootstrap is before your style source, and example:
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" media="all">
<link href="{% static 'css/your_style.css' %}" rel="stylesheet" media="all">
I am not able to apply the CSS to the jinja2 templates.
I think it should work, but dont know where i am missing it.
My Layout:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
<link rel="stylesheet" href="{{url_for('static', filename='bootstrap.min.css')}}">
<title>
{% block title %} {% endblock %}
</title>
</head>
<body>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-9'>
{% block body %} {% endblock %}
</div>
<div class='col-md-3'>
Menu
</div>
</div>
</div>
</body>
</html>
Home page:
{% extends "layout.html" %}
{% block title %}
Home
{% endblock %}
{% block body %}
<div class="row">
<div class="col-md-6 min-data">
My Lappy - DELL VOSTRO
</div>
<div class="col-md-6 min-data">
<img class="pull-right" src="http://placehold.it/360x203">
</div>
</div>
{% endblock %}
The CSS file:
.min-data {
background-color: green;
}
The Home page is rendered properly but the the background color is not getting applied as green in the div in the home page.
I think you are trying to Chrome browser for this issue. Please try another browser like firefox latest version.