TWIG Sub-Template Experiment

I wanted to be able to easily create a Content Type on the fly that would export photos using Lightbox.

Initially I just used a Module as a block. But that really seeming both impractical and overkill. So Instead I modified the templates in TWIG and the theme file. Now, I just need to create the Photo Library Content Type in 'Contents' and add the images I want to display.

1. Create a Content Type
2. The machine name should be the same as the variable referenced in THEMENAME.theme. In this case I am using 'photo_library'
3. • Leave the 'Body' field
   • Add an Image field. (Its machine name needs to match the field_name in image.html.twig. In this case I used 'field_photos').
   • Set to unlimited number of images and whatever image preferences you prefer).
4. THEMENAME.theme
   

   function THEMENAME_preprocess_image(&$variables) {
       $node = Drupal::request()->attributes->get('node');
       // photo_library should be the machine_name of your content type
       if ($node && $node->getType() == 'photo_library') {
         $variables['create_photo_lib'] = 'true';
       }
   }
   function THEMENAME_preprocess_field(&$variables) {
       $node = Drupal::request()->attributes->get('node');
       // photo_library should be the machine_name of your content type
       if ($node && $node->getType() == 'photo_library') {
         $variables['lightbox_imgs'] = 'lightbox_imgs';
       }
   }
   

5. image.html.twig
   

   {% if create_photo_lib == 'true' %}
   	<a href="{{ attributes.src|replace({ ' ': '/' })}}" data-lightbox="lightbox_photo"> 
   		<img{{ attributes }}  />
   	</a> 
   {% else %}
   	<img{{ attributes }} />
   {% endif %}
   

6. field.html.twig
   

   <div class="{{ field_name}}">
   {% if label_hidden %}
     {% if multiple %}
       <div{{ attributes }}>
         {% for item in items %}
           <div{{ item.attributes }} class="item {% if field_name == 'field_photo' %}{{ lightbox_imgs }}{% endif %}">{{ item.content }}</div>
         {% endfor %}
       </div>
     {% else %}
       {% for item in items %}
         <div{{ attributes }} class="item {% if field_name == 'field_photo' %}{{ lightbox_imgs }}{% endif %}">{{ item.content }}</div>
       {% endfor %}
     {% endif %}
   {% else %}
     <div{{ attributes }}>
       <div{{ title_attributes }}>{{ label }}</div>
       {% if multiple %}
         <div>
       {% endif %}
       {% for item in items %}
         <div{{ item.attributes }} class="item {% if field_name == 'field_photo' %}{{ lightbox_imgs }}{% endif %}">{{ item.content }}</div>
       {% endfor %}
       {% if multiple %}
         </div>
       {% endif %}
     </div>
   {% endif %}
   </div>