With version 1.2 the Accordion has been extended by a new function. This allows to display the image of the selected source (article intro image or article image) together with the title as Accordion title. This short tutorial shows you some possibilities to use this option.
How to add a new module instance is explained in another tutorial, here it's about choosing the Accordion widget, setting a filter to display the articles of a category and how to use the desired image (or fallback) as Accordion title, together with the title text.
Basic Setup
We set the basic settings of the module as shown in the screenshot, we select "Accordion" as widget, in the Image Source field we define which image from the articles should be used, the intro image or the full text image. As text content we choose intro text, but of course you can also choose full text. Just be aware that you may have to disable the "Prepare Content" option when loading content into the Accordion:
Set Filters to define which articles should be loaded
With the filter settings in the Filter Options tab you define where the WidgetsBox should get the articles from, what should be taken into account and which articles should not be displayed. You can find a separate article about filters in the WidgetsBox in this manual. Today we set a relatively simple filter:
As I said, a simple filter, we set the "Count" to 0, if a number other than 0 is selected, this represents the limit, so 5 for five articles for example. Then we have to choose a category, in our case I chose the category "Electric Cars", because there I put a short "intro text" in the demo content and an intro picture in the article.
Style the Widget
In the next step, we switch to the Widget Layout tab. Here we "style" our Accordion widget. Depending on the widget you selected at the beginning, there are different options available here.
The following options are available for the Accordion. In the screenshot you can already see a first configuration example:
¨
I would like to draw your attention to the fact that we have selected Title as the "Image Position", only then will the image be displayed in the Accordion title. If Title is selected as position, further options appear with which you can define the image size for the different device types. From general to desktop screen sizes you can adjust them separately. The format of the image is controlled by the "Media Ratio" option. The example above creates the Accordion layout shown here:
Of course we can still experiment with some class names and settings, what I want to show you is the image class "uk-border-circle" if we use this with a media ratio of 1:1 we can generate something like this:
Hui! ok we have the circle but the images are a bit too big for me... Let's try to turn down the width of the images (currently 25%) a little bit and choose as an option xxsmall in each case:
Yes, it looks much better, the WidgetsBox uses the UIkit 3 framework, which allows you to use the appropriate classes that the framework brings everywhere in the WidgetsBox. Of course you can also use CSS classes of your template to match the WidgetsBox design to your website.
One last thing - Media Ratio
The option for the aspect ratio defines the effective height of the images, this field can contain a 1:1 (which means an aspect ratio with the same height / width) or also classic aspect ratios like 16:9. If you enter a "0" in the field the image will not be "cropped" which can be shown very well in this example here, as you can see every image has a different aspect ratio and will be displayed with the width "xxsmall":
In this short tutorial we have seen how to set a simple filter for a category, how to select the image source and how to style the Accordion a bit. Play around with the settings a bit and as always, have fun!