Definition
Promotion image is used in the splash pages to highlight special content or offers and in the homepage's slider.
General use (Default)
Lumination modifiers
The background image displayed can be darker or lighter. According to the image's nature, text's color can be set to black or white. Previous example is the default one (dark). Next one is the "light background" example.
The modifier naming is set according to the image's brightness, not the text's color:
Collection labeled
If collection property is filled with a valid collection value, a label should be displayed.
Handlebars
Razor
Open in new tabAlignment modifiers
The alignment modifiers allow to change the component's inner content alignment.
Handlebars
Razor
Open in new tabGradient modifiers
In some cases, a gradient may be needed as a background in order to make text more visible. This can be set for both dark and light images. Gradient colors will change according to image's brightness:
Both alignment and gradient modifiers applied together
Properties
This is a really long text...That forces the promotion image to grow in height, ignoring aspect ratio.
Lorem ipsum dolor sit amet, te est putent vocent apeirian, tota fugit cu vel, est quis impetus sententiae no. Mazim iusto dicunt vim id, eam ex modo commodo repudiare. Duis graeco eum et. Id est amet zril reprimique. Utroque luptatum evertitur his eu, sed eripuit antiopam conclusionemque et, eu dolorem molestie sit. Simul sanctus pri no, apeirian deterruisset his ei. Simul choro tantas eu vel.
- Vis in iracundia sadipscing
- Duo ea alii rebum reprimique
- Cu sumo nostro senserit eum
- Sed eu nibh mutat, at fabulas iracundia sit
Lorem ipsum dolor sit amet, te est putent vocent apeirian, tota fugit cu vel, est quis impetus sententiae no. Mazim iusto dicunt vim id, eam ex modo commodo repudiare. Duis graeco eum et. Id est amet zril reprimique. Utroque luptatum evertitur his eu, sed eripuit antiopam conclusionemque et, eu dolorem molestie sit. Simul sanctus pri no, apeirian deterruisset his ei. Simul choro tantas eu vel.
- Vis in iracundia sadipscing
- Duo ea alii rebum reprimique
- Cu sumo nostro senserit eum
- Sed eu nibh mutat, at fabulas iracundia sit
This is a really short text...To show that aspect ratio of promotion image next to me works.
Handlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabPromotion Images Grouped
Promotion images can be displayed inside a group. Layout options, besides the single image, are 2 and 3 items displayed as shown here:
Handlebars
Razor
Open in new tabHandlebars
No Handlebars template available
As there's no consumer using HBS, it's considered not needed for now.
Enable development mode to check the available JS template.
Razor
Open in new tabHandlebars
Razor
Open in new tabPromotion Images Variations
Promotion images can have variations as shown here: