Add new text and overlay settings to image with text #944

martinamarien · 2021-11-24T14:35:08Z

Why are these changes introduced?
This PR adds new settings to the image with text section:

Horizontal Text alignment (mobile and desktop)
Vertical text alignment
Overlay text box
Image size

fixes #945

What approach did you take?

1. Horizontal Text alignment (mobile and desktop)
Used text-align to change text position.

2. Vertical text alignment
Used flexbox for the vertical alignment of the text inside of the standard layout and for the overlap layout.

3. Overlay text box
I decided not to use position: absolute for this layout. The reason being: if the text were to expand below or above the image, it would overlap content above/below it. Instead, I used flexbox and height: auto to allow text box to collapse.

Behaviour of text box when content position is set to:

Top: The textbox will remain 3rem below the top of the image, and the textbox will grow downward on resize or if the text is larger than the image height.
Bottom: The textbox will remain 3rem above the bottom of the image, and the textbox will grow upward on resize or if the text is larger than the image height.
Cental: The textbox will remain in the middle relative to the image. The text box will grow up and down on resize or if text is larger than the image height, so that the image is always centered relative to the textbox.

4. Image size
Leveraged our grid system and flexbox to ensure image/text grows as needed to take up remaining 2/3 of the space for the small and large settings.

Demo links
See demo shop

Checklist

martinamarien · 2021-11-30T17:41:18Z

Updates

Full bleed background when "no-overlay" is selected. Pngs now use the right color scheme background color.
Image uses the theme background color (background 1) when "no-overlap" is selected.
Image with text now has a subtitle block to give merchants more flexibility with their text layout/hierachy.

tyleralsbury

First pass looks good. There's a minor spelling issue, but testing + code look great. Will wait for UX to review and give feedback before finalizing my review.

locales/en.default.schema.json

ludoboludo

Looking very cool. I like this new flexibility and cool looking design with the overlap 👌

ludoboludo · 2021-11-30T19:47:23Z

assets/component-image-with-text.css

+
+  .image-with-text--overlap .image-with-text__text-item {
+    display: flex;
+    padding: 3rem 0; 


We might want to remove this padding only at the top, only at the bottom or both depending on the desktop content position: screenshot.

Since we already have the margin on the section at the top and bottom.

I still believe this is something to address to make sure we don't have unwanted space

ludoboludo · 2021-11-30T19:57:53Z

locales/en.default.schema.json

@@ -958,7 +958,21 @@
          "options__3": {
            "label": "Large"
          },
-          "label": "Image ratio"
+          "label": "Image height",
+          "info": "Determines section height."


Here if the text box is long due to content it makes the image adapts to the space its given. So say you have chosen adapt to image and the content is long, then your image isn't fully shown anymore (depending on the aspect ratio).

Should it keep it's aspect ration and be aligned vertically or we keep it as is ? I think this behaviour is similar for another section where there is a min-height set. So it won't technically, always be Adapted to the first image.

This is expected, and it already behaves this way. It's based on the image aspect ratio. If we always want the full width of the image to be visible, then the entire section would need to be revisited because the section's behaviour (no-overlap) is based on the image being the same height as the text. I'll leave this as is, and talk to Wik about this as a follow up.

Ah sounds good 👍

Does "Adapt to content" or something similar make more sense? The behaviour looks solid but the content might be a bit misleading. No strong opinions.

I don't think it's adapting to content though. So the height of the image is based on the image height setting - and in this case it's adapting to the image height, but the width is determined by another setting.

ludoboludo · 2021-11-30T20:00:27Z

locales/en.default.schema.json

+          "options__2": {
+            "label": "Overlap"
+          },
+          "label": "Content layout"


Could it be useful to have an option to choose what is going to be "in front" ?

I like this suggestion - being able to choose how they layer can unlock new effects.

I will add this as something to consider as a follow up. Particularly because we are not offering a way to modify the overlap value and it could result in text being covered.

assets/component-image-with-text.css

ludoboludo · 2021-11-30T20:24:48Z

locales/en.default.schema.json

+            "label": "Overlap"
+          },
+          "label": "Content layout"
+        },


Also, just an idea to throw out there. Adding a setting for people use the CSS property clip-path could be cool. Maybe overkill 😅 but that would allow some potential neat layouts:

This would be sick but to really do it properly, we would need to have some interface (similar to gradients) in the editor for creating these shapes.

Yeah for sure. Though it seems that what triggers the change is to have a rough implementation of it first maybe 🤔 But it doesn't make for the best experience for merchants.

The neat thing too is that you can do clip path based on an svg path. And have even cooler effects: blobs, dots patterns, etc. There are some cool example in Sara Soueidan's article.

sections/image-with-text.liquid

katycobb · 2021-12-03T21:59:52Z

@martinamarien

-The Desktop Content Position setting seems to be moving the image, not the text/button/container. I think this is opposite behavior to other sections like slideshow? Note: this only happens when I choose “Small” for image height.

-Question: what is the default behavior on mobile for Content Position? Since there isn’t a mobile-specific setting, we might want to add help text under Desktop Content Position to describe what to expect on mobile. (Following the same pattern of the Desktop image placement and Desktop image width settings)

tyleralsbury

Approving. Let me know if it goes stale - everything looks good to me.

tyleralsbury · 2021-12-08T18:45:13Z

config/settings_data.json

@@ -60,4 +60,4 @@
      }
    }
  }
-}
+}


Not sure when or where it was removed, but we should keep the trailing new line to prevent conflicts in this file in the long term.

Suggested change

}

}

tyleralsbury · 2021-12-08T18:46:15Z

templates/index.json

@@ -103,4 +103,4 @@
    "video",
    "multi_column"
  ]
-}
+}


Same deal here.

Suggested change

}

}

katycobb · 2021-12-08T22:56:41Z

@martinamarien just jammed with Wik - we'd like to add help text under the Desktop content position field to explain how this behaves on mobile: Position is automatically optimized for mobile.

Let me know if you need more info! cc @wiktoriaswiecicka

melissaperreault · 2021-12-09T03:31:33Z

👋 Not sure if this is relevant to this PR, it can be tackled on another one.

Image with text on smaller screen loses padding-right

cc. @wiktoriaswiecicka

ludoboludo · 2021-12-14T17:43:49Z

assets/component-image-with-text.css

+
+  .image-with-text--overlap .image-with-text__text-item {
+    display: flex;
+    padding: 3rem 0; 


I still believe this is something to address to make sure we don't have unwanted space

ludoboludo · 2021-12-14T17:51:47Z

assets/component-image-with-text.css

+}
+
+.image-with-text--overlap .image-with-text__content {
+  transform: translate(0 , -3rem);


This I think creates some extra space on mobile. Seems like using a negative margin-top makes it better: video

ludoboludo

Looking good. Tested on iOS as well and no issues noticed.

I wonder if a medium size option should be added for the Image height settings 🤷 but that can easily be added in the future if needed.

I think it could be useful when the image you're dealing with is portrait and long. You don't end up having an option that is between small and large since the aspect ratio makes adapt to image be as large as the large option or bigger.

* Add new settings and translations * add text overlay, image and text alignment css * remove specificity and update layout setting * update content * update label * Add caption-with-letter-spacing and fix translation content * update color behaviour and add subtitle setting * fix center spelling * Update 11 translation files * Update 15 translation files * address feedback and fix content * Update 5 translation files * Update 15 translation files * Update caption block styling * Update 3 translation files * Update 18 translation files * Update 2 translation files * re-add new line Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>

martinamarien added 2 commits November 23, 2021 19:33

Add new settings and translations

1d9725c

add text overlay, image and text alignment css

e2424b5

martinamarien self-assigned this Nov 24, 2021

remove specificity and update layout setting

c6429d6

martinamarien force-pushed the update-image-with-text-off-main branch from 2f2cfe8 to c6429d6 Compare November 24, 2021 16:14

martinamarien marked this pull request as ready for review November 24, 2021 16:44

tyleralsbury self-requested a review November 29, 2021 15:23

martinamarien added 2 commits November 29, 2021 16:25

update content

84fa56e

update label

dd4f29b

martinamarien force-pushed the update-image-with-text-off-main branch from fb8756c to 021ca49 Compare November 30, 2021 15:20

Add caption-with-letter-spacing and fix translation content

4318001

martinamarien force-pushed the update-image-with-text-off-main branch from 021ca49 to 4318001 Compare November 30, 2021 15:22

update color behaviour and add subtitle setting

3b91df6

tyleralsbury reviewed Nov 30, 2021

View reviewed changes

locales/en.default.schema.json Outdated Show resolved Hide resolved

locales/en.default.schema.json Outdated Show resolved Hide resolved

ludoboludo self-requested a review November 30, 2021 19:10

fix center spelling

77297d7

ludoboludo reviewed Nov 30, 2021

View reviewed changes

translation-platform bot and others added 3 commits November 30, 2021 21:04

Update 11 translation files

fba3e41

Update 15 translation files

ccc7e16

address feedback and fix content

e396f37

martinamarien requested a review from wiktoriaswiecicka December 6, 2021 14:42

translation-platform bot added 2 commits December 6, 2021 15:01

Update 5 translation files

ae84ec1

Update 15 translation files

2b02983

wiktoriaswiecicka previously approved these changes Dec 8, 2021

View reviewed changes

Update caption block styling

4db27ae

martinamarien dismissed wiktoriaswiecicka’s stale review via 4db27ae December 8, 2021 16:57

Update 3 translation files

52ddafe

wiktoriaswiecicka previously approved these changes Dec 8, 2021

View reviewed changes

tyleralsbury previously approved these changes Dec 8, 2021

View reviewed changes

Update 18 translation files

e48ac93

translation-platform bot dismissed stale reviews from tyleralsbury and wiktoriaswiecicka via e48ac93 December 9, 2021 19:11

kmeleta mentioned this pull request Dec 10, 2021

Image with text border/corner/shadow updates #1003

Merged

5 tasks

Update 2 translation files

a33fc5a

tyleralsbury previously approved these changes Dec 14, 2021

View reviewed changes

re-add new line

7016b9b

martinamarien dismissed tyleralsbury’s stale review via 7016b9b December 14, 2021 16:24

tyleralsbury approved these changes Dec 14, 2021

View reviewed changes

ludoboludo reviewed Dec 14, 2021

View reviewed changes

ludoboludo approved these changes Dec 15, 2021

View reviewed changes

martinamarien merged commit a0fd1a3 into main Dec 15, 2021

martinamarien deleted the update-image-with-text-off-main branch December 15, 2021 17:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add new text and overlay settings to image with text #944

Add new text and overlay settings to image with text #944

martinamarien commented Nov 24, 2021 •

edited

Loading

martinamarien commented Nov 30, 2021 •

edited

Loading

tyleralsbury left a comment

ludoboludo left a comment

ludoboludo Nov 30, 2021

ludoboludo Dec 14, 2021

ludoboludo Nov 30, 2021

martinamarien Dec 3, 2021

ludoboludo Dec 3, 2021

tyleralsbury Dec 8, 2021

martinamarien Dec 8, 2021

ludoboludo Nov 30, 2021

tyleralsbury Nov 30, 2021

martinamarien Dec 3, 2021

ludoboludo Nov 30, 2021

tyleralsbury Nov 30, 2021

ludoboludo Nov 30, 2021

ludoboludo Nov 30, 2021

katycobb commented Dec 3, 2021

tyleralsbury left a comment

tyleralsbury Dec 8, 2021

tyleralsbury Dec 8, 2021

katycobb commented Dec 8, 2021

melissaperreault commented Dec 9, 2021

ludoboludo Dec 14, 2021

ludoboludo Dec 14, 2021

ludoboludo left a comment •

edited

Loading

@@ @@ -60,4 +60,4 @@ @@
                     }
                   }
                 }
-              }
+              }

Add new text and overlay settings to image with text #944

Add new text and overlay settings to image with text #944

Conversation

martinamarien commented Nov 24, 2021 • edited Loading

martinamarien commented Nov 30, 2021 • edited Loading

tyleralsbury left a comment

Choose a reason for hiding this comment

ludoboludo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

katycobb commented Dec 3, 2021

tyleralsbury left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

katycobb commented Dec 8, 2021

melissaperreault commented Dec 9, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ludoboludo left a comment • edited Loading

Choose a reason for hiding this comment

martinamarien commented Nov 24, 2021 •

edited

Loading

martinamarien commented Nov 30, 2021 •

edited

Loading

ludoboludo left a comment •

edited

Loading