I have an existing django application that includes its own templates, now I want to use the capability of django CMS to enable the editing and updating of content in the front end easily. I have read the documentation and I understand that you use {% placeholder "" %} to include sections that you want to update, but I'm still not sure how or where to place the tags on my template or how to create them on the django CMS admin either.
Any explanation on this would be really appreciated.
Here's an example base template I've got;
<!DOCTYPE html>
{% load cms_tags menu_tags sekizai_tags cache i18n %}
{% load static from staticfiles %}
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
{% render_block "css" %}
{% render_block "js" %}
</head>
<body class="body-page">
{% cms_toolbar %}
{% block header %}
{% block banner %}{% endblock banner %}
<header class="masterhead container-fluid">
<div class="row">
</div>
{% show_menu 1 100 100 100 "partials/menu.html" %}
</header>
{% endblock header %}
<div class="container-fluid">
{% block content %}
{% endblock content %}
{% block highlights %}
{% endblock highlights %}
</div>
</body>
</html>
The important part is to include {% cms_toolbar %} at the beginning of the <body> which gives you the CMS menu. If you then include cms_tags you can use the placeholders and if you include menu_tags you can generate menus from your page tree.
Related
I am currently working on a Symfony 6 Project together with Twig and Tailwind CSS.
I installed everything regarding this guide here:
https://tailwindcss.com/docs/guides/symfony
I am capable to use (some) tailwind css elements, my Webpack Encore loads through PostCSS the needed tailwind configurations and builds the assets under public/build/ directory.
The base.html.twig loads the build assets
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
{% block title %}Welcome!
{% endblock %}
</title>
<link
rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{{ encore_entry_script_tags('method2') }}
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
so I can finally use them inside index.html.twig (which extends the base.html.twig)
{% extends "base.html.twig" %}
{% block title %}
Movies Page
{% endblock %}
{% block body %}
<div class="bg-blue-500 text-2xl text-center font-bold">
{% for movie in movies %}
<li>{{movie.title}}</li>
<p class="animate-ping">{{movie.releaseYear}}</p>
{% endfor %}
<img class="p-1 bg-white border rounded max-w-sm" src="{{asset('images/image1.jpg')}}"/>
</div>
{% endblock %}
As you can see, I try to apply tailwind properties on an example header and image.
However, the tailwind css properties regarding the header are working, but not for the image. Inspecting this inside the browser also doesn't show me the css values for given properties. I want my image smaller and framed with a border like here:
This is the result:
I've found the issue: It was related to the path of the actual image.
Before it was stored under assets/images/image1.jpg
And I used it inside the twig template like so:
<img class="p-1 bg-white border rounded max-w-sm" src="{{asset('images/image1.jpg')}}"/>
Now, I used the .copyFiles() Function of Webpack Encore to store the images under public/build/images
webpack.config.js
.copyFiles({
from: "./assets/images",
to: "images/[path][name].[hash:8].[ext]",
//uses regex pattern
pattern: /\.(png|jpg|jpeg|gif)$/,
})
now, when I address it from the public build path (regardless of hash) it is working:
<img class="max-w-full h-auto rounded-full" src="{{asset('/build/images/image1.c3b846ce.jpg')}}"/>
I guess this was somehow webpack related in some asnychronous processes. I will edit the question.
I am awfully new to Symfony 4 and Twig 2.
All I want to do is get the basic functionality of extending templates to work.
Unfortunately the documentation of Symfony and Twig do not explain what I am looking for (Twig documentation is mostly just a collection of code with only minimal explanations). Or I don't understand... :)
This is simple.
I got the usual base.html.twig:
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
</head>
<body>
{% block body %}Old Content{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
I only added some default text into the body block.
Next a simple file that should extend the one above:
body.html.twig
{% extends "base.html.twig" %}
{% block body %}
New content
{% endblock %}
To output all this I created a controller:
baseController.php
<?php
namespace App\Controller;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
class baseController extends AbstractController
{
/**
* #Route("/")
*/
public function base()
{
return $this->render('base.html.twig');
}
}
?>
Tested the templates in twigfiddle.com and all worked well, so they are surely fine.
The above setup outputs the base.html.twig just fine (see the "Old Content" text, but completely ignore the body.html.twig. So the obvious question: what am I overlooking/which basic concept am I not grasping?
Thank you for your kind help.
base.html.twig is your skeleton and body.html.twig is your page specific implementation. Your controller should always render the body.html.twig, which will override blocks found inside the extended base.html.twig.
Some examples from the top of my head:
base.html.twig:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
</head>
<body>
{% include 'header.html.twig' %}
{% block body %}{% endblock %}
{% include 'footer.html.twig' %}
</body>
{% block javascripts %}{% endblock %}
</html>
home.html.twig:
{% extends "base.html.twig" %}
{% block body %}
<h1>header of this page</h1>
{% include 'newsletter-subscribe.html.twig' %}
{% include 'greeting.html.twig' with { name: 'Max' } %}
<p>Some content</p>
{% endblock %}
greeting.html.twig:
Hello {{ name }}
just creat the header and footer yourself. ensure you render home.html.twig in your controller.
If you want to dive into it and must use nested blocks, make use of https://twig.symfony.com/doc/2.x/functions/parent.html
base.html.twig:
{% block body %}
Hello World
{% endblock %}
home.html.twig:
{% extends 'base.html.twig' %}
{% block body %}
{{ parent() }}
how are you
{% endblock %}
should output Hello world how are you. I would discourage that function though, because the dependency is not clear from a designers perspective. Also be careful with embed, it has a higher impact on twig then include or simple blocks.
I'm following a tutorial about symfony2 framework ..
I've already managed to render a template which inherits from the base layout as follows
# ::layout.html.twig > MyvendorBlogBundle:blog:index.html.twig
# then inside the controller action, call
$this->render('MyvendorBlogBundle:Blog:index.html.twig', ['foo'=>'bar']);
I decided to add an intermediate template in between but I'm having trouble to make twig templating engine to render my 3 layouts cascaded templates: As mentioned above, i'm not able to get any output using the following schem but a blank page instead (no raised exceptions and the source only contains the base.html.twig code)
# ::layout.html.twig > MyvendorBlogBundle::layout.html.twig > MyvendorBlogBundle:blog:index.html.twig
Here are my templates
base (app/Ressources/views):
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
<div id="app-container">
<header id="app-header">
</header>
<div id="app-page-content">
{% block body %}{% endblock %}
</div>
</div>
{% block javascripts %}{% endblock %}
{# FLASH BAG HANDLING #}
{% for label, flashes in app.session.flashbag.all %}
{% for flash in flashes %}
<div class="alert alert-{{ label }}">
{{ flash }}
</div>
{% endfor %}
{% endfor %}
</body>
</html>
Then the blog bundle layout (src/Myvendor/BlogBundle/Resources/views):
{% extends "::base.html.twig" %}
{% block body %}
{% block side %}
<div id="blog-side">
<nav>
1rst link
</nav>
</div>
{% endblock %}
{% block main %}{% endblock %}
{% endblock %}
Now the index page template (src/Myvendor/BlogBundle/Resources/views/Blog):
{% extends "MyvendorBlogBundle::layout.html.twig" %}
{% block main %}
<h1>{{ caption }} !</h1>
{% if caption is not empty %}
{{ caption }}
{% endif %}
{% endblock %}
And finally the controller
namespace Myvendor\BlogBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Response;
class BlogController extends Controller
{
public function indexAction()
{
return $this->render('MyvendorBlogBundle:Blog:index.html.twig', ['caption'=>'hello!']);
}
}
May someone spot what's going on here ?
The pb maybe obvious but I've been stuck for a couple of hours now and blocks nesting seems perfect to me :/
First: I'm new to Symfony2, just writing my first project.
I am writing a gallery which I want to use in several Symfony-Projects.
My general Idea is to have the entire gallery in a bundle. The API should just be a single ContollerAction from the gallery-Controller.
I want to include the gallery in a website by calling
WebsiteTemplate:
{{ render(controller( "MyGalleryBundle:Gallery:build")) }}
This WebsiteTemplate is extending from a baseTemplate with blocks for css, js, etc...
BaseTemplate:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8" />
[...]
<title>{% block title %}{% endblock %}</title>
{% block head %}
{% block css %}{% endblock %}
{% block js %}{% endblock %}
{% endblock %}
</head>
<body>
{% block menu %}{% endblock %}
{% block body %}{% endblock %}
</body>
</html>
It seems, that everything is working fine (html-structure is rendered in the right place) but the css isn't beeing putted into the head of the html-file, but instead right in the html scope, which causes that no css is beeing parsed.
I was trying to achieve it by simply calling the blocks from the bastTemplate like so:
[ setting some twig variables ]
{% block head %}
{% block css %}
{% stylesheets
'bundles/doublebeatsgallery/css/base.css'
'bundles/doublebeatsgallery/css/picture.css'
'bundles/doublebeatsgallery/css/page.css'
output="bundles/doublebeatsgallery/css/compiled/main.css"
%}
<link type="text/css" href="{{ asset_url }}" rel="stylesheet">
{% endstylesheets %}
<script type="text/css">
{% set tpl = galleryConfig.look.template %}
.tmpl_box:hover {
z-index: 5;
margin-left: -{{(tpl.popUpWidth - tpl.width)/2}}px;
margin-top: -{{(tpl.popUpHeight - tpl.height)/2}}px;
}
</script>
{% endblock %}
{% endblock %}
<div id="galleryHeader" class="galleryBaseContainer backA">
<div id="pContainer"><span>{{selectedGallery}}</span></div>
</div>
[... rest of html ]
You do not have to override the head block itself, just the inner css block. Not sure if this solves your problem, but you could give it a try.
Is it possible to override a template block from a twig extension? How do I do it?
Edit:
I have a block in my master layout template, it is called {% block emailMenu %}, the question is, is it possible to override this block, not from another template but from inside a twig custom function?
I guess I'm confused as the best way to handle my situation, my email menu will change from page to page depending on several factors, and I thought of making a twig function to be called from the layout or from another template, the reason I am thinking along these lines is to keep my other templates free from a lot of logic, logic that I'd rather have with pure PHP. Any thoughts would be appreciated.
You can just render additional controller (not a twig extension) which renders own template (possibly dependent on the page), which overrides base template block.
I think, overriding block from twig extensions - it is not the twig purposed for.
You must create a base template:
{# src/BW/MainBundle/Resources/views/Main/base.html.twig #}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{% block title %}Test Application{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul>
<li>Home</li>
<li>Blog</li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block body %}{% endblock %}
</div>
</body>
</html>
And then extends parent template with extends keyword:
{# src/Acme/BlogBundle/Resources/views/Blog/index.html.twig #}
{% extends 'BWMainBundle:Main:base.html.twig' %}
{% block title %}My cool blog posts{% endblock %}
{% block body %}
{% for entry in blog_entries %}
<h2>{{ entry.title }}</h2>
<p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}
Also read this docs about templating in Symfony using Twig.