New answers tagged theming
1
Moving the templates to the Templates folder themes/THEMENAME/templates has solved the problem. I also had to change the path in the THEMENAME.layouts.yml
0
I recently needed this myself with the twist that I wanted to provide a default (svg) image when no image was uploaded. Twig Tweak makes this possible while still allowing me to control the output via Drupal's user interface.
In my case, I'm styling a comment, so I want to render the user picture, and I'd like to use the "thumbnail" image style. This is ...
0
Pay attention to @my_theme syntax it refers to themes/my_theme/templates folder while the desired template is located into themes/my_theme/layouts folder.
So what I suggest is to use a relative path to include the template, something like that:
{% include '../../../themes/bootstrap_sbv/layouts/sbv-personenseite-layout.html.twig' %}
1
I don't think there is a node object in the node.add route, it doesn't exist there yet. But you can still get it from the node_type parameter. Untested, but following the code from NodeController.php you should be able to get the label with something like this:
//get the machine name from route
$machineName = \Drupal::routeMatch()->getParameter('...
0
try to print it this way it gives you more control :
<div id="candidature_spontanee" class="form-contact candidature_spontanee">
{# 1.use the attribute to set the form action and other attributes #}
<form{{ attributes }}>
{{ title_prefix }}
{{ title_suffix }}
{# 2.print the form elment using : {{ element.elements.key }} #}
<div ...
0
the question is not clear but as I understand you want to pass the node type readable name to the template and this is the easiest way :
function THEMENAME_preprocess_page(&$variables){
//Get the current page rendered node(s).
$node = \Drupal::routeMatch()->getParameter('node');
if ($node instanceof \Drupal\node\NodeInterface) {
// You can ...
0
if ($node = \Drupal::routeMatch()->getParameter('node')) {
There's no node ID in the route at /node/add/foo, so there's no node available, and that condition will always be false.
You need to create the node yourself, e.g.
// Get the desired type from the route.
if ($node_type = \Drupal::routeMatch()->getParameter('node_type')) {
$node = \Drupal::...
1
Ok,
I solved it like this:
function THEMENAME_preprocess_views_view_field(&$variables) {
$view = $variables['view'];
$field = $variables['field'];
$rows = $variables['rows'];
if ($view->id() == 'VIEW_NAME' && $view->current_display == 'DISPLAY_NAME') {
if ($field->field == 'FIELD_NAME') {
foreach ($view->field as $fieldId => $field) ...
0
To get the uri of remote video in node--page.html.twig try with:
node.field_video.entity.field_media_oembed_video.value
3
As @Clive commented you need a node list cache tag.
Put the slides and the cache tag when you invoke the template in the build array (not in a hook_theme(), this hook is only called when you install the module):
class SliderBlock extends BlockBase {
public function build() {
$build = [
'#theme' => 'slider_block',
'#slides' => ...
2
As mentioned on the comments by @Clive and @leymannx, you need to use cache tags to do the job. The problem is with your current approach will be tricky since your nodes are being loaded by your theme hook. Would be much cleaner and Drupal-way of doing things if you refactor your code and make your nodes loaded by the block, so your theme hook can focus on ...
0
It sounds like you're off to a good start. Next, you'll need to add a new field to your content type for links to external news articles.
Home >> Administration >> Structure >> Content types >> News >> Manage fields
/admin/structure/types/manage/news/fields/add-field
Add a new field of type Link and label it something like ...
0
You can add Attachment to a view.
And Page: filter -> contenttype 1
Attachment: filter -> contenttype2
0
As Berdir says, you can do this easily if you use an image style specific to your field/need.
function THEMENAME_theme_suggestions_image_alter(array &$suggestions, array $variables) {
$suggestions[] = 'image__' . $variables['style_name'];
}
1
You can attach custom tags to any render array from where it bubbles up into the HTML head. In the following sample I'm adding structured data when a certain block is viewed. $value then contains what's being printed between the opening and closing script tag.
/**
* Implements hook_block_view_BASE_BLOCK_ID_alter().
*/
function ...
0
I don't think you can get the value of field from paragraph field inside views-view-unformatted.twig all you can get is the target_id of referenced paragraph using view.result[key]._entity:
I suggest to use template_preprocess_views_view_unformatted like the following:
function YOURTHEME_preprocess_views_view_unformatted(&$variables) {
$view = $...
0
but if I add an extra field to the paragraph type, it is not updated.
I would like to render all fields, even if I add a new field in the
future.
To answer the question, you just need to loop though the paragraph fields.
{% for item in node.field_intro %}
{% for paragraph_field in item.entity %}
{% if 'field_' in paragraph_field %}
{{ ...
1
What you are looking for is called theme suggestions you can implement your own or alter existing ones. In this case since the theme hook is provided by another module (core) you need to alter the provided suggestions and add your own.
Check this post with useful examples. Also core's always have excelent examples (Bartik theme example).
/**
* Implements ...
0
The error is about accessing field_dark_theme from an un-existing node instance. The proper way of loading the node during preview is explained here.
On the other hand, welcome to the wonderful world of PHP for debugging properly (on Drupal), please check this post and this documentation entry check your proper IDE/stack on how to setup debugging tools.
1
create exposed form filters template following this naming standard:
views-exposed-form--{view-name}--{display-name}.html.twig
to get the view-name you can get from Backoffice (Structure > Views > search for your view > then get machine name and repalce the underscore with dash - see image bellow)
so we get this template:
views-exposed-form--media-...
1
It depends a little on how your Paragraph is structured. Is it a single paragraph type with multiple generic fields in it or a paragraph with multiple other paragraph types inside of it?
If it's the latter, you have to create two twig files (For the parent and the child) but you can control output for each row and the contents of each row.
Alternatively, ...
0
Currently, the Views Exposed Form Fieldset module is probably the way to go as that is actively supported and has both Drupal 7 and 8 versions.
2
The Easy way in Views UI add field_link 2 times.
in 1) Exclude from display, Select url only, and Show url as plain text.
which will give you the url only.
in 2) Exclude from display, and REWRITE RESULTS -> Strip HTML tags
which will give you the title only.
Then in a custom field you can use twig URL: {{ field_link }} Url Title: {{ field_link_1 }}
...
1
I have found how to resolve this specifically if using the Tailwind framework, which I am.
You can use the @apply function of the framework to add classes based on common Drupal class names, or ones you specify in your custom html.twig files.
Documentation here: https://tailwindcss.com/docs/functions-and-directives/#apply
I am using the Tailwind Starter ...
0
I found a method that is similar to the answer by @chris-ruppel, but a bit more elegant IMHO. It uses the keys filter to get an array of available indexes. I use it to build an HTML list.
<ul>
{% for i in content.field_foo['#items']|keys %}
<li>{{ content.field_foo[i] }}</li>
{% endfor %}
</ul>
0
I found out the answer. Share here if someone needed in the future.
I think if we want to define the twig template based on the checkout flow, we shouldn't create ones using the same plugin. (default is Multistep - Default)
Instead, we need to create a new plugin for the checkout flow. I followed the instruction here. https://docs.drupalcommerce.org/...
1
What they've done on this post should do the trick How do I get the node URL in a Twig template?
So in your case this should work:
{{ path('entity.node.canonical', {'node': node.field_suggestion_articles[key].entity.id}) }}
0
You can try the following.
Add in your JS file:
$(document).ajaxStart(function(){
$('#ajax_loading').show();
});
$(document).ajaxStop(function() {
$('#ajax_loading').hide();
});
Add the HTML in your page:
<div id="ajax_loading" style="display:none">
Add in your CSS file:
#ajax_loading {
position: fixed;
left: 0;
right: 0;
top: 0;
...
1
Instead of sticking on page URL, I've done this:
/**
* Implements hook_theme_suggestions_page_alter().
*/
function mytheme_theme_suggestions_page_alter(array &$suggestions, array $variables) {
$parameters = \Drupal::routeMatch()->getParameters()->all();
if (isset($parameters['view_id']) && isset($parameters['display_id'])) {
['...
0
Directly from the Drupal documentation, you can pass multiple variables like this:
{{ drupal_view('who_s_new', 'block_1', arg_1, arg_2, arg_3) }}
0
I recommend to use a plugin for this. Full tutorial here: Create a menu link with html markup in drupal 8
namespace Drupal\MYMODULE\Plugin\Menu;
use Drupal\Core\Menu\MenuLinkDefault;
/**
* A menu link that displays number of points.
*/
class MyMessagesMenuLink extends MenuLinkDefault {
/**
* {@inheritdoc}
*/
public function getTitle() {
$...
0
So this is what I did, in case anyone wants to accomplish the something similar.
You first have to add a new region just above the content region in your MY_THEME.info file which in my case was:
regions[manufacturer_prefix_title] = Manufacturer Prefix Title
Then I overwrote the page.tpl.php which contained:
<?php if ($title): ?>
<h1>&...
1
To pass contextual filters with OR logic, you can make use of the Views Contextual Filters OR module:
The module provides a views plugin to modify query of contextual filters.
The module can changes contextual filters condition to OR logic.
When you install and enable the module from Query settings in your display check Contextual filters OR option and ...
0
To get the image with custom style in node.html.twig -
<img src="{{ node.IMAGE_FIELD.entity.uri.value | image_style('IMAGE_STYLE_NAME') }}">
1
Normally an entity doesn't have a field url. The url is built dynamically, but you don't have access to these methods from Twig.
So you use an entity route to build the url:
{{ path('entity.node.canonical', {'node': node.id}) }}
See https://www.drupal.org/docs/8/theming/twig/functions-in-twig-templates
In your case use message.field_product_reference....
0
I know it's horrible, but if nothing else works:
{{ link|replace({'internal:':''}) }}
My situation: accessing a Link field via an overridden views template: views-view-fields.html.twig
I had to get the variable from:
row._entity.field_machine_name.value.0.uri
(I gave up trying to use the fields variable, you can seemingly get a .content property out of ...
1
The issue not in the inline_template but the issue comes from {% trans %} if you place a render array variable into {% trans %}{% endtrans %} you will get the following error and it will not rendered:
Warning: htmlspecialchars() expects parameter 1 to be string, array given in Drupal\Component\Utility\Html::escape()
So you have two options:
1) get the ...
1
I'd use '#type' => 'inline_template' for this: You can do everything what you can do in a regular .twig file, just inlined in code:
$build[0] = [
'#type' => 'inline_template',
'#template' => '<div id="thumbnail-image" style="background-image: url({{ foo }})">{{ bar }}</div>'
'#context' => [
'foo' => $...
0
You can theme secondary menu using THEME_links__system_secondary_menu like the following:
function THEME_links__system_secondary_menu(&$vars) {
// Get links:
$links = $vars['links'];
// Get the index of last menu item.
end($links);
$last_ele_index = key($links);
// Here do your logic by change ...
// $vars['links']['$last_ele_index'];
}
1
I used hook_field_widget_form_alter as suggested by DannyEnglander and leymannx.
8.8.x hook_field_widget_form_alter
Replace MYMODULE with your custom module's name and alter the element array to suit your needs.
/**
* Implements hook_field_widget_form_alter().
*/
function MYMODULE_field_widget_form_alter(&$element, \Drupal\Core\Form\...
1
You can try this one on Drupal 8:
Drupal.behaviors.custom = {
attach: function(context, settings) {
if(!Drupal.behaviors.custom.click_set){
//Your code.
Drupal.behaviors.custom.click_set = true;
}
}
};
0
Drupal 8 views will strip away any markup it thinks it is dangerous
you have to rely on a custom theme solution here is a general overview of how this can be done
if you don't have a custom theme you have to create one (more info)
Enable Twig debugging (more info)
Inspect your page in browser to find the appropriate templates to override. In the html ...
Top 50 recent answers are included
