diff --git a/oe_theme.theme b/oe_theme.theme
index b5e56ec22..dc5b089d0 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -16,6 +16,7 @@ use Drupal\Core\Url;
use Drupal\oe_theme\ValueObject\FileValueObject;
use Drupal\oe_theme\ValueObject\DateValueObject;
use Drupal\oe_theme\ValueObject\GalleryItemValueObject;
+use Drupal\oe_theme\ValueObject\ImageValueObject;
use Drupal\oe_theme_helper\EuropeanUnionLanguages;
/**
@@ -932,6 +933,13 @@ function oe_theme_preprocess_pattern_date_block__preview(array &$variables): voi
$variables['date'] = DateValueObject::fromArray($variables['date']);
}
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function oe_theme_preprocess_pattern_text_featured_media__preview(array &$variables): void {
+ $variables['image'] = ImageValueObject::fromArray($variables['image']);
+}
+
/**
* Implements hook_theme_suggestions_HOOK_alter().
*/
diff --git a/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig b/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig
new file mode 100644
index 000000000..177a966dc
--- /dev/null
+++ b/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig
@@ -0,0 +1,27 @@
+{#
+/**
+ * @file
+ * Text with featured media.
+ */
+#}
+
+{% if title %}
+
{{ title }}
+{% endif %}
+{% if image or text %}
+
+ {% if image %}
+
+
+
+ {% if caption %}
+ {{ caption }}
+ {% endif %}
+
+
+ {% endif %}
+ {% if text %}
+
{{ text }}
+ {% endif %}
+
+{% endif %}
diff --git a/templates/patterns/text_featured_media/text_featured_media.ui_patterns.yml b/templates/patterns/text_featured_media/text_featured_media.ui_patterns.yml
new file mode 100644
index 000000000..b2fd47329
--- /dev/null
+++ b/templates/patterns/text_featured_media/text_featured_media.ui_patterns.yml
@@ -0,0 +1,26 @@
+text_featured_media:
+ label: "Text with Featured media"
+ description: "Shows a rich text with a title and a featured media on the right, if any."
+ fields:
+ title:
+ type: "text"
+ label: "Title"
+ description: "The title, displayed above text and media."
+ preview: "Lorem ipsum"
+ image:
+ type: "ImageValueObject"
+ label: "Image"
+ description: "Image on the right of the text."
+ preview:
+ src: "https://placeimg.com/1000/500/arch"
+ alt: "Alternative text for featured item image"
+ caption:
+ type: "text"
+ label: "Caption"
+ description: "Description of the image."
+ preview: "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit."
+ text:
+ type: "text"
+ label: "Full text"
+ description: "The full rich text."
+ preview: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non enim iam stirpis bonum quaeret, sed animalis. Ego vero volo in virtute vim esse quam maximam; A mene tu? Quid, quod res alia tota est? Duo Reges: constructio interrete."
diff --git a/tests/Kernel/fixtures/rendering.yml b/tests/Kernel/fixtures/rendering.yml
index 09cfc9df6..660d25c82 100644
--- a/tests/Kernel/fixtures/rendering.yml
+++ b/tests/Kernel/fixtures/rendering.yml
@@ -1371,3 +1371,88 @@
'.ecl-timeline2__item:nth-child(4) .ecl-timeline2__content': "Lorem Ipsum 4"
'.ecl-timeline2__item:nth-child(5) .ecl-timeline2__content': "Lorem Ipsum 5"
'.ecl-timeline2__item:nth-child(6) .ecl-timeline2__content': "Lorem Ipsum 6"
+- array:
+ '#type': pattern
+ '#id': text_featured_media
+ '#fields':
+ title: "Heading"
+ image:
+ src: "http://via.placeholder.com/150x150"
+ caption: "Some caption text for the image"
+ text: "Some more text"
+ assertions:
+ count:
+ 'div.ecl-row': 1
+ 'figure.ecl-media-container': 1
+ 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
+ 'figcaption.ecl-media-container__caption': 1
+ equals:
+ 'h2.ecl-u-type-heading-2': "Heading"
+ 'figcaption.ecl-media-container__caption': "Some caption text for the image"
+ 'div.ecl-col-md-6.ecl-editor': "Some more text"
+- array:
+ '#type': pattern
+ '#id': text_featured_media
+ '#fields':
+ image:
+ src: "http://via.placeholder.com/150x150"
+ caption: "Some caption text for the image"
+ text: "Some more text"
+ assertions:
+ count:
+ 'h2.ecl-u-type-heading-2': 0
+ 'div.ecl-row': 1
+ 'figure.ecl-media-container': 1
+ 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
+ 'figcaption.ecl-media-container__caption': 1
+ equals:
+ 'figcaption.ecl-media-container__caption': "Some caption text for the image"
+ 'div.ecl-col-md-6.ecl-editor': "Some more text"
+- array:
+ '#type': pattern
+ '#id': text_featured_media
+ '#fields':
+ title: "Heading"
+ caption: "Some caption text for the image"
+ text: "Some more text"
+ assertions:
+ count:
+ 'div.ecl-row': 1
+ 'figure.ecl-media-container': 0
+ 'div.ecl-col-md-6.ecl-editor': 0
+ 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 0
+ 'figcaption.ecl-media-container__caption': 0
+ equals:
+ 'h2.ecl-u-type-heading-2': "Heading"
+ 'div.ecl-col-12.ecl-editor': "Some more text"
+- array:
+ '#type': pattern
+ '#id': text_featured_media
+ '#fields':
+ title: "Heading"
+ image:
+ src: "http://via.placeholder.com/150x150"
+ text: "Some more text"
+ assertions:
+ count:
+ 'div.ecl-row': 1
+ 'figure.ecl-media-container': 1
+ 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
+ 'figcaption.ecl-media-container__caption': 0
+ equals:
+ 'h2.ecl-u-type-heading-2': "Heading"
+ 'div.ecl-col-md-6.ecl-editor': "Some more text"
+- array:
+ '#type': pattern
+ '#id': text_featured_media
+ '#fields':
+ title: "Heading"
+ caption: "Some caption"
+ assertions:
+ count:
+ 'div.ecl-row': 0
+ 'figure.ecl-media-container': 0
+ 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 0
+ 'figcaption.ecl-media-container__caption': 0
+ equals:
+ 'h2.ecl-u-type-heading-2': "Heading"