theming – How to create template suggestion for image like IMAGE–BLOCK-TYPE or IMAGE–FIELD-TYPE

I’m struggling to make template suggestions like IMAGE–BLOCK-TYPE or IMAGE–FIELD-TYPE.
I have three different block types(image1, image2, image3) with one image field(field_image_1, field_image_2 and field_image_3).
And I don’t know how to get suggestion like

image–block_image1.html.twig

image–block_image2.html.twig

image–block_image3.html.twig

or

image–field_image_1.html.twig

image–field_image_2.html.twig

image–field_image_3.html.twig

my_theme_suggestions_image_alter(array &$suggestions, array $variables)
{

}

Please help!

theming – How can I get the value of the field_percentage field?

I’m trying to create a custom template for the paragraph-progress-bar component.
The component I created has 2 fields: title (field_title) and percentage (field_percentage, integer field limited from 0 to 100).

How can I get the value of the field_percentage field to pass it in the width of the progress bar code?

I’m trying with style="width: {{ content.field_percentuale ~ '%'}};" but it returns Array.

{%
  set classes = (
    'paragraph',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
    not paragraph.isPublished() ? 'paragraph--unpublished'
  )
%}
{% block paragraph %}
  <div{{ attributes.addClass(classes) }}>
    {% block content %}
    <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: {{ content.field_percentuale ~ '%'}};" aria-valuenow="{{content.field_percentuale}}" aria-valuemin="0" aria-valuemax="100">{{ content.field_titolo }}</div>
    </div>
    {% endblock %}
  </div>
{% endblock paragraph %}

theming – Reorganizing Regions in Bootstrap 4 Theme

A disclaimer first: I am a professional medievalist, not a programmer or a front-ender. I have some front-end knowledge, but not a lot. So, please, be easy on me.

Now, I am customizing a Bootstrap 4 subtheme and there is a particular layout that I need to achieve that I, for the life of me, cannot get to work. Thus, I turn to you, good and kind people of stack exchange, for aid, counsel and favor.

I am attaching the pictures and the code. The first picture is the original Bootstrap 4 region layout. The picture 2 is the region layout that I need.

Vanilla Bootstrap 4

The second picture is what I need it to be. Basically, the body of the page should be container-fluid, but the content inside the body should be just container. In that way, the sidebar first and sidebar second would be all the way on the margins. I have read a lot of contradictory advice on nesting a container inside the container-fluid, but whatever I try, it simply does not produce the desired effect.

What I need

Here is the Twig file:

    <main role="main">
  <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}

  {% 
  set sidebar_first_classes = (page.sidebar_first and page.sidebar_second) ? 'col-12 col-sm-6 col-lg-3' : 'col-12 col-lg-3'
  %}
  
  {% 
  set sidebar_second_classes = (page.sidebar_first and page.sidebar_second) ? 'col-12 col-sm-6 col-lg-3' : 'col-12 col-lg-3'
  %}
  
  {% 
  set content_classes = (page.sidebar_first and page.sidebar_second) ? 'col-12 col-lg-6' : ((page.sidebar_first or page.sidebar_second) ? 'col-12 col-lg-9' : 'col-12' )
   %}


  <div class="{{ b4_top_container }}">
    {% if page.breadcrumb %}
      {{ page.breadcrumb }}
    {% endif %}
    <div class="row no-gutters">
      {% if page.sidebar_first %}
        <div class="order-2 order-lg-1 {{ sidebar_first_classes }}">
          {{ page.sidebar_first }}
        </div>
      {% endif %}
      <div class="order-1 order-lg-2 {{ content_classes }}">
        {{ page.content }}
      </div>
      {% if page.sidebar_second %}
        <div class="order-3 {{ sidebar_second_classes }}">
          {{ page.sidebar_second }}
        </div>
      {% endif %}
    </div>
  </div>

</main>

Also, I have no clue what the b4_top_container does; could not find the explanation anywhere.

Any help would be massively appreciated.

Thank you all very much in advance.

8 – How to control placement of individual fields when theming content type node add / edit form in Twig?

I am trying to theme out the node add/edit form for a custom content type (ex. ‘album’). I have created a form_alter hook in my theme

function mytheme_form_alter(&$form, DrupalCoreFormFormStateInterface $form_state, $form_id) {

  switch ($form_id) {
    case "node_album_form":
      $form('#theme') = ('node_album_edit_form');
      break;
  

that correctly intercepts the node add/edit form and passes it to my theme hook which also finds the correct twig template.

function mytheme_theme() {
  return array(
    'node_album_form' => array(
    'template' => 'node_album_edit_form',
      'path' => Drupal::theme()->getActiveTheme()->getPath() . '/scss/templates/album',
      'render element' => 'form'
    ),
  };
}

in my twig file, ‘node_album_edit_form.html.twig’, I can confirm that changes here alter only the album add/edit form and that I can remove elements, ex:

{{ form|without('advanced', 'footer', 'actions') }} 

What I cannot do but would like to is place the form fields where I want them, ex:

<div class='myfancydiv album-title-field'>{{ field_album_title }}</div>
<div class='myfancydiv album-artist-field'>{{ field_artist }}</div>

because I’m not using the right reference to the field. I’ve tried:

{{ field_album_title }}
{{ form.field_album_title }}
{{ album_title }}

to no effect. Anyone have a working example of this?

theming – Is it possible to dynamically select between two different template files for the same content type?

Yes. You can implement hook_theme_suggestions_HOOK_alter() to set up different templates based on the field.

In your case, you want to add templates for nodes, so the theme hook is node. As such, you would implement the following:

function hook_theme_suggestions_node_alter(array &$suggestions, array $variables) {
  $node = $variables('node');
  if ($node->hasField('some_field') && $node->some_field->value == 1) {
    $suggestions() = 'node__product';
  }
}

With this code, when some_field does not exist, or does not have a value of 1, the default node.html.twig template will be used, and when some_field has a value of 1, the template node--product.html.twig will be used. Adjust accordingly.

theming – Is it possible to dynamically select between two different TWIG template files for the same content type?

We are rolling out changes on a content type with a new theme and field structures for existing content.

Is it possible to dynamically select one of two different twig template files for a content type?

For example, if a field on the content type is checked then use node–product.html.twig but otherwise use node–product-old.html.twig

theming – How to add an icon to a drupal text field

Stack Exchange Network


Stack Exchange network consists of 176 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

theming – Twig: Display media library reference user image at particular resolution with alt tag (on /user/1231 page)

On our user page (/user/12345) we want to change the profile image field to be a media library reference field instead. I’ve created for the user object a new field called field_profile_image that is an entity reference/media library reference.

In my twig template for this user page I can display the full rendered user image in the default display mode with a bunch of extraneous information by using {{ content.field_profile_image }}

What I would like to do is display just the image at 136×156 (a media display mode I’ve set up), preferably with an alt tag.

I’ve tried various solutions with or without twig tweak, and am still having trouble showing just the referenced image with an alt tag.

Note that I see a lot of examples for twig tweak have something like
{% set media_uri = node.field_media|file_uri %}
{% if media_uri is not null %}
{{ media_uri|image_style(‘thumbnail’) }}
{% endif %}

but node is null since this is not on a node, and replacing node.field_media with content.field_profile_image in the above script doesn’t render anything at all.

How can I display a media library image in a particular display mode preferably with alt tag?

theming – How to include special characters in path auto and url for Drupal 8?

The ampersand (&) is a reserved character in URLs because it is usually input as part of the query string. Some more info.

Most special characters can be used in URLs with the settings you described in your question, but & is an exception. Either just live with %26 as the encoding or rewrite the title to not use the & symbol, which is reserved.

This is not a Pauthauto problem; it’s a URL problem.

theming – How to convert URL parameters to lowercase for custom paths in Drupal 8

We have a routing.yml file which contains the below structure

testmodule.res:
  path: '/subject/{node}' 
  defaults: 
_controller: 'DrupaltestmoduleControllerresController::res' 
_title: ''
  requirements: 
_permission: 'access content'

Right now the result of the path in URL is www.test.com/subject/MATHS where the text “MATHS” should be in lowercase and the URL must be www.test.com/subject/maths

How can we convert the parameter in the URL to lowercase for this url and globally.