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 %} +
+
+ {{ image.alt }} + {% 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"