I am new in Drupal 8 and trying to build a custom theme. Overwriting a theme works well for paragraphs, blocks etc. but not for views. I need your help to tell me how to override the markup of a view. I already created a the .twig file in the custom folder and tested it. It works.
That's what I have inside:
{% for row in rows %}
<div{{ row.attributes.addClass(row_classes) }}>
{{ row.content }}
</div>
{% endfor %}
The {{ row.content }} gives me every element I need in the default Drupal view markup. I want to costumize the HTML. such as:
<h1 class="headline">
{row.title}
</h1>
<p class="text">
{row.text}
</p>
<img src="{row.image}" />
I didn't find a way to get the values such as the title from the row. I tried things like row.{field_name} or row.content.{field_name} but nothing works yet. Is there anyway to access these fields by machine name?
The easy way to display the contents would be to set the views to content list with a view mode. For e.g: If you want to display a node content type article with display mode teaser then you will get the node--article--teaser.html.twig getting rendered.
Then you can modify the the twig file in required format.
<h1 class="headline">
{{ node.title.value }}
</h1>
<p class="text">
{{ node.body.value }}
</p>
<img src="{{ node.field_image.entity.uri.value }}" />
Related
I'm building a blog with Django and i'm trying to apply my static design to dynamic HTML templates. I have several CSS classes for diffrenet card types (regular, medium and large), and i'm builing a posts page that should display all posts from all classes.
I'm trying to find a solution for looping through every post and applying different CSS class accordingly.
To sum it up:
i have a posts list in my db
i want to loop over all the posts and assign different pre-defined CSS class to different posts (meaning the "class" should be different for some posts, some should have class "card" and some "large-card", etc)
Any help?
Here is a sample of the html code i refer to:
{% for post in post_list %}
<div class="card">
...
</div>
{% endfor %}
You have various possibilities to do that:
How about just using a the built-in forloop variable (scroll down a bit for a list of availabel variables):
{% for post in post_list %}
<div class="card{{ forloop.counter }}"> {{ post }} </div>
{% endfor %}
You could also make post_list a list of tuples in the backend, i.e. something like post_list = [ ("a", "class_a"), ("b", "class_b")]. Then in the template you can unpack this:
{% for post in post_list %}
<div class="card{{ post.1 }}"> {{ post.0 }}</div>
{% endfor %}
There are more, you can use the built-in regroup for example
I was managed so solve this issue using “Slice” and choosing different posts and then assign different classes when looping over the posts in the database.
I am actually running Sensiolabs Insight analysis on my Symfony 2.8 project.
I have a major issue with some of my Twig templates:
Twig templates should not contain business logic
The associated message is always the same :
Template too complex, depth of 10 is reached but only 5 is allowed.
For example this happens with the following template :
{% extends "FBNGuideBundle::layout.html.twig" %}
{% block title %}
{{ 'fbn.guide.page_title.bookmarks'|trans }}
{% endblock %}
{% block body %}
<div id="bookmarks" data-bookmark-ids="{{bookmarkIds|json_encode()}}">
{% if (restaurants|length > 0) %}
<div class="restaurants">
<h3>MES RESTOS</h3>
{% for bookmark in restaurants %}
<div class="bookmark" id="{{'bookmark-' ~ bookmark.id}}">
{{ bookmark.restaurant.name }}
<br>
<br>
<button>SUPPRIMER DES FAVORIS</button>
<br>
<hr>
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endblock %}
I tried to include in a separated file the code contained inside <div id="bookmarks"></div> and the depth has been reduced, but it is not a solution. I suppose that the problem is the access to some properties through several objects using getters (i.e bookmark.restaurant.slug).
I have a free plan so I am not able to access the documentation related to this warning. Anyone knows how to solve the problem ?
Thanks.
When you have too much logic in the view, you can put it in a custom Twig Extension. An advantage is that you don't need to duplicate the html if you are reusing that part in another page and of course, the code is more clear :)
In your case, you can write a new Twig Extension that renders all the bookmarks.
If you didn't build somethng similar till now, you can read about it here http://symfony.com/doc/current/templating/twig_extension.html
I've been trying to get a clear, simple answer to this, but I can't seem to extract anything that makes sense from either the docs or from stack overflow.
I've implemented the standard templates that come with Django Registration Redux, but I can't seem to work out how to change the form styles and the text copy that are the defaults in Redux.
Here's my html:
{% extends 'base.html' %}
{% block title %}
Registration Form - {{ block.super }}
{% endblock title %}
{% block content %}
<div class="content-wrapper">
<div class="content">
<div class="pure-g">
<div class="is-center pure-u-1">
<div class="pure-u-1-2 thin-box">
<h1>Registration form</h1>
<form role="form" action="" method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Submit" class="s-button"/>
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
As you can see I've styled the button, but none of the elements are available for styling. The redux data must be sitting somewhere, but I've no idea where it is.
Someone on SO has suggested using crispy forms, but I'm using pureCSS rather than bootstrap, and I've already gone to the trouble of setting up a set of form styles that I want to use, so it seems like overkill to install a module with a set of styles that I then have to over-write.
If i understood you correctly you would like to access individual fields. To access them you can get the fields' names here.
So in the template instead of {{ form.as_p }} you could use individual fields like this:
for e.g. {{ form.username }}.
If you also would like to add styling then you need to use filters like:
{{ form.username | add_some_css:"my_new_class" }}. This styling needs to be configured in a separate file for e.g. redux_css.py. To make your template use this file you need to include after {% extends 'base.html' %} the following {% load redux_css %}.
Now you need to create redux_css.py:
from django import template
register = template.Library()
#register.filter
def add_some_css(field, css):
"""
Adds css to fields in Redux templates
"""
return field.as_widget(attrs={"class":css})
All this should make your redux fields (which are text inputs) styled like: class="my_new_class"
Obviously you need to create .css files and "import" them into your .html files.
PS you might need to access fields errors as well, you can do this with {{ form.username.erros }}
I'm using Gantry5 framework (with the g5_hydrogen theme) and I created a twig page template which works fine, except the shortcode for the Contact Form 7 plugin apparently does nothing - the form does not display on the page, and when I inspect the element in my browser I just see some blank space between the div tags. My current markup is something like this:
{% block content %}
<content>
<div class="dbc-contact-form">
{{ wp.do_shortcode('[contact-form-7 id="1234" title="Contact"]') }}
</div>
</content>
{% endblock %}
Someone else posted a similar question before, but unfortunately that solution doesn't help in my case - Wordpress twig template shortcode not displayed
Thanks for your help with this.
Try this - {{ post.post_content|shortcodes }}
I have a module for manage images inside my Sonata Admin. I want to display those images where sonata logo is placed, how I can do that? I have the code for get the images in my controller and also the template to display the image but don't know how to use this from Sonata, any advice?
You can override the sonate base template (like you overide any other template) or any block listed inside of it.
there is a block called logo and it looks like this
{% block logo %}
<a href="{{ url('sonata_admin_dashboard') }}" class="brand">
<img src="{{ asset(admin_pool.titlelogo) }}" alt="{{ admin_pool.title }}" />
{{ admin_pool.title }}
</a>
{% endblock %}
In combination with a Twig-Extension it should be no problem to fetch the image out of the database