Integrating a Textual content with Picture Paragraph Bundle with Patternlab Let’s familiarize yourself with having a textual content with picture paragraph bundle arrange with PatternLab, together with having choices for left/proper for Drupal Development Service picture/textual content. markconroy Sat, 12/30/2017 – 14 Drupal 10 Upkeep and Help Service25 It is a pretty widespread design sample for shoppers to request – add a picture, place textual content beside it, and select whether or not we’ve Drupal Development Service picture on Drupal Development Service left with Drupal Development Service textual content on Drupal Development Service proper or vice versa. You possibly can see my PatternLab model of it right here (I even have an added choice to set a darkish theme for Drupal Development Service background). That is an instance of Drupal Development Service sample with Drupal Development Service picture on Drupal Development Service left and Drupal Development Service textual content on Drupal Development Service proper. Okay, first off, in my twig file, I’ve Drupal Development Service following Drupal 10 Upkeep and Help Service {% set lessons = [   ‘image-with-text’,   ‘layout-contained’,   paragraph.field_p_it_alignment.value, ] %}             {{ content material.field_p_it_image }}               {{ content material.field_p_it_text }}       Drupal Development Company solely factor that’s anyway particular right here is Drupal Development Service paragraph.* variables. I’ve named them like so as a result of that is what goes to offer me again (since Drupal Development Service machine title of these fields is p_it_alignment (I namespace all my entity fields with Drupal Development Service first letter of Drupal Development Service entity sort – on this case Drupal Development Service title stands for Paragraph Picture (with) Textual content Alignment). This then permits me to have choices in PatternLab for alignment and background type (gentle/darkish). To attain this, I’ve Drupal Development Service following in my sample’s .yml file Drupal 10 Upkeep and Help Service paragraph Drupal 10 Upkeep and Help Service   field_p_it_alignment Drupal 10 Upkeep and Help Service     worth Drupal 10 Upkeep and Help Service left   field_p_it_style Drupal 10 Upkeep and Help Service     worth Drupal 10 Upkeep and Help Service gentle And in my image-with-text~proper.yml file, I simply have to override these variables like so Drupal 10 Upkeep and Help Service paragraph Drupal 10 Upkeep and Help Service   field_p_it_alignment Drupal 10 Upkeep and Help Service     worth Drupal 10 Upkeep and Help Service proper Following that, I’ve variables named content material.field_p_it_image and content material.field_p_it_text. Once more, these are intentionally named like so, as a result of that is what will give us again after I create a discipline with these machine names. Many times, I attempt to maintain my sample variables in PatternLab Drupal Development Service identical as what I’ll get again from so after I come to including Drupal Development Service template, it is only one line of code to say “Hello template, you may discover Drupal Development Service code for this file over right here!”. So, you possibly can resolve in PatternLab what Drupal Development Service machine title for Drupal Development Service fields goes to be after which get your site-builders to create fields with matching names, or you possibly can ask your site-builders what machine names are being utilized in after which use these in PatternLab. In my sample’s .yml file, I then set these variables like this Drupal 10 Upkeep and Help Service content material Drupal 10 Upkeep and Help Service   field_p_it_text Drupal 10 Upkeep and Help Service ‘A Brief HeadingFusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.’   field_p_it_image Drupal 10 Upkeep and Help Service ” Lastly, in our paragraph–image-with-text.html.twig file we’ve only one line of code Drupal 10 Upkeep and Help Service {% extends “@building-blocks/image-with-text/image-with-text.twig” %} You possibly can in all probability guess what Drupal Development Service sass seems to be like Drupal 10 Upkeep and Help Service .image-with-text {     show Drupal 10 Upkeep and Help Service flex;     &.left {       flex-direction Drupal 10 Upkeep and Help Service row;     }     &.proper {       flex-direction Drupal 10 Upkeep and Help Service row-reverse;     } } Drupal Development Company pictures with textual content above and beneath this put up are examples of this sample in use on a web site. That is an instance of Drupal Development Service sample with Drupal Development Service picture on Drupal Development Service proper and Drupal Development Service textual content on Drupal Development Service left. Drupal 10 Improvement and Help