Option to add image card at specific positions

[coopjakob]

This would be a solution to be able to add ads at next to cards instead of using a banner on top of the page. We begin with a simplified solution and places ads as the first card (place 1) and on place 12. This is similar to the solution used on category pages today.

We think we can expect higher click rate. But it will also free some space on desktop because the banner takes most of the screen on laptops, and for everyone it might not be very effective because you quickly focus on the products below it.

The image will have a size of 230 x 460 px and full height will always be visible. The left and right side will be cropped. This size is calculated based on a minimum of 1:2 aspect ratio and max of 2:3. FYI, this results into some images being cropped down in normal cases. In some cases product cards (next to the ad) will have unexpected amount of extra information and the width will be even smaller.

From a dev perspective I think it will be enough to use:

background-size: cover;
background-repeat: no-repeat;
background-position: center top;

A "Shop now" (Handla nu) button is automatically added to the bottom of the card in the same position as action buttons on product cards. This button+label is same for all ads.

Data needed:

• img url
• alt/title (can't be used on background images...)
• click url

[coopjakob]

[benjick]

The framework for this is available here: https://github.com/benjick/kenora-thistles-nuxt/pull/6/

[benjick]

Done in #15