Plugin: Digital Publishing

Introduction

Utilising Digital Publishing, you can easily create attractive banners and scenic layouts without the need of external graphic software or HTML knowledge. This module helps to create banners containing HTML text or buttons, alongside images or coloured areas, all neatly organised in stackable layers, directly from your Shopware backend.

Installation

This extension can be found in our Shopware Store, the easiest way to find a specific plugin is the search-bar. Complete the order process and login to the backend of your store. Navigate to Configuration > Plugin manager > My purchases. You need to login and click the refresh button. Your new extension is now listed and can be installed. After installing the extension go to the menu entry installed and refresh. Activate the extension. Finally delete the cache under Settings > Cache/Performance > Clear Shop Cache and refresh the backend.

Basics

A banner created using Digital Publishing basically consists of three “working surfaces” lying on top of each other:

First there is the banner. It holds the name, and can be assigned a background image or colour.
You can create any number of layers within a banner. Layers do not have any impact on one another, as they are stacked over one another.
A layer can contain any number of elements (texts/images/buttons). Elements behave relatively to each other; each element sharing the same layer is arranged in a separate row below the previous element.

The module

Once opened, the module appears as follows:

New Banner (1): Creates a new banner, which is also displayed in the tree view beneath.
Banner list (2): All created banners are displayed here.
Search (3): Search through the banner list by name.
Information / preview area (4): After clicking on a banner, this section will display a preview of it. This also produces a template code, which can be tied into a template.

An unlabeled tab will open when you create a new banner. Once the banner is assigned a name, this tab will automatically adopt the assigned name.
The tab splits into two sections. The banner can be configured on the left-hand side; the preview on the right-hand side.

New layer (1): Creates a new layer. A layer can contain different elements such as text, images or buttons.
New element (2): Adds new elements to the active layer. This button can only be clicked if you are already working in a layer, as elements can only be placed within a layer.
Tree structure (3): This section displays the layers and elements within the banner.
Settings (4): The banner's basic settings, layers and/or elements are displayed here.
Preview (5): Displays a preview of the banner. This preview updates automatically if you change settings or insert new elements. You can change the size of the preview window by adjusting the blue bars.
Test sizes (6): Here you can find a couple of predefined device sizes and/or aspect ratios to quickly test your layout via the preview.

The settings

Banner

The banner is the fundamental surface of Digital Publishing. It specifies the framework for layers and elements and contains the background colour / image.

Name: Defines the name of the banner.
Background: Here you can choose between image and color.
image
With images, you can choose between the modes cover and repeat. With the latter, the image is repeated in its original dimensions, from top left to bottom right (equivalent to the CSS property background-repeat: repeat).
The cover mode is the equivalent to the CSS property background-size: cover. The focus orientation can also be defined for this mode.
color
You have several options for defining a colour instead of a background image:
- Choose the colour (HEX value) using the colour selection tool
- Input colour values directly:
- HEX: #ef002f
- RGB / RGBA: rgb(45,221,156) / rgba(45,221,156,0.5) via the RGBA value you are able to make use of transparency levels. You simply add a transparency value between 0.0 an 1.0 to the initial RGB value: e.g. rgba(45,221,156,0.5)
- HSL / HSLA: hsl(0,100%,50%) / hsla(0,100%,50%,0.2) just like described above you can add a transparency value to the HSL figures.

Layers

Layers are design surfaces that lie within the banner. One or several elements can be placed on each banner. Several layers can be stacked one on top of another; the order can be changed using drag & drop in the layer tree. You can define where elements are placed on the banner with the help of layers.

Name: Defines the name of the layer.
Position:
Width: The following options are possible here:
- auto: The width of the layer is based on the elements contained within.
- %: Banner width in percentage.
- px: A specification in pixels corresponds to a maximum value. If the banner itself is not as wide, the layer width is automatically reduced.
Height: Same as the options for width.
Margin: Defines the margin of the layer to the banner edge in pixels. All the values can be adjusted at the same time by checking the “Link” option in the center.
Border radius: Rounds all 4 corners down with a specific radius in pixels (corresponds with the CSS property border-radius).
Background: The layer can be assigned a background colour. Here you have the same options as with the background colour of the banner itself:
- Choose the colour (HEX value) using colour selection tool
- Input colour values directly:
- HEX: #ef002f
- Make use of transparency values:
- RGB / RGBA: rgb(45,221,156) / rgba(45,221,156,0.5)
- HSL / HSLA: hsl(0,100%,50%) / hsla(0,100%,50%,0.2)
Link: ;Here you can assign either a URL (starting with http://) or a product, using the integrated product search. In doing so, the whole level is assigned to the link.

Elements

Elements always cover all of a layer's width and are added to a layer by stacking them on top of each other. You can arrange the elements' positions and order by using drag & drop in the layer tree. Additionally, moving elements between layers works the same way.

Text

Text: The text that will appear on the banner is entered here. Click on the globe icon to translate the text into other languages.
Text-Typ: Defines whether the text is output as h1, h2, h3, p or blockquote. This is relevant for the crawlers, making it possible “read” the banner and analyze the content.
Font: Choose from the list of fonts or use your own font if it is stored in a theme.
Font size: Font size in px.
Adjust font size to device size: With the latest version of Digital Publishing (3.1.0) it is possible to scale text elements incrementally as well as dynamically. If this option is active the set font size gets grayed out and five new font size options appear.
Scale dynamically: If this option is active, text sizes are continuously altered as the window size changes. If this is not active, font sizes will not change smoothly at the defined breakpoints, but almost "jump" from one size to the other.
Mobile Portrait / Mobile Landscape / Tablet Portrait / Tablet Landscape / Desktop: These are the given options for breakpoints and device sizes.
Line height: Line height as a factor for font size.
Font color: Here you have the same options again as with the background colour of the banner.
Orientation: Defines the text alignment. The options are left-aligned, center-aligned, right-aligned or justified (the same as CSS property text-align: left/center/right/justify).
Font style: Converts the whole text element into bold, italic, underlined or block capitals.
Color shadow: You can also define text shadows. The same options available for Font color also apply here.
Shadow X: Moves the shadow to the x-axis, therefore horizontally. Value is in px; maximal values are +/-20.
Shadow Y: Moves the shadow to the y-axis, therefore vertically. Value is in px; maximal values are +/-20.
Shadow blur: Defines shadow blur in ;px.
Margin: Defines the margin of the element to the layer edge and other elements within the layer. All values can be adjusted simultaneously by checking the “Link” icon in the center.
CSS classes: You can place additional CSS classes within the element, i.e. to apply styles from your own theme.

Button

Button text: Define the text that appears on the button. Click the globe icon to translate the button text.
Type: Defines the display, i.e. the highlight colour of the button. The styles are automatically taken from the theme’s basic components.
Target: Define whether the link opens on the same page or a separate page.
Link: Assign either a URL (starting with http://) or a product by using the integrated product search.
Orientation: Defines where the button is positioned on the layer.
Margin: Defines the margin of the element to the layer edge and other elements within the layer. All values can be adjusted simultaneously by checking the “Link” icon in the center.
CSS classes: You can place additional CSS classes within the element, i.e. to apply styles from your own theme.

Image

Image selection:& You can use an existing image from the Media Manager or upload a new image.
Alternative text: Supplemental text, which is stored in source code.
Maximum width: Value is expressed in pixels. If the banner or the layer is not as wide the image, the image will be adjusted proportionally to fit the width of the page.
Maximum height: Value is expressed in pixels.
Orientation: Defines the image's position on the layer.
Margin: Defines the margin of the element to the layer edge and other elements within the layer. All values can be adjusted simultaneously by checking the “link” icon in the center.
CSS classes: You can place additional CSS classes within the element, i.e. to apply styles from your own theme.

When defining background colours (i.e. on banners or layers) you can make use of colour gradients. However, be aware that not every browser is able to handle CSS gradients (especially older versions of Internet Explorer). You can learn more about CSS gradients here. To work with gradients, you just have to enter the colour values without a semicolon, i.e. linear-gradient (to right, #547faf 0%,#6bc6bf 100%).

Workflow example

We will now reconstruct the banner shown at the beginning of this article and test how it behaves in different sizes. This is to mimic the banner's behaviour on different devices.

Click the Unlabeled banner first, assign a name and choose a background colour or image. In this example we are assigning an image, which we already uploaded into our Media Manager.

Step 2: create the first layer

Now we create the first layer of our banner. This will be the turquoise box that acts as background for our main tagline.

Click New layer and set orientation to the lower-left corner of the banner. We now create a margin for the layer not being too close to the bottom or side of the background image. Set the maximum width to 500px (it’s important to include the unit (px) here). The maximum width will always be wider than the text contained within, however the size is ultimately determined by the text elements (which we will create in the next step). Set the margin to 40px on the sides and 60px on the bottom and assign the colour rgba(92, 154, 171,0.75).

Since the background won’t appear until a text element is added, it makes sense to return to this page later and make final adjustments then, if required.

Step 3: insert text element on the first layer

We now add the first text element and begin formatting the text. We recommend increasing the row height so that there is space between the text when it breaks towards the second row (in this example, we used 1.2). We will also adjust the padding so that the text has enough room within the element – 25px on the sides, 20px on the top. Now it might be feasible to test the text's behaviour in diffently sized output formats, by playing around with the image and closely watching the live preview.

Step 4: insert second text element on the first layer

Here we follow the same procedure used for the first text element, only that the margins-differs so that it appears lower on the banner. We set the padding to: 10px on the top, 25px on the sides and 40px on the bottom.

When you change the width of the banner in the preview, you can see how the banner behaves in smaller sizes and how the text wraps or breaks.

Step 5: create the second layer

The second layer is positioned at the bottom-right corner of the banner. Slightly lower than the first banner, but with the same padding as on the sides. This layer will be a call-to-action button, linking the customer to a specific category in the online shop. The background of this layer is set to #bdab8a with a maximum width of 300px.

Step 6: insert text element on second layer

Here we add text once again, also with some space around the element. For this text element, we set the colour to #3e6b7cand set the margins to 20px on the top and bottom, 25px on the sides.

With the help of the live preview, you can now test how the banner will behave in different sizes and make last-minute adjustments to perfect its final appearance. When everything is in place, you can finally save the banner and use it, for example, in Shopping Worlds.

Digital Publishing in Shopping Worlds

The banner you just created can now be used e.g. in Shopping Worlds. Within the Shopping Worlds module, there are two elements which can be used to support your banner: Digital Publishing and Digital Publishing Slider. These basically have the same function as the Banner and Banner Slider elements, only that they support images taken from the Digital Publishing plugin.

Extending the module

For users with programming experience, there are additional opportunities to develop the Digital Publishing module even further. More on that? See our wiki pages, e.g.: DevDocs.