Files & Images

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 seamlessly integrates the WordPress Media Manager and 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.


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.

Image field

Width and Height

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.

Setting Description
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.

Responsive Images

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.

Next-gen Image Format

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.

Lazy Loading

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 WordPress link picker, or a file with the Media Manager. An external URL can also be added directly in the field.

Action Description
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.

Link field


Media Manager

The Wordpress media manager is seamlessly integrated into YOOtheme Pro and opens every time you want to pick an image or a file. It offers three tabs: Upload Files, Media Library and Unsplash. Upload new images in the Upload Files tab. Use the Media Library tab to search and add already uploaded images. Choose the Unsplash tab to choose an image from an extensive image library.

Media manager


Unsplash Image 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.

Action Description
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.

Unsplash library

Note Only users with an active Developer subscription have access to the Unsplash Library.

YOOtheme Collections

Images from all YOOtheme Pro themes can also be found in the Unsplash library. Simply browse the theme-specific collections in Users – YOOtheme.

YOOtheme collection

YOOtheme Pro