Image paragraph

docroot/themes/custom/mass_admin_theme/templates/paragraphs/paragraph--image.html.twig

@@ -0,0 +1,74 @@
+{#
+/**
+ * @file
+ * Theme implementation to display an image paragraph.
+ *
+ * Available variables:
+ * - paragraph: Full paragraph entity.
+ *   - id: The paragraph ID.
+ *   - bundle: The type of the paragraph, for example, "image" or "text".
+ *   - authorid: The user ID of the paragraph author.
+ *   - createdtime: Formatted creation date. Preprocess functions can
+ *     reformat it by calling format_date() with the desired parameters on
+ *     $variables['paragraph']->getCreatedTime().
+ * - content: All paragraph items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - paragraphs: The current template type (also known as a "theming hook").
+ *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
+ *     "Image" it would result in "paragraphs--type--image". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
+ *     preview would result in: "paragraphs--view-mode--preview", and
+ *     default: "paragraphs--view-mode--default".
+ * - view_mode: View mode; for example, "preview" or "full".
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_paragraph()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+  'paragraph',
+  'paragraph--type--' ~ paragraph.bundle|clean_class,
+  view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
+  not paragraph.isPublished() ? 'paragraph--unpublished'
+]
+%}
+<style>
+  .js-lpb-component.paragraph--type--image:has(.ma__figure.ma__figure--right.ma__figure-image):not(:has(.ma__figure--no-wrap)) .lpb-controls,
+  .js-lpb-component.paragraph--type--image:has(.ma__figure.ma__figure--left.ma__figure-image):not(:has(.ma__figure--no-wrap)) + .js-lpb-component.paragraph--type--rich-text .lpb-controls {
+    right: 0;
+    left: initial;
+  }
+</style>
+{% block paragraph %}
+  <div{{ attributes.addClass(classes) }}>
+    {% block content %}
+      {% include "@atoms/09-media/figure--image.twig" with {
+        "figure": {
+          "image": {
+            "alt": paragraph.field_image.alt,
+            "src": file_url(paragraph.field_image.entity.fileuri ?? '')
+          },
+          "align": paragraph.field_image_alignment.value,
+          "size": paragraph.field_image_display_size.value,
+          "caption": paragraph.field_image_caption.value ? content.field_image_caption : null,
+          "wrap": paragraph.field_image_wrapping.value ? TRUE : FALSE,
+          "title": {
+            "text": paragraph.field_image_administrative_title.value
+          }
+        }
+      } %}
+    {% endblock %}
+  </div>
+{% endblock paragraph %}