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 in YOOtheme Pro 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 in YOOtheme Pro come with two icons that you can find on the right. These enable you to pick either an internal link with the native Joomla link picker, or a file with the Media Manager. An external URL can also be added directly in the field.
|Pick link||Click the chain icon to pick an internal link.|
|Pick file||Click the folder icon to open the media library and pick a file.|
The media manager opens every time you want to pick an image or a file. It offers two tabs: Files and Unsplash. Upload files via drag and drop, add and delete folders and search files in the Files tab. The breadcrumbs above media files help navigate to different media folders. Choose the Unsplash tab to browse images from an extensive image library.
|Search||Click the search icon to search for a media file.|
|Table||Click the table icon to display media in a tabular list.|
|Thumbnails||Click the grid icon to display media file in a grid with larger thumbnail previews.|
|Add Folder||Add a new folder.|
|Upload||Upload a new media file.|
|Rename||Once a media file is selected, a rename icon will appear in the top left corner of the media library. It allows you to rename a file directly from the media library.|
|Delete||Once a media file is selected, a delete icon will appear on the right of the rename icon. It allows you to delete a file directly from the media library.|
YOOtheme Pro integrates Unsplash – an extensive library of free high-quality images. You can access the Unsplash library directly at the top of the media manager. Browse through collections and categories and try out images without having to download them. Images will only be downloaded once a layout is saved.
|Search||Click the search icon to search for a photo, a collection or a user.|
|Photos||Display the Unsplash photos.|
|Collections||Display the Unsplash photo collections.|
|Users||Display the Unsplash users. Use this tab to browse photos used in YOOtheme Pro themes.|
Note Only users with an active Developer subscription have access to the Unsplash Library.
Images from all YOOtheme Pro themes can also be found in the Unsplash library. Simply browse the theme-specific collections in Users – YOOtheme.