Adding Product Icon Stack, Play button on Image and Change image aspect ratio

[aishwaryamathuria]

We are working on the milo Aside enhancement ticket https://jira.corp.adobe.com/browse/MWPW-129917 and wanted some inputs on the suitable authoring for the 2 new variations :

1. Product icon stack
2. Video play Button
3. Image aspect ratio

Git code diff: https://github.com/adobecom/milo/compare/main...aishwaryamathuria:milo:pocAside?expand=1
POC preview with Product stack: https://pocaside--milo--aishwaryamathuria.hlx.page/drafts/mathuria/aside/asideprdlist-poc
POC preview with modal video: https://pocaside--milo--aishwaryamathuria.hlx.page/drafts/mathuria/aside/asidevideo-poc

Product Icon Stack:

Requirement:

	Mobile and Tablet
		- Split Asides of Large variation should support 4 icon and optional description in a 1x4 grid.
		- Split Asides of Medium variation should support 2 icon and optional description in a 1x2 grid.

	Desktop
		- Split Asides of Large variation should support 4 icon and optional description in a 2x2 grid.
		- Split Asides of Medium variation should support 2 icon and optional description in a 1x2 grid.

Authoring Solution:

The authoring proposed for this variation would require authors to add the product icon and description in form of an unordered list in the text area of aside block. The JS would then add the required size class to ‘ul’ tag (in case of supported aside) and format the grid.

Video Play button on image:

Requirement:

Author should be able to add play button on image that should play the video in Modal.

Authoring Solution:

On Milo adding a link with #modal will open the fragment in a modal.
The authoring proposed for this variation would require authors to add fragment link containing video with modal identifier ‘#modal’ in the image area of the aside block. The block will check if the image area contains a link with modalHash and if it does it will add a play icon with same href. On clicking the link the fragment will open in modal in which video will play.

Image aspect ratio:

Requirement:

Author should be able to change the aspect ratio of media. Keep it default or set it to following

Desktop: 16:9 or 4:3 Tablet: 16:9 or 4:3 Mobile: 16:9 or 4:3 or 1:1

Authoring Solution:

The authoring proposed for this variation would require authors to add the aspect-ratio below the media in format
Mobile Tablet Desktop or Mobile+Tablet Desktop or Mobile+Tablet+Desktop
to have required height of image in place of the default min-height or auto height. The block will check if the image area contains aspect ratio defined it will set the class in the to adjust height of media container accordingly in specific viewports and remove the ap tag containing the aspect ratio string after processing.

Please provide your inputs on the proposed solution.
Adding code diff for reference https://github.com/adobecom/milo/compare/main...aishwaryamathuria:milo:pocAside?expand=1

CC: @chrischrischris @vhargrave @dstrong23 @rgclayton @ryanmparrish @auniverseaway @salonijain3 @narcis-radu @amitbikram

[chrischrischris]

Product Icon and Video Play button solutions look good to me.

For the aspect ratio, do we have any existing similar implementations?

One possible change: instead of authors setting aspect-ratio: 4/3 we instead use keywords to represent the ratios where:
16/9 = wide, 4/3 = standard, 1/1 = square and change the "key" to format

format: square standard wide

I'm also not sure if we should be more explicit about the form factors ... but this seems a bit verbose.

Also do we have to also handle the vertical versions of the aspect ratios?

[aishwaryamathuria]

@chrischrischris The XD requires handling for horizontal versions of aspect ratio only.

[vhargrave]

Agree with what @chrischrischris wrote.
Additionally I probably wouldn't have put the icons and text in a list. Instead I'd just have the icons and text on one line and style everything correctly if the right variation (icon-stack) is present, since I find it more intuitive for the author. I don't find using a list per se bad though.

[aishwaryamathuria]

Thanks @chrischrischris @vhargrave
We will go ahead with the suggested changes for Product Icon Stack and Play button on Image.
We will take up the changes for aspect ratio as suggested and will use the format keywords to make it more intuitive.

[ryanmparrish]

Thanks @aishwaryamathuria, I am going to be implementing some of these patterns on the 'media' block so I'll follow the same conventions and will let you know if any questions come up.

FYI, I made a Util func decorateIconStack for a POC on the media block using your example. Maybe we can share this feature on both blocks? I've included some logic to wrap the icon in the link if the label is an <a> tag. This still uses a <ul> identifier, lmk when/if you get a chance to refactor that document model and I can do the same. Thanks
https://rparrish-media-products--milo--adobecom.hlx.page/drafts/rparrish/media/media-prdlist-poc

[aishwaryamathuria]

@rgclayton Could you please share your inputs on the aspect ratio authoring suggestion and if there is an alternative authoring approach we should use in place of specifying the "format: <> <>" string?

[auniverseaway]

Do we have real-world use cases and designs tied to the aspect ratio ask? I'd like to see shipping pages where this is needed. This is borderline Dexter territory with these types of granular controls.

I think icon-stack is redundant. If I have icons in a list, what else would they be? We should be able to detect this content quite easily instead of making our authors know of another variation name to make this pattern happen.

If we do have to ship aspect ratio (which I'm not a big fan of), human readable names is way better and +1 to @chrischrischris's suggestion of square, standard, wide.

[aishwaryamathuria]

Thanks Chris.. Sure .. we can remove the extra variation icon-stack name on block level and just target the ul tag directly.

[rgclayton]

For the aspect ratio ask. How are authors going to know which aspect ratios to apply? To Chris' point these are very granular asks that most authors/people don't think about applying unless specifically told to apply "X aspect ratio".

If these are needed, would it be better to programmatically apply these per breakpoint and not put the burden on the author to sort out?

[aishwaryamathuria]

@rgclayton Currently the image is adjusted to have 100% image container width and height for split aside.
The ask as per the design is to have the option to be able to change this size for the Medium and Large Split asides only. For these 2 aside variations the image can be defined to be 1:1 or 4:3 or 16:9 on different screen sizes to not have a full height in the split but it can be readjusted based on width and the specified format which we need as an input to make the adjustment.

[rgclayton]

@rgclayton Currently the image is adjusted to have 100% image container width and height for split aside. The ask as per the design is to have the option to be able to change this size for the Medium and Large Split asides only. For these 2 aside variations the image can be defined to be 1:1 or 4:3 or 16:9 on different screen sizes to not have a full height in the split but it can be readjusted based on width and the specified format which we need as an input to make the adjustment.

I get that. But are we assuming authors are going to know when to add the appropriate aspect ratio? That's my main concern/question. Would it be better to do this change programmatically per breakpoint?

[aishwaryamathuria]

@rgclayton As per our understanding, with respect to the XD shared, the authors would have information around when to use a particular aspect ratio. The concern with doing it programatically via breakpoints is that there are multiple aspect ratio options available on different media screens sizes and there is no specific aspect ratio linked to one media screen.

[aishwaryamathuria]

Closing the discussion. Have opened a PR with the latest inputs.