I am in the process of converting a Python3/Flask back-end (with many jinja2 templates) to a PHP5.6/Twig1 backend. However, while many of the templates transfer nicely to the Twig (since the syntax is very similar), I'm having difficulty figuring out how to replace the url_for function from Jinja.
I'm confused as to how this is solved, since it would seem that the url would be dependent on the location of the template (and since I have my templates organized into different directories, the amount of ".."s I use would have to vary based on where the template is (or it could depend on the .php file that's rendering the template, and that has the same problems...)
Here's an example template:
<!DOCTYPE html>
<html lang="en">
<!-- begin -->
<head>
<title>{% block title %}{% endblock %} | Business Name</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="{{ url_for('static', filename="img/favicon.ico") }}">
<link rel="stylesheet" href="{{ url_for('static', filename="css/bootstrap.min.css") }}">
<link rel="stylesheet" href="{{ url_for('static', filename="css/bootstrap-theme.min.css") }}">
<link rel="stylesheet" href="{{ url_for('static', filename="css/font-awesome.min.css") }}">
<link rel="stylesheet" href="{{ url_for('static', filename="css/base.css") }}">
{% block css %}{% endblock %}
</head>
<body>
<header>
{% include "templates/header.html" %}
</header>
<main>
{% block main %}{% endblock %}
</main>
<footer class="container-fluid" style="position:fixed">
{% include "templates/footer.html" %}
</footer>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
{% block js %}
{% endblock %}
</body>
<!-- end -->
</html>
Related
I have a page where css isn't applied. i have a folder inside templates called animal and it contains 2 files adopt.html.twig and index.html.twig and the base.html.twig. Why css isn't applied to adopt.html.twig?.
My code is:
adopt.html.twig
{% extends 'base.html.twig' %}
{% block title %}Adopt an animal!{% endblock %}
{% block body %}
<ul>
<li class="articleItem">
<img src="/dog.png" alt="article icon">
<h4>Thanks ! </h4>
<p>{{ animal.name }} is your new Compagnon </p>
<button class="button">Go back</button>
<button class="button">See adoptions</button>
</li>
</ul>
{% endblock %}
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</head>
<body>
{% block head %}
{% include 'partials/header.html.twig' %}
{% endblock %}
{% block body %}{% endblock %}
{% block footer %}
{% include 'partials/footer.html.twig' %}
{% endblock %}
</body>
</html>
</html>
Your css/style.css is linked relative to current URL. So it works on mainpage but not for any subpage URL (In Symfony this means any controller with #Route other than /).
So if You open https://your.domain.tld/, browser would read style.css from https://your.domain.tld/css/style.css. But if You open https://your.domain.tld/adopt/, browser try to read style.css from https://your.domain.tld/adopt/css/style.css.
In Symfony this could be fixed by using
<link href="{{ asset('css/styles.css') }}" rel="stylesheet" />
instead of:
<link href="css/styles.css" rel="stylesheet">
Please, read Creating and Using Templates: Linking to Assets
I'm trying to color the background of readonly input text in my Django templates. I'm being brief in code because the only thing is not working is the color background.
I'm using the field 'rua' as the example. Maybe the problem is with the link of 'my own css' inside the base.html. This file is inside the same folder of the 'style.css':
My forms.py:
'rua': forms.TextInput(attrs={'readonly': 'readonly', 'id': 'rua', 'class': 'readonly'}),
My template:
{% extends "base.html" %}
{% load static %}
{% block content %}
<script src="https://cdn.rawgit.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<!-- customer login start -->
<div class="customer_login">
<div class="container">
<div class="row">
<!--register area start-->
<div class="col-lg-6 col-md-6 mx-auto">
<div class="account_form register">
{% if register_edit == 'register' %}
<p>{{ msg }}</p>
<h2>Não tem conta? Registre-se!</h2>
<form method="post" action="{% url 'account:register' %}">
{% else %}
<h2>Altere os dados da sua conta</h2>
<form method="post" action="{% url 'account:edit' %}">
{% endif %}
{% csrf_token %}
<div>{{ user_form.as_p }}</div>
<div>{{ profile_form.as_p }}</div>
<p><button type="submit">Enviar</button></p>
</form>
</div>
</div>
<!--register area end-->
</div>
</div>
</div>
<!-- customer login end -->
<script src="{% static 'js/cadastro.js' %}" type="text/javascript"></script>
{% endblock %}
My base.html
{% load static %}
<!doctype html>
<html class="no-js" lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Denise Andrade - Store</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="{% static 'img/favicon.ico' %}">
<!-- CSS
========================= -->
<!-- Plugins CSS -->
<link rel="stylesheet" href="{% static 'css/plugins.css' %}">
<!-- Main Style CSS -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<!-- My Own Style CSS -->
<link rel="stylesheet" href="{% static 'css/mystyle.css' %}">
<!-- Os dados dentro do link 'https://code.jquery.com/jquery-1.11.3.min.js'
do JQUERY do CardJS foram substituídos dentro do arquivo abaixo 'js/plugins.js'
O arquivo 'js/plugins.js' é responsável por rodar o 'cart' na lateral
-->
<script src="{% static 'js/plugins.js' %}"></script>
</head>
My mystyle.css
// Backgroud color in disabled fields (rua, cidade, uf, etc) # register page
.readonly{
background-color: #f6f6f6;
}
The funny thing is: if I insert the CSS code above inside the template, the code works perfectly. But trying to call 'mystyle.css' it does not work.
Any help?
Thank you
I'm trying to override FOSUser Template and add some html items to my pages, I got this error :
Unexpected token "end of template" of value "" ("end of statement block" expected).
here is the base.html.twig page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other
head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
{% block stylesheets %}{% endblock %}
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
{% stylesheets
"css/myStyle.css"
%}
<link rel="stylesheets" href="{{ asset_url }}">
<title>{% block title %}Hello!{% endblock %}</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<![endif]--> </head>
<body>
{% block topnav %}
{% include '::topnav.html.twig' %}
{% endblock %}
<div class="container">
{% block content %}{% endblock %} </div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
{% block javascripts %}{% endblock %}
this is the layout.html.twig page :
{% extends '::base.html.twig' %}
{% block content %}
<div>
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
{{ 'layout.logged_in_as'|trans({'%username%':
app.user.username}, 'FOSUserBundle') }} |
<a href="{{ path('fos_user_security_logout') }}">
{{ 'layout.logout'|trans({}, 'FOSUserBundle') }}
</a>
{% else %}
<a href="{{ path('fos_user_security_login') }}">{{
'layout.login'|trans({}, 'FOSUserBundle') }}</a>
{% endif %}
</div>
{% if app.request.hasPreviousSession %}
{% for type, messages in app.session.flashbag.all() %}
{% for message in messages %}
<div class="flash-{{ type }}">
{{ message }}
</div>
{% endfor %}
{% endfor %}
{% endif %}
<div>
{% block fos_user_content %}
{% endblock fos_user_content %}
</div>
{% endblock %}
Your style sheet must be declared as follow
{% stylesheets
'path/to/style.css' %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
your endstylesheets is missing
Have a look there
https://symfony.com/doc/current/assetic/asset_management.html#including-css-stylesheets
Refer to official documentation :
How to override templates : http://symfony.com/doc/master/bundles/FOSUserBundle/overriding_templates.html
How to override FormType : http://symfony.com/doc/master/bundles/FOSUserBundle/overriding_forms.html
I have base.twig like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=996">
<meta name="description" content="{{ meta_description }}">
<meta name="author" content="">
<link rel="icon" href="{{ assets_url }}img/ico.png">
<title>{{ meta_title }}</title>
<link rel="stylesheet" href="{{ assets_url }}css/main.css">
<script src="{{ assets_url }}js/jquery-1.11.3.min.js"></script>
<script src="{{ assets_url }}js/plugin.js"></script>
<script src="{{ assets_url }}js/main.js"></script>
</head>
<body>
{% include 'partials/header.twig' %}
</body>
</html>
I tried to import header.twig in base.twig but not working and still getting error message like this :
Fatal error: Uncaught Twig_Error_Syntax: A template that extends another one cannot include contents outside Twig blocks. Did you forget to put the contents inside a {% block %} tag?
And this is header.twig file :
{% extends "base.twig" %}
<!-- my content header is here -->
What did i miss? What's wrong with my code ?, I read in https://twig.sensiolabs.org/doc/2.x/. Please give me solution or something. Thanks.
Just remove extending from header.html.twig. Read the documentation.
Template which extends some parent template cannot be included in the parent, because there is an infinite loop.
If you want to separate part of code, just split it to another twig and include it.
But if you want to create independent template which bases on another then the template have to extends base.html.twig.
E.g. articles.html.twig which extends base.html.twig, which has included header.html.twig.
In code:
base.html.twig
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
{% include 'partials/header.html.twig' %}
{% block body %}
{% endblock %}
</body>
</html>
header.html.twig
<div>
my header
</div>
articles.html.twig
{% extends base.html.twig %}
{% block body %}
<div>
articles content
</div>
{% endblock %}
Now, your rendered articles.html.twig from your controller, should look like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div>
my header
</div>
<div>
articles content
</div>
</body>
</html>
your base.twig should look like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=996">
<meta name="description" content="{{ meta_description }}">
<meta name="author" content="">
<link rel="icon" href="{{ assets_url }}img/ico.png">
<title>{{ meta_title }}</title>
<link rel="stylesheet" href="{{ assets_url }}css/main.css">
<script src="{{ assets_url }}js/jquery-1.11.3.min.js"></script>
<script src="{{ assets_url }}js/plugin.js"></script>
<script src="{{ assets_url }}js/main.js"></script>
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
and in your header.twig file
{% extends 'base.twig' %}
{% block body %}
// your content goes here
{% endblock %}
i tried it will work fine...
otherwise if you want to include the header in the base file. then just add the
{% include 'partials/header.twig' %}
inside the block body in the base file.
I have an issue with pdf creation on Snappy pdf Bundle: it seems not to load the css file I try to import.
I even tried by using an absolute url but it doesn't work either.
this is my code:
{% block body %}
{# Layout for PDF files #}
<p>Cliente: {{ cliente.nome }}</p>
{% endblock %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> </script>
<link rel="stylesheet" type="text/css" href="{{ asset('main.css') }}">
<link rel="stylesheet" href="{{ asset('base.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('fancy.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('./main1.css') }}"/>