Paragraphs Align Media Left or Right of Text with CSS

Question

I am using Paragraphs module to create a cutom paragraph. The custom paragraph will have three fields: Image, Text and Position. Would like to use css to align as follows based on the value of the Position field.

Image Left | Text Right

Text Left | Image Right

Image Top / Text Below

How do I go about doing this? Do I need any extra configuration for the paragraph? Or is all the magic done in CSS?

Answer 1

Yes, just CSS. You could use Classy Paragraphs to append CSS classes to your paragraphs depending on some field values, or you can do this very easily yourself (recommended) by preprocessing the paragraph in your theme's *.theme file.

---

Let's assume the position field is a single-value List (Text) field with the following allowed values:

image-left|image-left
image-right|image-right
image-top|image-top

Then you can easily retrieve that value and append it as CSS class by implementing hook_preprocess_HOOK:

/**
 * Implements template_preprocess_paragraph().
 */
function MYTHEME_preprocess_paragraph(&$variables) {

  $paragraph = $variables['paragraph'];

  // Retrieve certain field's values and add them as CSS classes.
  $classy_fields = [
    'field_image_position',
    'field_background_color',
    'field_social_media_type',
  ];

  foreach ($classy_fields as $classy_field) {

    if ($paragraph->hasField($classy_field)) {

      if (!$paragraph->get($classy_field)->isEmpty()) {

        $variables['attributes']['class'][] = $paragraph->get($classy_field)->getString();
      } 
    }
  }
}

---

Which will result in image-right or whatever other class getting appended to this paragraph's attributes and it now can by styled accordingly:

<div class="paragraph-MYPARAGRAPH view-mode--default image-right">