From 5d4ab686e217e8b6fc527e0df89adb9098fa6fad Mon Sep 17 00:00:00 2001 From: Mike Decker Date: Thu, 31 Oct 2024 11:43:18 -0700 Subject: [PATCH 1/2] Added modal colorbox image display choices in the wysiwyg --- ...y_view_display.media.image.large_modal.yml | 54 ++++++++++++++++++ ..._view_display.media.image.medium_modal.yml | 54 ++++++++++++++++++ ...y_view_display.media.image.small_modal.yml | 56 +++++++++++++++++++ ...ore.entity_view_mode.media.large_modal.yml | 11 ++++ ...re.entity_view_mode.media.medium_modal.yml | 11 ++++ ...ore.entity_view_mode.media.small_modal.yml | 11 ++++ config/sync/filter.format.stanford_html.yml | 6 ++ 7 files changed, 203 insertions(+) create mode 100644 config/sync/core.entity_view_display.media.image.large_modal.yml create mode 100644 config/sync/core.entity_view_display.media.image.medium_modal.yml create mode 100644 config/sync/core.entity_view_display.media.image.small_modal.yml create mode 100644 config/sync/core.entity_view_mode.media.large_modal.yml create mode 100644 config/sync/core.entity_view_mode.media.medium_modal.yml create mode 100644 config/sync/core.entity_view_mode.media.small_modal.yml diff --git a/config/sync/core.entity_view_display.media.image.large_modal.yml b/config/sync/core.entity_view_display.media.image.large_modal.yml new file mode 100644 index 000000000..c714758e2 --- /dev/null +++ b/config/sync/core.entity_view_display.media.image.large_modal.yml @@ -0,0 +1,54 @@ +uuid: 2b2c0e22-8ee7-4d00-840e-2eed9afa61c6 +langcode: en +status: true +dependencies: + config: + - core.entity_view_mode.media.large_modal + - field.field.media.image.field_media_image + - field.field.media.image.su_media_category + - image.style.breakpoint_2xl_1x + - image.style.large + - media.type.image + module: + - colorbox + - empty_fields + - field_formatter_class + - field_label + - layout_builder +third_party_settings: + layout_builder: + enabled: false + allow_custom: false +id: media.image.large_modal +targetEntityType: media +bundle: image +mode: large_modal +content: + field_media_image: + type: colorbox + label: hidden + settings: + colorbox_image_style: breakpoint_2xl_1x + colorbox_gallery: page + colorbox_gallery_custom: '' + colorbox_caption: auto + colorbox_caption_custom: '' + colorbox_node_style: large + colorbox_node_style_first: large + third_party_settings: + empty_fields: + handler: '' + field_formatter_class: + class: '' + field_label: + label_value: '' + label_tag: '' + weight: 6 + region: content +hidden: + created: true + name: true + search_api_excerpt: true + su_media_category: true + thumbnail: true + uid: true diff --git a/config/sync/core.entity_view_display.media.image.medium_modal.yml b/config/sync/core.entity_view_display.media.image.medium_modal.yml new file mode 100644 index 000000000..6ffc93940 --- /dev/null +++ b/config/sync/core.entity_view_display.media.image.medium_modal.yml @@ -0,0 +1,54 @@ +uuid: f98966ea-7adf-47c2-ad3f-85055ea24ea7 +langcode: en +status: true +dependencies: + config: + - core.entity_view_mode.media.medium_modal + - field.field.media.image.field_media_image + - field.field.media.image.su_media_category + - image.style.breakpoint_2xl_1x + - image.style.medium + - media.type.image + module: + - colorbox + - empty_fields + - field_formatter_class + - field_label + - layout_builder +third_party_settings: + layout_builder: + enabled: false + allow_custom: false +id: media.image.medium_modal +targetEntityType: media +bundle: image +mode: medium_modal +content: + field_media_image: + type: colorbox + label: hidden + settings: + colorbox_image_style: breakpoint_2xl_1x + colorbox_gallery: page + colorbox_gallery_custom: '' + colorbox_caption: auto + colorbox_caption_custom: '' + colorbox_node_style: medium + colorbox_node_style_first: medium + third_party_settings: + empty_fields: + handler: '' + field_formatter_class: + class: '' + field_label: + label_value: '' + label_tag: '' + weight: 6 + region: content +hidden: + created: true + name: true + search_api_excerpt: true + su_media_category: true + thumbnail: true + uid: true diff --git a/config/sync/core.entity_view_display.media.image.small_modal.yml b/config/sync/core.entity_view_display.media.image.small_modal.yml new file mode 100644 index 000000000..14f6a88d4 --- /dev/null +++ b/config/sync/core.entity_view_display.media.image.small_modal.yml @@ -0,0 +1,56 @@ +uuid: a4111c63-41f9-42ab-a8f1-70a8726911d1 +langcode: en +status: true +dependencies: + config: + - core.entity_view_mode.media.small_modal + - field.field.media.image.field_media_image + - field.field.media.image.su_media_category + - image.style.breakpoint_2xl_1x + - image.style.thumbnail + - media.type.image + module: + - colorbox + - empty_fields + - field_formatter_class + - field_label + - layout_builder +third_party_settings: + layout_builder: + enabled: false + allow_custom: false +_core: + default_config_hash: hSk8HhFOQGFB36lnn_tEKB38YVOq1uNpB-cdzzq5vMo +id: media.image.small_modal +targetEntityType: media +bundle: image +mode: small_modal +content: + field_media_image: + type: colorbox + label: hidden + settings: + colorbox_image_style: breakpoint_2xl_1x + colorbox_gallery: page + colorbox_gallery_custom: '' + colorbox_caption: auto + colorbox_caption_custom: '' + colorbox_node_style: thumbnail + colorbox_node_style_first: thumbnail + third_party_settings: + empty_fields: + handler: '' + field_formatter_class: + class: '' + field_label: + label_value: '' + label_tag: '' + weight: 0 + region: content +hidden: + created: true + name: true + search_api_excerpt: true + su_media_category: true + thumbnail: true + uid: true diff --git a/config/sync/core.entity_view_mode.media.large_modal.yml b/config/sync/core.entity_view_mode.media.large_modal.yml new file mode 100644 index 000000000..8e41c4efe --- /dev/null +++ b/config/sync/core.entity_view_mode.media.large_modal.yml @@ -0,0 +1,11 @@ +uuid: f192f9f4-716f-40fd-be1d-66739d311c5a +langcode: en +status: true +dependencies: + module: + - media +id: media.large_modal +label: 'Large Modal' +description: '' +targetEntityType: media +cache: true diff --git a/config/sync/core.entity_view_mode.media.medium_modal.yml b/config/sync/core.entity_view_mode.media.medium_modal.yml new file mode 100644 index 000000000..878181524 --- /dev/null +++ b/config/sync/core.entity_view_mode.media.medium_modal.yml @@ -0,0 +1,11 @@ +uuid: 437a171d-2c27-48e1-b3ad-a8b55c1b0c37 +langcode: en +status: true +dependencies: + module: + - media +id: media.medium_modal +label: 'Medium Modal' +description: '' +targetEntityType: media +cache: true diff --git a/config/sync/core.entity_view_mode.media.small_modal.yml b/config/sync/core.entity_view_mode.media.small_modal.yml new file mode 100644 index 000000000..7408f43a2 --- /dev/null +++ b/config/sync/core.entity_view_mode.media.small_modal.yml @@ -0,0 +1,11 @@ +uuid: a9df3242-e117-4b91-bd80-df6098ea4081 +langcode: en +status: true +dependencies: + module: + - media +id: media.small_modal +label: 'Thumb Modal' +description: '' +targetEntityType: media +cache: true diff --git a/config/sync/filter.format.stanford_html.yml b/config/sync/filter.format.stanford_html.yml index 33deb88a7..656ab0333 100644 --- a/config/sync/filter.format.stanford_html.yml +++ b/config/sync/filter.format.stanford_html.yml @@ -3,6 +3,9 @@ langcode: en status: true dependencies: config: + - core.entity_view_mode.media.large_modal + - core.entity_view_mode.media.medium_modal + - core.entity_view_mode.media.small_modal - core.entity_view_mode.media.stanford_image_large - core.entity_view_mode.media.stanford_image_large_square - core.entity_view_mode.media.stanford_image_medium @@ -115,6 +118,9 @@ filters: default_view_mode: default allowed_view_modes: default: default + large_modal: large_modal + medium_modal: medium_modal + small_modal: small_modal stanford_image_large: stanford_image_large stanford_image_large_square: stanford_image_large_square stanford_image_medium: stanford_image_medium From 90a93203c8d3d78d673e5b19eb6fb3d223309bfd Mon Sep 17 00:00:00 2001 From: Mike Decker Date: Thu, 31 Oct 2024 11:54:42 -0700 Subject: [PATCH 2/2] Added functional test --- .../functional/Paragraphs/WYSIWYGCest.php | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/tests/codeception/functional/Paragraphs/WYSIWYGCest.php b/tests/codeception/functional/Paragraphs/WYSIWYGCest.php index fd21807bb..ac975bf7d 100644 --- a/tests/codeception/functional/Paragraphs/WYSIWYGCest.php +++ b/tests/codeception/functional/Paragraphs/WYSIWYGCest.php @@ -298,6 +298,50 @@ public function testEmbeddedDocument(FunctionalTester $I) { $I->canSeeElement('.su-wysiwyg-text a[href*="test"]'); } + /** + * Image modal test. + * + * @group wysiwyg-modal + */ + public function testWysiwygModal(FunctionalTester $I) { + $file_system = \Drupal::service('file_system'); + $image_path = $file_system->copy(__DIR__ . '/logo.jpg', 'public://' . $this->faker->word . '.jpg'); + $image_name = basename($image_path); + + $file = $I->createEntity(['uri' => $image_path], 'file'); + $media = $I->createEntity([ + 'bundle' => 'image', + 'field_media_image' => ['target_id' => $file->id(), 'alt' => 'alt text'], + ], 'media'); + + $text = ' '; + $page = $this->getNodeWithParagraph($I, $text); + $I->amOnPage($page->toUrl()->toString()); + $I->canSee($page->label(), 'h1'); + $I->canSeeElement('img[alt="alt text"][src*="' . $image_name . '"][src*="/large/"]'); + $I->clickWithLeftButton('a.colorbox'); + $I->waitForElementVisible('#cboxLoadedContent img'); + $I->canSee('alt text', '#cboxTitle'); + + $text = ' '; + $page = $this->getNodeWithParagraph($I, $text); + $I->amOnPage($page->toUrl()->toString()); + $I->canSee($page->label(), 'h1'); + $I->canSeeElement('img[alt="alt text"][src*="' . $image_name . '"][src*="/medium/"]'); + $I->clickWithLeftButton('a.colorbox'); + $I->waitForElementVisible('#cboxLoadedContent img'); + $I->canSee('alt text', '#cboxTitle'); + + $text = ' '; + $page = $this->getNodeWithParagraph($I, $text); + $I->amOnPage($page->toUrl()->toString()); + $I->canSee($page->label(), 'h1'); + $I->canSeeElement('img[alt="alt text"][src*="' . $image_name . '"][src*="/thumbnail/"]'); + $I->clickWithLeftButton('a.colorbox'); + $I->waitForElementVisible('#cboxLoadedContent img'); + $I->canSee('alt text', '#cboxTitle'); + } + /** * Get a node with a wysiwyg paragraph on it. *