With YOOtheme Pro you can easily manage images, files and links as well as access the Unsplash image library with thousands of free images.
YOOtheme Pro comes with an easy-to-use Media Manager and the integrated Joomla Link Picker. Images are resized automatically, and responsive images are auto-generated. YOOtheme Pro also offers lazy loading images for a high PageSpeed score and gives you access to Unsplash – an extensive library of free high-quality images.
Image fields open the Media Manager and show a preview of the selected image. An external URL to an image can also be added directly in the field.
By default, a selected image is constrained to the container width. But there is also an option to set the Width and Height of an image.
|None||The original size is preserved.|
|Width or Height||The image is resized, and the original proportions are preserved.|
|Width and Height||The image is resized and evenly cropped to the new proportions.|
Resized images are saved in the theme’s cache folder
yootheme/cache. You can clear the cache folder to resize all images again.
Note Images are only generated if the GD module is activated on the web server.
YOOtheme Pro generates up to six
srcset images: 768px, 1024px, 1366px, 1600px, 1920px, 200%. The browser will automatically load an image which best fits its viewport and screen resolution. It's recommended to use a large image and set a smaller width or a height. This allows YOOtheme Pro to generate a high resolution image (up to 200%) for retina displays.
If enabled, YOOtheme Pro also generates all images in a WebP format and serves them to all supporting browsers including Chrome, Firefox and Edge. Other browsers will get the original JPEG and PNG formats. The WebP format has superior compression and quality characteristics compared to JPEG and PNG images. Images will load much faster and consume less cellular data. Enable the WebP feature in the Advanced settings of YOOtheme Pro.
If enabled, YOOtheme Pro only loads images as they enter the viewport. This speeds up page loading times and decreases traffic. Enable the Lazy Loading feature in the Advanced settings of YOOtheme Pro.
Link fields allow you to pick either an internal link with the native Joomla link picker, or a file with the Media Manager. You can also manually enter a URL, for instance, an external URL.
The Joomla link picker opens in a modal where you can pick articles or menu items. There are filter options and a search available.
The YOOtheme Pro media manager opens every time you want to pick an image or a file. It allows you to upload and manage files and images in your local web storage. Additionally, YOOtheme Pro adds a tab to browse the Unsplash image library.
There are two views to browse the files and folders in the media manager: Table and Thumbnails. The Table view arranges the files in rows and displays additional information like the file size. The Thumbnail view arranges the files in a visual grid with thumbnails. Switch between these views using the icons to the upper right.
Navigate into folders by clicking a folder. Navigate back by using the breadcrumb navigation.
There are two options to upload files. Click the upload button to the upper right or drag and drop files right into the media manager.
Start typing into the search field, and the list of files and folders will update instantly.
There are several actions to manage the files and folders.
|Add Folder||Add a new folder into the current one by clicking the button in the top right corner.|
|Rename||Rename a file or folder by selecting it and clicking the edit icon that appears in the top left corner.|
|Delete||Delete one or multiple files or folders by selecting it and clicking the trash icon that appears in the top left corner.|
YOOtheme Pro integrates Unsplash – an extensive library of free high-quality images. Open it by clicking the Unsplash tab in the media manager. The navigation allows you to browse through photos, collections and users.
When you click a photo, the media manager closes, and the photo will be shown in your layout. Note that the photo is externally linked and not downloaded to your server yet. When saving the layout, you will be prompted to choose to either download all the Unsplash photos used in this layout or to discard them. This way you can try out as many photos as you want till you finally find your favorite one.
According to the Unsplash license all Unsplash photos can be used for free, including commercial purposes, without asking permission.
Note Only users with an active Developer subscription have access to the Unsplash Library.
By default, the Editorial photos from Unsplash are shown. To search for a specific photo, start typing into the search field, and the list of photos will update instantly. Hovering the photo will show a link to the user's profile on the Unsplash website and a View Photos link which opens the photos and collections of this user in the media manager.
By default, the Editorial collections from Unsplash are shown. Start typing into the search field, and the list of collections will update instantly. The topic, the curated user and a number of photos can be found in the bottom of each collection. Clicking the user name allows you to see the photos and collections of this user directly in the media manager.
By default, the YOOtheme user is shown. Clicking the user will show theme-specific collections from all YOOtheme Pro themes.