Add images and set up them
Kiolezo uses a dedicated folder for images.
You can find all default images in images/kiolezo/ folder.
To add images to the component simply upload (via FTP or via Joomla Media manager) in that folder your custom images, and Kiolezo automatically will lists all your images in the drop down menu, inside the settings modal box.
To simplify your life, you can access to Kiolezo images folder, during layout editing, by pressing the media manager button, which open the default Joomla Media manager in the Kiolezo images folder.
If you upload images during editing, you must save your layout or refresh the page to list all new uploaded images.
If you are not expert with FTP file uploading, you can choose this easier way to manage your images.
Once you have dragged an image in your layout, you can setup it in its setting panel.
To open image settings, just click the gear button on the image that you want to set up.
In setting panel, you can choose the image you want to display in your layout, by a dropdown list.
You will see a list with all compatible images placed in images/kiolezo/ folder.
Is possible to import an image in your layout from external url, such as https://demo.digigreg.com/resources/images/astronaut.jpg.
To display an image from external url, just type the url in the proper field and save image settings. External image will be shown in your layout. Note that it will not be copied in your server, but only image reference will be kept, so if that external image will be edited, in your layout will be shown the new version of that image. Instead, when a layout is exported as stand-alone template, all images, local and remote, are automatically copied in the new zip archive, so you have not to worry about do it manually.
Note that an esternal url overwrite local image reference, so for example, if you select lowpoly-m.png from dropdown list and then you enter an external url like https://demo.digigreg.com/resources/images/space-shuttle.jpg, the first option will be ignored.
You can choose from 5 different image types. Under Image items in the left sidebar, you will find:
- Default image, to display ian image without special styles.
- Rounded image, to display an image with a little border radius in each corner.
- Circle image, to display an image with an accented border radius, useful to create a circle if the original image is square shaped.
- Polaroid image, to display an image with a border and a little box shadow, useful for thumbnails.
- Responsive image, to display an image with its width at 100%.