Theming – How do I override the form-element-label.html.twig file in Drupal 8?

A view displays check boxes with the better exposed filter. Ajax setting is true. There is currently no template suggestion for overriding form-element-label.html.twig. Somehow it works if you add a suggestion. But if you select the checkbox, the suggestion will be removed. Because it is not able to get $ request.

function test_theme_suggestions_form_element_label_alter(array &$suggestions, array $variables) {
  $request = Drupal::routeMatch()->getRouteObject()->getDefault('view_id');
  if (!empty($request)) {
    $suggestions() = 'form_element_label__form_id__' . $request;
  }
  return $suggestions;
}

Is there another way to override Label Twig file.

Theming – Remove the cache for a particular twig file

You need a cache context and a user cache tag:

$variables('username') = (
  '#markup' => Drupal::currentUser()->getUsername(),
  '#cache' => (
    'contexts' => (
      'user',
    ),
    'tags' => (
      'user:' . Drupal::currentUser()->id(),
    ),
  ),
);

You can add this directly in a preprocessing hook, but the rendered output will vary for each user. For a large number of users, it's a good idea to include this in a delayed builder callback, which complies with the conditions for automatic wildcards and can be delayed using BigPipe without affecting page load performance.

See https://www.drupal.org/docs/8/api/render-api/auto-placeholdering

theming – entity_print adds google font

I use D8 and the entity_print module to print some page content as a PDF. I wanted to add Google fonts to the printed node. I tried both ways:

  1. Styling (such as background, colors, font sizes …) added in the style
    Section of template "entity-print.html" (I changed the location from
    Template on theme / templates since it was not recommended to change
    something within the module itself).

entity-print.html:


@import url(https://fonts.googleapis.com/css?family=Roboto);
body{
   font-family: 'Roboto',serif;
}
working styling ...

  1. Use the styling file: https://www.drupal.org/node/2706755#styling.

themeName.info.yml:

 entity_print:
     node:
         all: 'themeName/all-nodes

themeName.libraries.yml

  css:
    theme:
      css/print-style.css: {}

print-style.css

@import url(https://fonts.googleapis.com/css?family=Roboto);

body{
   font-family: 'Roboto',serif;
}
SOME WORKING STYLING...

any idea ?

Theming – Hide SVG image based on Responsive Viewport with CSS [Drupal v7.6x View]

Using Drupal 7 Views I've created a view that displays an SVG image file.

Here is an example scenario:
A marketing item node is created on a regular basis when a particular product offering exists. The purpose is to show the users of a new product offer (discount, etc.). This offer contains within the node article 2 Variations of the SVG discount graphic i). : A Full Graphic for Desktop / Laptop Viewports ii): A smaller, alternative size graphic for mobile (cellular) devices such as iPhone / Android. Both images are listed at the time the node was created, but ONLY one is supposed to show a viewport.

When using a simple custom Drupal view, the two images on a relevant page (for example, when landing on the Home screen) are displayed one at a time based on the size of the viewport. My problem, however, is that both images are displayed (for example, on the desktop) and although I've experimented with them CSS in Views field options and attribute rules, as well as CSS field modules considered and more – to no avail.

The INDIVIDUAL files must be accessed again for the CSS media rule to be applied at the CSS level.

In addition, I've considered adding a CSS field to the image type in the system file type module, but I'm not sure if I can access the CSS there. Maybe my approach is wrong or something is missing.

My last alternative would be to create only two types of views for each viewport and hide them in the panel.

Some directions and advice, please, are very welcome. I spent over 4 hours finding a solution.
Many thanks.

The following is not suitable:
Different responsive image per breakpoint

theming – Returns the array number of the paragraph in TWIG

I have a paragraph (Entity References revisions) with multiple elements.

I want to see the rendered list of items.

I only get the paragraph as an element (# object #) (in a pseudo field).

Sorry: entity_reference_revisions EntityReferenceRevisionsFieldItemList can not be printed.

I was thinking about looping a Twig Tweak rendering:
{{drupal_entity (# 39; paragraph # 39, ID, # 39; standard & # 39;)}}

But then I would have to get the individual ID of each article in the loop.

How could I do it? Or is there a better solution at all?

Theming – Better way to get string value in branch

I know that similar questions have been asked before. I did my search and found similar topics here and here. But I can not find a solution.

Let me explain.

I have a view that contains information from a content type called "Courses." Information is presented in a table using views-view-table.html.twig. I've adapted this code to group my results by semester. Everything works fine. Now I just want to spend an asterisk next to a course title and a corresponding text at the end of the semester. So I would like a simple comparison (based on the title of the course), so I add a star next to the title and then another comparison to add text at the end of each table for that semester.

I've finally solved this problem, but I find my code very ugly – there has to be a better and more elegant way, so I turn here for help.


For example, if the course title is "programming methods," I'd like to add a simple asterisk.

No matter how hard I try, I could not find a good way to do that. Here is the relevant Kint issue:

Content - Kint Edition

Based on this and other examples, I tried different things, but whenever I try to drill "under" content, I get NULL, regardless of the syntax I try.

I can use the string & # 39; Programming Methodologies & # 39; just do not get it. And in general I can not understand how to write the right syntax there. Even if you test simple things like content (0), you get NULL.

Finally, thanks to this thread and some experimentation, I succeeded in achieving what I wanted. The following code works, but it really seems ugly. I'm sure there's a better way, but I can not find him. Any help is appreciated …

I post the code because I assume that it helps you to understand what I'm looking for:

{% set item = content|first|first %}
              {% if item|striptags|trim|replace({"n": "", "rn": "", "t": "", "nr": ""}) == 'Programming Methodologies'%}
                (*) 
              {% endif %}

In a few words I'm looking for a better way to get the string value instead of using all these branch filters: Content | first | first | … | striptags | trim | replace etc.

In another code, I tried to do something similar, relying again on several branch filters to get the value I wanted …

In views-view-table.html.twig specifies that a & # 39; caption & # 39; variable is available. Kint output of the caption is:

Subtitles array

Again, I have tried a lot, but the value? Semester: 01 & # 39; not received as a simple string. So I finally used the following code that works, but it really seems ugly to me. I would be glad if someone could help with something better and cleaner, both for the elegance and understanding that it will provide.

{% if caption|first|trim|striptags|replace({"n": "", "rn": "", "t": "", "nr": ""}) == 'Semester: 02' %}
  
some text here
{% endif %}

Theming – Timestamp error when displaying page versions

When trying to display a node revision below /node//revisions//view/I get

The website encountered an unexpected error. Please try again later.

InvalidArgumentException: The timestamp must be numeric. in DrupalComponentDatetimeDateTimePlus::createFromTimestamp() (line 200 of core/lib/Drupal/Component/Datetime/DateTimePlus.php).

I error_logChanged the value of this timestamp, where the error (in core code) is issued, when I'm dealing with the problem, and it's a type NULL,

I do not quite understand the order of the hooks that are called during the generation of this preview, which would cause a timestamp problem. Can someone point me in the right direction?

Many Thanks!

Theming – how can I calculate the total value of two fields in webform

Here's my scenario where a user calculates a house planning price that he / she can select from the drop-down list as their house type: Apartment, Office, Standard House Junior

price list
Expert = $ 20 / hour, Expert = $ 15 / hour Junior $ 10 / hour

I would like to calculate the price depending on the working time
rent is my branch snippet

{% if node.field_employer['0'].value == & # 39; expert & # 39;%}

{{(data.number * 20)}} 

{% elseif node.field_employer[‘1’].value == & # 39; senior & # 39;%}
{{(data.number * 15)}}

{% elseif node.field_employer[‘2’].value == & # 39; junior & # 39;%}
{{(data.number * 10)}}

{% else%}
Please dial number
{% endif%}