[Story #29] User sees images from the same series as the currently viewed image

[tkacheva]

Story

As a Merchant I want to see images that are from the same series as currently viewed image so that I have better image discovery experience and find the image I need faster

Business Value

enhanced image discovery

Preconditions

• Admin User is logged into Admin Panel
• Admin User views stock image details

Acceptance Criteria

• User sees unto 4 images that are from the same series that currently viewed one
• User selects any of these images and sees its details
• User activates viewing next\previous image details and sees image details updated to next/previous image in the series.

[chfabbro]

There are two different pieces of functionality here. One is to show the series that contains this image (this is defined by the Contributor when she/he uploads the image). The other function is to show images which are visually similar, whether they are uploaded by that Contributor or not. Both functions have specific API methods.

search_parameters[serie_id] will return all images part of the same series as the media ID you supply. In the example below, image 177913151 belongs to a series of 32 images. This will return all 32 in that series.
https://stock.adobe.io/Rest/Media/1/Search/Files?search_parameters[locale]=en_US&search_parameters[serie_id]=177913151&result_columns[]=nb_results&result_columns[]=id

Compare with the results on Adobe Stock:
https://stock.adobe.com/search/images?filters%5Bcontent_type%3Aphoto%5D=1&filters%5Bcontent_type%3Aillustration%5D=1&filters%5Bcontent_type%3Azip_vector%5D=1&filters%5Bcontent_type%3Avideo%5D=0&filters%5Bcontent_type%3Atemplate%5D=0&filters%5Bcontent_type%3A3d%5D=0&filters%5Binclude_stock_enterprise%5D=0&filters%5Bis_editorial%5D=0&filters%5Bcontent_type%3Aimage%5D=1&order=relevance&price%5B%24%5D=1&safe_search=1&serie_id=177913151&search_page=1&search_type=see-more&get_facets=0

To view all images similar to the current image, use search_parameters[similar]. Example:
https://stock.adobe.io/Rest/Media/1/Search/Files?search_parameters[locale]=en_US&search_parameters[similar]=177913151&result_columns[]=nb_results&result_columns[]=id

This returns 5,264,341 results. For more specific results, you should also supply the keyword used in the original search. For example, if you include search words "office party" with this request, the total number of responses is reduced to 5,779.
https://stock.adobe.io/Rest/Media/1/Search/Files?search_parameters[locale]=en_US&search_parameters[similar]=177913151&search_parameters[words]=office+party&result_columns[]=nb_results&result_columns[]=id

[tkacheva]

@sivaschenko

1. the separation line is missing in tabs component that is used for switching between "more from the model" to "more from the series"
2. not active tab label should not be bold

https://devdocs.magento.com/guides/v2.3/pattern-library/containers/tabs/tabs.html

[tkacheva]

@sivaschenko related images are not aligned by width (see mockup https://xd.adobe.com/view/0a8fc470-497b-4fd6-4043-62560c21d8db-7cbe/screen/1acd0ba2-bbc2-47a9-9e2a-783156db6900/Stock-Image-specs) Stock web interface crops the related images to make them aligned

[filmaj]

We discussed with @sivaschenko @tkacheva and Eugene and agreed on a solution that:

• statically sizing each <img> container <div> and setting its overflow:hidden
• position:absolute the <img> inside the container
• also, use some positioning and margin tricks to "center" the image inside of the container.

Though I think it is worth considering the solution presented in this StackOverflow post. It has a nice approach of using object-fit and object-position properties on the <img> tag - and nothing else (no tweaks needed on the container). For example, using the following properties on the <img> tag:

• width: 160px;
• height: 105px;
• object-position: center;
• object-fit: cover;

... yields something like this:

... which I think is a clean solution.

[sivaschenko]

Space needs to be reserved while loading related images @belbiy please provide a mockup.

[sivaschenko]

Space is reserved - related issue is fixed #765