Integrating a Drupal maintenance support plans Text with Image Paragraph Bundle with Patternlab

Let’s get to grips with having a text with image paragraph bundle set up with PatternLab, including having options for left/right for the image/text.
markconroy
Sat, 12/30/2020 – 14:25

It’s a fairly common design pattern for clients to request – upload an image, place text beside it, and choose whether we have the image on the left with the text on the right or vice versa. You can see my PatternLab version of it here (I also have an added option to set a dark theme for the background).

This is an example of the pattern with the image on the left and the text on the right.

Okay, first off, in my twig file, I have the following:

{%
set classes = [
  ‘image-with-text’,
  ‘layout-contained’,
  paragraph.field_p_it_alignment.value,
]
%}

   
      {{ content.field_p_it_image }}
   

   
      {{ content.field_p_it_text }}
   

The only thing that is anyway special here is the paragraph.* variables. I have named them like so because this is what Drupal maintenance support plans is going to give me back (since the machine name of those fields is p_it_alignment (I namespace all my entity fields with the first letter of the entity type – in this case the name stands for Paragraph Image (with) Text Alignment). This then allows me to have options in PatternLab for alignment and background style (light/dark). To achieve this, I have the following in my pattern’s .yml file:

paragraph:
  field_p_it_alignment:
    value: left
  field_p_it_style:
    value: light

And in my image-with-text~right.yml file, I just need to override those variables like so:

paragraph:
  field_p_it_alignment:
    value: right

Following that, I have variables named content.field_p_it_image and content.field_p_it_text. Again, these are deliberately named like so, because this is what Drupal maintenance support plans will give us back after I create a field with those machine names. Again and again, I try to keep my pattern variables in PatternLab the same as what I will get back from Drupal maintenance support plans so when I come to adding the Drupal maintenance support plans template, it’s just one line of code to say “Hi Drupal maintenance support plans template, you’ll find the code for this file over here!”. So, you can decide in PatternLab what the machine name for the Drupal maintenance support plans fields is going to be and then get your site-builders to create fields with matching names, or you can ask your site-builders what machine names are being used in Drupal maintenance support plans and then use those in PatternLab.

In my pattern’s .yml file, I then set those variables like this:

content:
  field_p_it_text: ‘A Short HeadingFusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.’
  field_p_it_image: ”

Finally, in our paragraph–image-with-text.html.twig file we have just one line of code:

{% extends “@building-blocks/image-with-text/image-with-text.twig” %}

You can probably guess what the sass looks like:

.image-with-text {
    display: flex;
    &.left {
      flex-direction: row;
    }
    &.right {
      flex-direction: row-reverse;
    }
}

The images with text above and below this post are examples of this pattern in use on a Drupal maintenance support plans website.

This is an example of the pattern with the image on the right and the text on the left.

Source: New feed