Newbie question I presume: How do I change some CSS property (// change background image of parent div) of the parent element from within the logic in the HTML template? Do I really need to implement JS for this?
<div class="exercise-items-wrapper">
{% if error %}
{{ error }}
{% else %}
{% for x in exercise %}
<div class="exercise-item">
{{x.name}}
{% if x.primary_focus == 'CO' %}
// change background image of parent div
{% endif %}
{% if x.friend_verified %}
<img src="{% static 'main/images/fv.svg' %}" height="14px">
{% endif %}
<p id="exercise-level" class="exercise-level">lv. VII</p>
{% if x.video_verified %}
<img src="{% static 'main/images/vv.svg' %}" height="14px">
{% endif %}
</div>
{% endfor %}
{% endif %}
</div>
If by parent div you're referring to the div with class exercise-item, then the way I've always done this is to simply also write the if-then template block within the class attribute:
<div class="exercise-item {% if x.primary_focus == 'CO' %}special-background-class{% endif %}">
And then define special-background-class in your CSS. Admittedly it doesn't look nice to read, but it works and it's much more maintainable than anything that has to use JS, unless your JS is already well-integrated into your Django app.
Related
I want to call a custom block inside an overwritten theme-block:
{% block file_widget %}
{% if image is not null %}
{{ block('imagePreview') }}
{% endif %}
{{ block('form_widget') }}
{% endblock %}
{% block imagePreview %}
<img src="{{ image.getFullPath | imagine_filter('medium_square') }}"
alt="{{ image.filename }}"/>
{% endblock %}
The imagePreview is not shown.
But it is working when I don't use a block.
And it is also working when I dont use a FormTypeExtension and create an ImageType instead.
So I guess the file_widgetblock still has the scope of the parent form_div_layout.html.twig and there in fact no imagePreview block exists.
So how can I solve this.
I mean now I solved it by removing the block.
But I just want to know if someone has a solution to this.
Maybe there is a way for using reuseable blocks inside of custom form themes in symfony?
Finally I found the solution:
I just did not 'use' the base template explicit.
The form theme worked without this - because symfony falls back the the base form theme when it does not find a block inside the new theme file.
But it seems then you also can not use custom blocks inside this new theme file.
So this works now:
{% use 'form_div_layout.html.twig' %}
{% block file_widget %}
{% if image is not null %}
{{ block('imagePreview') }}
{% endif %}
{{ block('form_widget') }}
{% endblock %}
{% block imagePreview %}
<img src="{{ image.getFullPath | imagine_filter('medium_square') }}"
alt="{{ image.filename }}"/>
{% endblock %}
I encounter a problem with the way Drupal renders Global Custom text.
I need to use Custom text field in my view to wrap fields. The body field has some "style" element inside the HTML but they are removed.
{% if field_titre_rubrique is defined and field_titre_rubrique|length %}
<div class="ancre" id="{{ field_ordre_rubrique }}">
<h1 class="ancreMenu">{{field_titre_rubrique}}</h1>
<div>
{% if body is defined %}
{{body}}
{% endif %}
{% if field_pdf is defined %}
{{field_pdf}}
{% endif %}
</div>
</div>
<div>{{ edit_node }}</div>
{% endif %}
Do I have a solution to keep "style" elements ?
You can use {{ body|raw }} but be sure that you can do this safely.
More about this topic: https://www.drupal.org/node/2296163
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>
i have a lot of time programming in PHP, but im doing my first steps in Symfony.
Im try write Twigg templates, i have a public template in app/Resources/view/public.html.twig.
This file contains: http://pastebin.com/T1KGMfXL.
Now, in CloudBundle, have a base.html.twig:
{% extends '::public.html.twig' %}
{% block main %}
<div class="login_page">
<div class="login_box">
{% block content %} {% endblock %}
</div>
</div>
{% endblock %}
And the content in another twig file. For example, login.html.twig
{% extends 'base.html.twig' %}
{% block content %}
....
{% endblock %}
In the Controller, when an user try http://cloud.man.local/app.php/login:
public function staticAction($sitio)
{
// in this case, $sitio contains "login"
return $this->render("CloudBundle:Default:$sitio.html.twig");
}
So, the problem is that, only shows the footer, not show the content.
Any ideas ?.
You want to override a block which is inside another block, so in your case I think you should try this in the another twig files:
{% block main %}
{{ parent() }}
{% block content %} YOur content {% endblock %}
{% endblock %}
see http://twig.sensiolabs.org/doc/functions/parent.html
Hope it's helpful.
Best regard.
I have such hierarchy of twig files
my main (for controller) twig
{% extends "MainSiteBundle::layout.html.twig" %}
{% block footer_moderator_buttons %}
some buttons
{% endblock %}
{% block content_body %}
<p>hello moderator</p>
{{ include ('MainBlogBundle:_parts:postList.html.twig', {'postList': aPostDraft}) }}
{% endblock %}
postList.html.twig
<div class="post-list">
{% for postSingle in postList %}
{{ include ('MainBlogBundle:_parts:postSingle.html.twig', {'postSingle': postSingle}) }}
{% endfor %}
</div>
postSingle.html.twig
<div class="post">
<div class="post-header">
<a class="title" href="3">{{ postSingle.title }}</a>
</div>
<div class="post-meta">
<div>Date: {{ postSingle.date|date('D M Y') }}</div>
<div>Category: {{ postSingle.getCategory.getTitle }}</div>
<div>Author: {{ postSingle.getUser.username }}
</div>
</div>
<div class="post-body">
<div class="content">
<img width="450" height="200" src="#">
<div class="text">{{ postSingle.content }}</div>
</div>
</div>
<div class="post-footer">
{% block footer_moderator_buttons %}f{% endblock %}
<div>Views: 152</div>
<div>Comments: 1231</div>
<div>
<a class="link" href="#">More... </a>
</div>
</div>
</div>
As you can see last (postSingle.html.twig) has block "footer_moderator_buttons", so how can i change it from main twig (first one) ? Current is not working, what I need change \ do ?
In Twig 1.8 there is embed tag (http://twig.sensiolabs.org/doc/tags/embed.html).
You would have to remove the postList.html.twig file or work around it.
{% embed "MainBlogBundle:_parts:postSingle.html.twig" with {'postSingle': postSingle} %}
{% block footer_moderator_buttons %}
custom buttons here
{% endblock %}
{% endembed %}
So, you question is actually "I want to understand how\what twig can". Well, the answer to that question is: "It can't overwrite blocks from "main" to the smaller ones."
If you want to use twig, you have to stop thinking in php include() way where you make new files and you "PUT" components in them over and over again, components such as header, footer, menu etc.
In twig, you define main twig file with blocks which can be imagined as empty spaces which can, but do not have to, be overwritten. Surely, it still means you can have postList.html.twig as include in some file that extends MainSiteBundle::layout.html.twig. The same goes for postSingle.html.twig.
I think you catch the logic of twig except don't try to overwrite blocks from the wrong side - in this case, from MainSiteBundle::layout.html.twig to it's smaller portions.
how about this:
{% extends "MainSiteBundle::layout.html.twig" %}
....
{% block footer_moderator_buttons %}
{{ parent() }}
{% endblock %}
woops didnt put parent..
the {{ parent() }} will inherit {% block footer_moderator_buttons %}{% endblock %} from extended twig.