Instructions how to migrate TWIG customizations missing

Created on 28 September 2023, 9 months ago
Updated 30 September 2023, 9 months ago

This is a snippet from template file slick-slide.html.twig (lines 47-50):

{# @todo remove all below at 3.x for theme_blazy(). If you need to modify
    anything, please use MYTHEME_preprocess_blazy() instead, starting at 3.x,
    or better just use CSS for more reliable theming. FYI, theme_blazy()
    offers greater possibility and versatility, that is why it is deprecated. #}

Can you provide documentation and examples how to remake the customization with MYTHEME_preprocess_blazy()?

For example we had a link field in each slide and the link was wrapped around the slide so that pressing any part of the slide would activate the link.

💬 Support request
Status

Fixed

Version

2.10

Component

Documentation

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @kaipipek
  • 🇮🇩Indonesia gausarts

    I don't know what you already did as you didn't put your code on the table, and so cannot give you any samples relevant to yours :)

    However you can do as you previously did as long as within the designated scope of that replacement.

    Preprocess is one way to put it simply in such limited lines, might not be applicable to your intention.

    A few other ways to override depending on your setups:

    https://git.drupalcode.org/project/blazy/-/blob/8.x-2.18/docs/README.md?...

    Hope that leads to your own direction.

  • This is what we currently have customized in the twig template:

    {% set slide %}
      {% block slick_slide %}
    {% if item.caption.link %}
            <a href="{{ item.caption.link }}">
      {% endif %}
            {% if settings.split and not settings.unslick %}
          <div class="slide__media">{{ item.slide }}</div>
        {% else %}
          {{ item.slide }}
        {% endif %}
     {% if item.caption.link %}
            </a>
      {% endif %}
    {% endblock %}
    {% endset %}
    

    The purpose of if item.caption.link statements is to wrap the slide with an A tag.

    What is the correct way to do this in version 3.x if this part of the twig template is removed?

  • 🇮🇩Indonesia gausarts

    hook_preprocess_blazy will do:

    function hook_preprocess_blazy(array &$variables) {
      $settings = &$variables['settings'];
      $blazies  = $settings['blazies'];
    
      if (!empty($settings['link'])) {
        // Only scope to slick and if an image, not video, instagram, etc.
         // Checks for more conditions like blazies.is, blazies.use, etc.
        if ($blazies->get('namespace') == 'slick' && $blazies->is('image')) {
          if ($link = $variables['captions']['inline']['link'] ?? []) {
            $update = FALSE;
    
            // If using a link field and formatted as a plain text URL.
            if ($url = $link['content'][0]['#plain_text'] ?? NULL) {
              $variables['url'] = $url;
              $update = TRUE;
            }
            // If a plain text as an URL source, extract it accordingly.
            else {
              $variables['url'] = $plain_text_value_as_url;
              $update = TRUE;
              dpm($link);
            }
    
            if ($update) {
              // Update internal blazy CSS classes, etc.
              $settings['media_switch'] = 'content';
              $blazies->set('switch', 'content');
    
              // Disables rendered link since already made as a wrapper.
              $variables['captions']['inline']['link'] = [];
            }
          }
        }
      }
    }
    

    Check out Splidebox or Zooming modules, or any relevant lightbox sub-modules for similar samples.
    The following hook_alter might also be useful for similar use cases:
    https://git.drupalcode.org/project/blazy/-/blob/8.x-2.18/blazy.api.php?r...

  • Thank you very much, that was awesome! It didn't work out of the box e.g. $blazies->get('namespace') brings two values "blazy" and "slick" and formatting URL to plain text didn't work, but this is my final working code for this use case:

    function hook_preprocess_blazy(array &$variables) {
      $settings = &$variables['settings'];
      $blazies  = $settings['blazies'];
    
      if (!empty($settings['link'])) {
        // Only scope to blazy and if an image, not video, instagram, etc.
        // Checks for more conditions like blazies.is, blazies.use, etc.
        // Or remove the namespace to apply to ecosystem if consistent.
        if ($blazies->get('namespace') == 'blazy' && $blazies->is('image')) {
          if ($link = $variables['captions']['inline']['link'] ?? []) {
    
              $variables['url'] = $link['content'];
    
              // Update internal blazy CSS classes, etc.
              $settings['media_switch'] = 'content';
              $blazies->set('switch', 'content');
    
              // Disables rendered link since already made as a wrapper.
              $variables['captions']['inline']['link'] = [];
          }
        }
      }
    }
  • Status changed to Fixed 9 months ago
  • 🇮🇩Indonesia gausarts

    Yes, that would be simpler, but may cause broken HTML link when your Link formatter does not check "URL only" with "Show URL as plain text". Should be fine for personal use, though :)

    For the namespace, better stick to the active formatter, hence Slick.

    I found your idea useful, and added Media switcher > Image linked by Link field option in Blazy:2.19 to avoid this.

    Thank you.

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.69.0 2024