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.
Related
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.
On some of my pages I want to embed a toolbar with some generic functionality like sharing, reporting and bookmarking. Currently I do it like this
{# page-detail.html.twig #}
{% extends 'layout.responsive.html.twig' %}
{% block content %}
{% include "toolbar/index.html.twig" with {'foo':'bar'} %}
{# further content... #}
{% endblock %}
As the features of the toolbar require some information about the context it's embedded in, I pass this information in the with-clause. So far so good.
Now, all the buttons are invoking some JavaScript on clicking. Modal windows are popping up, dialogs are displayed, etc. I would like to put the related JS inside the toolbar template but here is the problem:
All my JS-libraries are loaded at the bottom of the page before the closing body-tag. Means, in my toolbar template I have no access to them.
So I thought of the following solutions which I am not really happy with:
move the inclusion of the JS-libraries to the top (loading js slows down page display, also JS would be scattered)
put the respective JS in the javascripts-block in "page-detail.html.twig" (toolbar code is separated from the template code and mixed with the JS-Code needed there)
use the "embed"-Tag and define a JS-Block in the toolbar-Template (won't help as I can access the blocks in the embedding parent template only within the "embed"-Tag)
use the "use"-Tag instead. Well that sounds best so far, however, Code would look like this (assuming toolbar-template defines the blocks "toolbar_content" and "toolbar_js"):
Code:
{# page-detail.html.twig #}
{% extends 'layout.responsive.html.twig' %}
{% use "toolbar/index.html.twig" %}
{% block content %}
{% block toolbar_content %}
{{ parent() }}
{% endblock %}
{# further content... #}
{% endblock %}
{% block javascripts %}
{{ parent() }}
{% block toolbar_js %}
{{ parent() }}
{% endblock %}
... local JS
{% endblock %}
Also in this solution I cannot pass the environment variables anymore using the "with"-clause as it is now used for resolving name-conflicts of the blocks.
I feel like I am missing something. How is it done right? It seems like such a common task.
Additional information
I think not essential for the question but for more clarity, here is how my layout template looks like (not complete just the relevant blocks).
{# layout.responsive.html.twig #}
{% block stylesheets %}
{# bootstrap.css, custom.css, ... #}
{% endblock %}
{% block content %}
{% endblock %}
{% block javascripts %}
{# jquery, bootstrap, ... #}
{% endblock %}
And my toolbar:
{# toolbar/index.html.twig #}
<div class="toolbar btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#report">Report</button>
</div>
<!-- more buttons -->
</div>
I'm freshly new with Django CMS. I'm able to resize something by CSS in Django but that process slows me down so I think it would be faster by using Django CMS. Ok now I got the Welcome page with Django CMS, then I start by adding a picture and surprised that there is not an option to resize it. I found something like sorl_thumbnail package but can't figure out how to integrate the code to my template. Here is from the tutorial of sorl_thumbnail:
{% load thumbnail %}
{% thumbnail item.image "100x100" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
In my feature.html template:
{% extends "base.html" %}
{% load cms_tags staticfiles sekizai_tags menu_tags %}
{% block content %}
<div>
{% placeholder "feature" %}
</div>
<div>
{% placeholder "content" %}
</div>
{% endblock content %}
The tutorial of sorl_thumbnail is useless, it doesn't say where to put their code. I tried to paste the whole thing but no luck. Can you guys help please!
djangocms-picture plugin is rather basic, please check cmsplugin-filer (https://pypi.python.org/pypi/cmsplugin-filer/0.10) plugins for more advanced image plugin
I would also recommend cmsplugin_filer_image as mentioned by #yakky
See: https://github.com/stefanfoulis/cmsplugin-filer/tree/develop/cmsplugin_filer_image
But if you want to continue use djangocms-picture, you'll need to override the plugin template.
Copy the snippet below to cms/plugins/picture.html in your template directory.
{% load thumbnail %}
<span class="plugin_picture{% if picture.float %} align-{{ picture.float }}{% endif %}">
{% if link %}<a href="{{ link }}">{% endif %}
{% thumbnail picture.image "100x100" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
{% if link %}</a>{% endif %}
</span>
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.
My problem:
I have 3 templates:
main.html.twig (main layout file)
layout.html.twig (a bundle specific layout override which contains some bundle specific JS tags)
create.html.twig (a page specific template file which also contains some page specific JS tags)
I am defining a block called 'javascript' in my base layout (main.html.twig), then overriding it (but calling {{ parent() }} in layout.html.twig. This works fine, and the JS tags from the main template file are still included above those in the layout.html.twig template.
I then do the same in the create.html.twig file, overriding the block as follows:
{% block javascripts %}
{{ parent() }}
{% javascripts '#BundleName/Resources/public/js/application.album.uploader.js'
'#BundleName/Resources/public/js/jquery.uploadify.js'
'#BundleName/Resources/public/js/swfuploadify.js' filter='?yui_js' %}
<script src='{{ asset_url }}' type='text/javascript'></script>
{% endjavascripts %}
{% endblock %}
At this point, instead of just overriding the javascript block in the parent (layout.html.twig) and including all the scripts defined in the templates above it, it does the following:
Dumps the <script> tags in the middle of the output (which causes an error, because in my main.html.twig file I am only including the jQuery library at the end of the HTML markup
Then it also dumps the scripts out along with the rest of the others (as I would expect it to)
I am not sure what is causing the scripts to be dumped in the middle of the create.html.twig template, and I'm also confused as to why they're being dumped to the screen twice (once in the middle of the create and then once at the bottom along with all the rest of my scripts from main.html.twig and layout.html.twig.
Has anyone got any ideas? Let me know if anything is unclear or if I can provide some more information.
EDIT:
File contents are below...
main.html.twig: https://gist.github.com/7f29353eaca0947528ce
layout.html.twig: https://gist.github.com/734947e9118b7765715e
create.html.twig: https://gist.github.com/c60c8d5c61e00ff86912
EDIT 2:
I've been having another look at the issue this morning and it looks as though its doing the same thing for stylesheets. I tried to define a new block called pagescripts in my layout.html.twig and then use the block in my create.html.twig but this had the same outcome, it just seems to dump the scripts and stylesheets wherever I use the
{% block pagescripts %}
(scripts here)
{% endblock}
I found the issue. In create.html.twig I was defining my {% block javascripts %} content inside inside my {% block content %}, so I assume Twig was rendering the output of the javascripts block inside the content block.
Moving the {% block javascripts %} content outside of the {% block content %} block fixed the issue.
Here is an example of main.html.twig:
<body>
{% block stylesheets %}
{% endblock %}
{% block jsscript %}
{% endblock %}
{% block content %}
{% endblock %}
</body>
into your create.html.twig
{% extends '::base.html.twig' %}
{% block jsscript %}
my javascript files...
{% endblock %}
{% block content %}
<h1>Create</h1>
<form action="{{ path('entity_create') }}" method="post" {{ form_enctype(form) }}>
{{ form_widget(form) }}
<p>
<button type="submit">Create</button>
</p>
</form>
{% endblock %}
If you still have issue, you can add a document ready function :
$(document).ready(function() {
// put all your jQuery goodness in here.
});