Merge pull request #2220 from tf/teaser-text-on-image

Add teaser list text position to place text on image

Author: tf

entry_types/scrolled/config/locales/new/ext-link-options.de.yml

@@ -28,7 +28,14 @@ de:
               values:
                 below: "Unter dem Bild"
                 right: "Rechts neben dem Bild"
+                overlay: "Auf dem Bild"
                 none: "Keine"
+            overlayOpacity:
+              label: Abblendung
+              inline_help: |-
+                Intensität des Farbverlaufs, der hinter den Text
+                gelegt wird, um den Kontrast auf unruhigen
+                Hintergründen zu verbessern.
             thumbnailSize:
               label: "Thumbnail-Breite"
               inline_help: |-

entry_types/scrolled/config/locales/new/ext-link-options.en.yml

@@ -27,7 +27,13 @@ en:
               values:
                 below: "Below image"
                 right: "Right from image"
+                overlay: "On Image"
                 none: "None"
+            overlayOpacity:
+              label: Shadow opacity
+              inline_help: |-
+                Intensity of the color gradient that is placed behind
+                the text to improve contrast on busy backgrounds
             thumbnailSize:
               label: "Thumbnail width"
               inline_help: |-

entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js

@@ -43,10 +43,15 @@ editor.contentElementTypes.register('externalLinkList', {
 
       this.input('textPosition', SelectInputView, {
         values: features.isEnabled('external_links_options') ?
-                ['below', 'right', 'none'] :
+                ['below', 'right', 'overlay', 'none'] :
                 ['below', 'none']
       });
       this.group('ContentElementVariant', {entry});
+      this.input('overlayOpacity', SliderInputView, {
+        defaultValue: 70,
+        visibleBinding: 'textPosition',
+        visibleBindingValue: 'overlay'
+      });
       this.view(SeparatorView);
       this.group('ContentElementPosition');
       this.view(SeparatorView);

entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css

@@ -79,41 +79,68 @@
   width: 66%;
 }
 
+.textPosition-overlay .thumbnail {
+  width: 100%;
+}
+
 .background {
   --padding-inline: var(--theme-external-links-card-padding-inline, 15px);
-  flex: 1;
-  color: var(--theme-external-links-card-text-color, darkContentTextColor);
   --content-text-color: var(--theme-external-links-card-text-color, darkContentTextColor);
-  background-color: var(--theme-external-links-card-surface-color, lightContentSurfaceColor);
+  --card-surface-color: var(--theme-external-links-card-surface-color, lightContentSurfaceColor);
+  color: var(--content-text-color);
+  background-color: var(--card-surface-color);
+  flex: 1;
   padding-left: min(var(--padding-inline), 5px);
   padding-right: min(var(--padding-inline), 5px);
 }
 
+.invert > .background {
+  --card-surface-color: var(--theme-external-links-card-surface-color, darkContentSurfaceColor);
+  --content-text-color: var(--theme-external-links-card-text-color, lightContentTextColor);
+}
+
+.textPosition-overlay .background {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background: transparent;
+  z-index: 1;
+}
+
+.textPosition-overlay .background::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: -2rem;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(0deg, var(--card-surface-color), transparent);
+  opacity: calc(0.9 * var(--overlay-opacity, 0.7));
+}
+
+
 .textPosition-none .background {
   display: none;
 }
 
-.textPosition-below .details {
+.textPosition-below .details,
+.textPosition-overlay .details {
   padding-top: 15px;
   padding-bottom: 20px;
   padding-left: calc(var(--padding-inline) - 5px);
   padding-right: calc(var(--padding-inline) - 5px);
 }
 
-.textPosition-below .details:first-child {
+.textPosition-below .details:first-child,
+.textPosition-overlay .details:first-child {
   padding-top: 20px;
 }
 
 .textPosition-right .details {
   padding: 10px 10px 10px 15px;
 }
 
-.invert > .background {
-  background-color: var(--theme-external-links-card-surface-color, darkContentSurfaceColor);
-  color: var(--theme-external-links-card-text-color, lightContentTextColor);
-  --content-text-color: var(--theme-external-links-card-text-color, lightContentTextColor);
-}
-
 .tagline {
   composes: typography-externalLinkTagline from global;
   line-height: 1.3;
@@ -127,6 +154,10 @@
   margin: 0 0 1rem;
 }
 
+.textPosition-overlay .title:last-child {
+  margin-bottom: 0;
+}
+
 .details p {
   margin-bottom: 0;
 }

entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.js

@@ -88,6 +88,7 @@ export function ExternalLinkList(props) {
             textPositionStyles[`linkAlignment-${props.configuration.linkAlignment}`],
             textPositionStyles[`textPosition-${textPosition}`]
           )}
+          style={{'--overlay-opacity': (props.configuration.overlayOpacity || 70) / 100}}
           onClick={handleListClick}>
         {linkList.map((link, index) =>
           <ExternalLink {...link}

entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js

@@ -204,19 +204,19 @@ storiesOfContentElement(module, {
   inlineFileRights: true
 });
 
-[['below', 6], ['right', 3]].forEach(([textPosition, linkCount]) =>
+[['below'], ['right'], ['overlay', 'square']].forEach(([textPosition, thumbnailAspectRatio]) =>
   storiesOf(`Content Elements/externalLinkList`, module)
     .add(
       `Text Position - ${textPosition}`,
-    () => (
-      <RootProviders seed={exampleSeed({textPosition, linkCount})}>
-        <Entry />
-      </RootProviders>
-    )
+      () => (
+        <RootProviders seed={exampleSeed({textPosition, thumbnailAspectRatio})}>
+          <Entry />
+        </RootProviders>
+      )
   )
 );
 
-function exampleSeed({textPosition, linkCount}) {
+function exampleSeed({textPosition, thumbnailAspectRatio}) {
   const sectionConfiguration = {
     transition: 'scroll'
   };
@@ -255,9 +255,9 @@ function exampleSeed({textPosition, linkCount}) {
       }
     ],
     contentElements: [
-      ...exampleContentElements(1, 'left', textPosition, linkCount),
-      ...exampleContentElements(2, 'center', textPosition, linkCount),
-      ...exampleContentElements(3, 'right', textPosition, linkCount),
+      ...exampleContentElements(1, 'left', textPosition, thumbnailAspectRatio),
+      ...exampleContentElements(2, 'center', textPosition, thumbnailAspectRatio),
+      ...exampleContentElements(3, 'right', textPosition, thumbnailAspectRatio),
     ]
   });
 }
@@ -274,7 +274,7 @@ function linkCount({layout, textPosition, width, linkWidth}) {
   }
 }
 
-function exampleContentElements(sectionId, layout, textPosition) {
+function exampleContentElements(sectionId, layout, textPosition, thumbnailAspectRatio) {
   return [
     exampleHeading({sectionId, text: `Layout ${layout}`}),
     ...([
@@ -293,6 +293,7 @@ function exampleContentElements(sectionId, layout, textPosition) {
             textPosition,
             width,
             linkWidth,
+            thumbnailAspectRatio,
             ...links({
               count: linkCount({layout, textPosition, width, linkWidth})
             })