Fix media, product, and collection cards placeholder #2682

ludoboludo · 2023-06-01T14:44:49Z

PR Summary:

Fix some issues introduced with new placeholders. Some weren't taking into account global settings and didn't reflect them as we would expect.

Why are these changes introduced?

Fixes #2684 and fixes #2685

Fixes issues with:

product cards (standard style) -> border, border radius and padding
collection cards (standard style) -> border, border radius and padding
medias -> border, border radius and shadows (image block & video block in collage section, video section, multirow, image with text)
featured product -> respect the media settings mentioned above

What approach did you take?

I reused some of the containers and classes applied on regular images.

Testing steps/scenarios

Here we will need to tweak global settings to make sure they're applied as we would expect. So you will need to play around with product cards, collection cards, and media global settings.

Those settings were showing the issue with borders on placeholder images but I'd encourage testing a few more different combinations.

Demo links

Editor

eugenekasimov

All works as expected. I couldn't find anything.

Also, I noticed that the padding for the product cards that we discussed is actually there and applied, we just cannot see it because of the transparent background :)

andrewetchen

All of the proposed changes in this PR look good to me! However, I wanted to bring up something I noticed in the Collage section. It's not a blocker, just something worth mentioning (see below).

When you have a combination of two blocks, there's a significant amount of empty space below the second block, specifically when it's a collection or product block. This behaviour doesn't occur with video or image blocks.

Edit: This occurs only when Card style is set to Use individual card style:

Screenshots

Collage section with Video + Collection blocks

Collage section with 2 Collection blocks

Collage section with Collection + Product blocks

Solution

We utilize the preserveAspectRatio attribute on some of the new placeholder images so it looks like I'll have to add preserveAspectRatio to the following placeholder image assets to remedy this:

collection-apparel-1
collection-apparel-2
collection-apparel-3
collection-apparel-4
product-apparel-1
product-apparel-2
product-apparel-3
product-apparel-4

Edit: I might have to edit the width and height as well.

Thoughts?

melissaperreault

Thank you Ludo! I tested the list below! 🚢

melissaperreault · 2023-06-01T20:41:51Z

I think this PR is solving these as well for these following right?

Cards Styles not applying to placeholder images #2686 (Except the blog cards)
Featured product placeholder image not applying default styles and/or presets #2685

ludoboludo · 2023-06-01T21:35:40Z

I think this PR is solving these as well for these following right?

Cards Styles not applying to placeholder images #2686 (Except the blog cards)

Featured product placeholder image not applying default styles and/or presets #2685

Featured product yes, but not card styles 🙂

andrewetchen

I tested the following sections in Chrome, FireFox, and Safari and everything but the featured product section looks good (see below):

I'll approve once we've addressed the featured product section 👍🏼

andrewetchen · 2023-06-01T21:50:15Z

sections/featured-product.liquid

+            {%- else -%}
+              <div class="product__media-item">
+                <div
+                  class="product-media-container global-media-settings gradient{% if section.settings.constrain_to_viewport %} constrain-height{% endif %}"
+                  style="--ratio: 1.0; --preview-ratio: 1.0;"
+                >
+                  {{ 'product-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
+                </div>
+              </div>
            {%- endif -%}


This looks good but we're also going to need to add these changes for when Desktop media position is set to Right so that global settings also apply to media:

Left desktop media position

Right desktop media position

andrewetchen

LGTM! 🎩

* Fix color for image in password (#2608) * [Image behavior] fixed background jitter fix on mobile (#2611) * [Animation in editor] Remove transform translate when re rendering and re ordering blocks (#2614) * Remove transform translate when re rendering and re ordering blocks * target only what's needed * [bug] Horizontal scrolling on mobile. (#2617) * Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet. * Remove redundant preconnect to cdn.shopify.com (#2621) * Update reverse scheme (#2626) * [Footer] Remove Global Media settings inheritance from images (#2631) * Send timezone offset as string instead of integer (#2636) * Fix slider scrolling issue (#2635) * Fix background gradient for Related Products. (#2641) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Quick add remove animation from image and content (#2657) * Add default values for color scheme group (#2660) * Revert unwanted changes (#2669) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Revert "Update from Shopify for theme dawn/release/10.0.0" This reverts commit 89d927e. * Remove forced white text color in Image Banner & Slideshow (#2663) * Remove forced white color. * Change color scheme for Dawn's default homepage Image Banner.. * Remove warning about color scheme usage. * Fix bug with transparent buttons on mobile. * Remove unused info key from translated files. * Update display of button when it's in a mobile container. * Update existing placeholder images (#2610) * Update existing placeholder images * Featured collection and product card * Featured product section * Collection list section * Featured blog and multirow sections * Slideshow: change order of placeholder images * Collage adjustments for product and collection cards * Image with text adjustments * Featured product: re-add `.product--no-media` selectors * Update featured product section * Update `card-collection` * Cleanup `card-collection` --------- Co-authored-by: Ludo <ludo.segura@shopify.com> * Gradient fix for transparent background medias and cards (#2651) * Fix media, product, and collection cards placeholder (#2682) * Fix missing else for collection cards (#2692) --------- Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kjell Reigstad <kjell@kjellr.com> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>

* made the test/default blog post 3 by default * blog default posts are not mobile responsive and on a slider. created snippet for blog-placeholder that renders into featured-blog with changable arguments * removed commented out code * default blog posts now are modifiable by post-limit and column number presets * reformated code, reverted header back to h1, removed snippet, and made changes as suggested * noticed the blog section needs a margin bottom when color scheme is applied * removed padding from blog and removed date and author presets * Fix link formatting in Related Products heading (#2680) * fix default UI for dropdown and mega menu (#2644) * added vertical padding and made l2 bold to mega menu * added vertical padding to drop down * fixed default UI for dropdown and mega menu * added hover effect to all l2 links and fixed overlapping or mega menu * adding padding to l3 links and fixed hover effect for dropdown * reverted the mega menu back to the current setting * changed horizontal grid gap on mega menu and vertical paddings on dropdown menu * made vertical grid gap at 1.8 rem to match the 3 rem vertical paddings on mega-menu container * removed the unnecessary lines of code * removed the text-thickness that was making l2/l3 links a different size from l1 links * added a hover effect over active link * removed uneccessary link size and white space * Add release/v10.0.0 branch fixes to main (#2693) * Fix color for image in password (#2608) * [Image behavior] fixed background jitter fix on mobile (#2611) * [Animation in editor] Remove transform translate when re rendering and re ordering blocks (#2614) * Remove transform translate when re rendering and re ordering blocks * target only what's needed * [bug] Horizontal scrolling on mobile. (#2617) * Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet. * Remove redundant preconnect to cdn.shopify.com (#2621) * Update reverse scheme (#2626) * [Footer] Remove Global Media settings inheritance from images (#2631) * Send timezone offset as string instead of integer (#2636) * Fix slider scrolling issue (#2635) * Fix background gradient for Related Products. (#2641) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Quick add remove animation from image and content (#2657) * Add default values for color scheme group (#2660) * Revert unwanted changes (#2669) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Revert "Update from Shopify for theme dawn/release/10.0.0" This reverts commit 89d927e. * Remove forced white text color in Image Banner & Slideshow (#2663) * Remove forced white color. * Change color scheme for Dawn's default homepage Image Banner.. * Remove warning about color scheme usage. * Fix bug with transparent buttons on mobile. * Remove unused info key from translated files. * Update display of button when it's in a mobile container. * Update existing placeholder images (#2610) * Update existing placeholder images * Featured collection and product card * Featured product section * Collection list section * Featured blog and multirow sections * Slideshow: change order of placeholder images * Collage adjustments for product and collection cards * Image with text adjustments * Featured product: re-add `.product--no-media` selectors * Update featured product section * Update `card-collection` * Cleanup `card-collection` --------- Co-authored-by: Ludo <ludo.segura@shopify.com> * Gradient fix for transparent background medias and cards (#2651) * Fix media, product, and collection cards placeholder (#2682) * Fix missing else for collection cards (#2692) --------- Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kjell Reigstad <kjell@kjellr.com> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> * made the test/default blog post 3 by default * added updated placeholder image * added the different placeholder images, while maintaining ability to edit with presets * blog card theme settings work on default blog posts * removed css that wasn't being used * reverted to original code without theme settings * fixed prettier error by removing extra quotation mark and made test blog default instead of news --------- Co-authored-by: Jon Neill <jonathan.neill@shopify.com> Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kjell Reigstad <kjell@kjellr.com> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>

* Fix color for image in password (Shopify#2608) * [Image behavior] fixed background jitter fix on mobile (Shopify#2611) * [Animation in editor] Remove transform translate when re rendering and re ordering blocks (Shopify#2614) * Remove transform translate when re rendering and re ordering blocks * target only what's needed * [bug] Horizontal scrolling on mobile. (Shopify#2617) * Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet. * Remove redundant preconnect to cdn.shopify.com (Shopify#2621) * Update reverse scheme (Shopify#2626) * [Footer] Remove Global Media settings inheritance from images (Shopify#2631) * Send timezone offset as string instead of integer (Shopify#2636) * Fix slider scrolling issue (Shopify#2635) * Fix background gradient for Related Products. (Shopify#2641) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Quick add remove animation from image and content (Shopify#2657) * Add default values for color scheme group (Shopify#2660) * Revert unwanted changes (Shopify#2669) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Revert "Update from Shopify for theme dawn/release/10.0.0" This reverts commit 89d927e. * Remove forced white text color in Image Banner & Slideshow (Shopify#2663) * Remove forced white color. * Change color scheme for Dawn's default homepage Image Banner.. * Remove warning about color scheme usage. * Fix bug with transparent buttons on mobile. * Remove unused info key from translated files. * Update display of button when it's in a mobile container. * Update existing placeholder images (Shopify#2610) * Update existing placeholder images * Featured collection and product card * Featured product section * Collection list section * Featured blog and multirow sections * Slideshow: change order of placeholder images * Collage adjustments for product and collection cards * Image with text adjustments * Featured product: re-add `.product--no-media` selectors * Update featured product section * Update `card-collection` * Cleanup `card-collection` --------- Co-authored-by: Ludo <ludo.segura@shopify.com> * Gradient fix for transparent background medias and cards (Shopify#2651) * Fix media, product, and collection cards placeholder (Shopify#2682) * Fix missing else for collection cards (Shopify#2692) --------- Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kjell Reigstad <kjell@kjellr.com> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>

* made the test/default blog post 3 by default * blog default posts are not mobile responsive and on a slider. created snippet for blog-placeholder that renders into featured-blog with changable arguments * removed commented out code * default blog posts now are modifiable by post-limit and column number presets * reformated code, reverted header back to h1, removed snippet, and made changes as suggested * noticed the blog section needs a margin bottom when color scheme is applied * removed padding from blog and removed date and author presets * Fix link formatting in Related Products heading (Shopify#2680) * fix default UI for dropdown and mega menu (Shopify#2644) * added vertical padding and made l2 bold to mega menu * added vertical padding to drop down * fixed default UI for dropdown and mega menu * added hover effect to all l2 links and fixed overlapping or mega menu * adding padding to l3 links and fixed hover effect for dropdown * reverted the mega menu back to the current setting * changed horizontal grid gap on mega menu and vertical paddings on dropdown menu * made vertical grid gap at 1.8 rem to match the 3 rem vertical paddings on mega-menu container * removed the unnecessary lines of code * removed the text-thickness that was making l2/l3 links a different size from l1 links * added a hover effect over active link * removed uneccessary link size and white space * Add release/v10.0.0 branch fixes to main (Shopify#2693) * Fix color for image in password (Shopify#2608) * [Image behavior] fixed background jitter fix on mobile (Shopify#2611) * [Animation in editor] Remove transform translate when re rendering and re ordering blocks (Shopify#2614) * Remove transform translate when re rendering and re ordering blocks * target only what's needed * [bug] Horizontal scrolling on mobile. (Shopify#2617) * Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet. * Remove redundant preconnect to cdn.shopify.com (Shopify#2621) * Update reverse scheme (Shopify#2626) * [Footer] Remove Global Media settings inheritance from images (Shopify#2631) * Send timezone offset as string instead of integer (Shopify#2636) * Fix slider scrolling issue (Shopify#2635) * Fix background gradient for Related Products. (Shopify#2641) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Quick add remove animation from image and content (Shopify#2657) * Add default values for color scheme group (Shopify#2660) * Revert unwanted changes (Shopify#2669) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Revert "Update from Shopify for theme dawn/release/10.0.0" This reverts commit 89d927e. * Remove forced white text color in Image Banner & Slideshow (Shopify#2663) * Remove forced white color. * Change color scheme for Dawn's default homepage Image Banner.. * Remove warning about color scheme usage. * Fix bug with transparent buttons on mobile. * Remove unused info key from translated files. * Update display of button when it's in a mobile container. * Update existing placeholder images (Shopify#2610) * Update existing placeholder images * Featured collection and product card * Featured product section * Collection list section * Featured blog and multirow sections * Slideshow: change order of placeholder images * Collage adjustments for product and collection cards * Image with text adjustments * Featured product: re-add `.product--no-media` selectors * Update featured product section * Update `card-collection` * Cleanup `card-collection` --------- Co-authored-by: Ludo <ludo.segura@shopify.com> * Gradient fix for transparent background medias and cards (Shopify#2651) * Fix media, product, and collection cards placeholder (Shopify#2682) * Fix missing else for collection cards (Shopify#2692) --------- Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kjell Reigstad <kjell@kjellr.com> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> * made the test/default blog post 3 by default * added updated placeholder image * added the different placeholder images, while maintaining ability to edit with presets * blog card theme settings work on default blog posts * removed css that wasn't being used * reverted to original code without theme settings * fixed prettier error by removing extra quotation mark and made test blog default instead of news --------- Co-authored-by: Jon Neill <jonathan.neill@shopify.com> Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kjell Reigstad <kjell@kjellr.com> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>

ludoboludo added 2 commits June 1, 2023 10:44

fix product and collection cards placeholder

c28f5b7

fix some media global settings as well as feat product section

66fc63b

ludoboludo marked this pull request as ready for review June 1, 2023 15:47

eugenekasimov self-requested a review June 1, 2023 15:50

ludoboludo requested review from melissaperreault, YoannJailin and andrewetchen June 1, 2023 15:53

ludoboludo changed the title ~~fix product and collection cards placeholder~~ Fix media, product, and collection cards placeholder Jun 1, 2023

eugenekasimov approved these changes Jun 1, 2023

View reviewed changes

andrewetchen reviewed Jun 1, 2023

View reviewed changes

melissaperreault approved these changes Jun 1, 2023

View reviewed changes

andrewetchen reviewed Jun 1, 2023

View reviewed changes

add same treatment to feat. product when placed on the right

88d1567

ludoboludo requested a review from andrewetchen June 2, 2023 13:48

andrewetchen approved these changes Jun 2, 2023

View reviewed changes

YoannJailin approved these changes Jun 2, 2023

View reviewed changes

ludoboludo merged commit 7304155 into release/10.0.0 Jun 2, 2023

ludoboludo deleted the placeholder-fix-border branch June 2, 2023 15:05

ludoboludo added a commit that referenced this pull request Jun 5, 2023

Fix media, product, and collection cards placeholder (#2682)

d0124a0

lougoncharenko mentioned this pull request Jul 5, 2023

Featured product placeholder image not applying default styles and/or presets #2685

Closed

kimberlyoleiro mentioned this pull request Jul 31, 2023

Add placeholder images to collection cards #2929

Open

1 task

SmolSoftBoi pushed a commit to m-k-enterprises/dawn that referenced this pull request Feb 18, 2024

Fix media, product, and collection cards placeholder (Shopify#2682)

b6145fc

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix media, product, and collection cards placeholder #2682

Fix media, product, and collection cards placeholder #2682

ludoboludo commented Jun 1, 2023 •

edited

Loading

eugenekasimov left a comment

andrewetchen left a comment •

edited

Loading

melissaperreault left a comment •

edited

Loading

melissaperreault commented Jun 1, 2023

ludoboludo commented Jun 1, 2023

andrewetchen left a comment

andrewetchen Jun 1, 2023

andrewetchen left a comment

Fix media, product, and collection cards placeholder #2682

Fix media, product, and collection cards placeholder #2682

Conversation

ludoboludo commented Jun 1, 2023 • edited Loading

PR Summary:

Why are these changes introduced?

What approach did you take?

Testing steps/scenarios

Demo links

eugenekasimov left a comment

Choose a reason for hiding this comment

andrewetchen left a comment • edited Loading

Choose a reason for hiding this comment

Screenshots

Solution

melissaperreault left a comment • edited Loading

Choose a reason for hiding this comment

melissaperreault commented Jun 1, 2023

ludoboludo commented Jun 1, 2023

andrewetchen left a comment

Choose a reason for hiding this comment

andrewetchen Jun 1, 2023

Choose a reason for hiding this comment

andrewetchen left a comment

Choose a reason for hiding this comment

ludoboludo commented Jun 1, 2023 •

edited

Loading

andrewetchen left a comment •

edited

Loading

melissaperreault left a comment •

edited

Loading