Magnolia 5.4 reached end of life on November 15, 2018. This branch is no longer supported, see End-of-life policy.
...
A site definition allows you to add features such as image variations to your site. This page explains how to configure image variations in a theme, part of the which is referenced in the site definition.
Before you proceed read How to work with images using damfn.
...
The image assets for Eric's cars are rather large. The components on the page require smaller images. Even if Bootstrap CSS resizes the images to fit the layout, the browser still loads the big images. We want to render small images on the page but we want to keep the big original images in the Assets app in case we use them elsewhere.
Info | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
|
...
Open the Site app. It may already contain a site configuration, for instance for the travel demo. (Keep in mind that you can only have only one site with Magnolia Community Edition.) In In this tutorial we add a new theme to an existing and reference it in the existing travel
site definition.
Go to the Themes tab and build the following structure:
...
enableHeadingAttributes | false |
---|---|
enableSorting | false |
class | m5-configuration-tree |
enableHighlighting | false |
...
Mgnl n |
---|
...
Mgnl n |
---|
...
Mgnl n |
---|
A theme can be configured in YAML in any module and must reside in the themes
folder of the module. (Alternatively you can define the theme in JCR too, see Theme.)
Create a themes
folder in /one-pager-module
:
Code Block |
---|
one-pager-module/
├── dialogs/
└── templates/
└── themes/
└── my-first-website.yaml
└── webresources/ |
Create my-first-website
theme definition with three image variations : Add three image variations : large
, large-square
and and xxlarge
.:
Advanced Tables - Table Pluscode | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
imaging:
class: info.magnolia.templating.imaging.VariationAwareImagingSupport
variations:
large:
class: | ||||||||||
Node name | Value | |||||||||
| ||||||||||
|
| |||||||||
| 730 | |||||||||
|
| |||||||||
| 730 | |||||||||
| 730 | |||||||||
|
| |||||||||
| 1140 |
Themes are referenced in the themes
node of a site definition which is configured in the Site app.
Open the Site app and change the value of the /theme/name
property to my-first-website
. In the Site Definitions tab configure the site definition to use the new theme:
Advanced Tables - Table Plus | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||
|
Although we did not mention it, the code in the previous pages already uses imaging variations. The damfn templating functions return resized images when you pass the desired variation name as an argument:
...
To render the background image we pass the variation name xxlarge
:
Code Pro | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
|
To render a car image we use the large
variation:
Code Pro | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
|
The macro that renders Eric's profile image uses the large
and large-square
variations depending on what the user has selected in the dialog:
Code Pro | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
|
...
How can you test that the variations are working. ? Does Magnolia now resize the images?
...
Example: The original Fiat Cinquecento image is 1024 x 741 pixels. Magnolia resizes it to 730 pixels as defined in the large
variation. Boostrap resizes the image further to fit the parent element in a responsive way.
Congratulations!
You created a website with Magnolia. You know how to manage content in an app and how to display it on the site. You created your first light module and learned the basics of working with images.
See Tutorials for your next learning goal.