Using images
Once you've uploaded your images into the media library, you can use them across your website, on pages, menus, blog posts and more:
How to use an image in your site's content:
Images can be added anywhere you see an image box, like the one to the left. When an image box is empty, like in this example, when you hover over the box it'll have only one button, the orange 'Image selection' button which displays a camera icon.
When clicked, this will open the popup media manager, allowing you to locate the image you want to use.
When the media manager popup is open, you can browse around the directories to find the image you want to use. When you find the image you want to use, click it and it will be selected and highlighted with a teal overlay.
At the bottom of the media manager, you'll then see an orange 'Use selected image' button. If you click this button, the selected image will be added to the image box you initially clicked on to open the media manager.
The image upload box will then change to show the new image.
Three additional buttons will be revealed on hover:
- The 'Magnify' button, which opens the current image within a popup for you to view,
- The 'Crop' button, which opens the image cropper, allowing you to crop into the image,
- The 'Delete' button, which will clear the contents of the image box.
Bulk-selecting images:
If you want to add images to a 'gallery' field, rather than selecting images one at a time, you can instead 'bulk-select' them:
When bulk-selecting, selecting images is only slightly different from choosing a single image.
If bulk selection is supported, you'll be able to select more than one image at a time while the media manager is open.
Each selected image will be highlighted with a teal overlay, and a counter will appear at the bottom-left of the media manager popup showing how many images are selected, plus how many you can choose overall.
Please note: changing your view to another directory in the media manager will un-select any selected images.
Cropping images
One of the key benefits of Easy Eatery's media manager is the cropping tool. This tool allows you to crop into — to focus on a particular part of — any image.
The crop is non-destructive, meaning that the cropping tool does not affect the original image.
So you can upload a high-resolution copy of an image to your library once and then use it multiple times, potentially with a different crop each time.
How to crop an image:
On the image box you want to apply an image crop to, click the 'crop image' button . This is the third button between the 'magnify' and 'delete' buttons. The image cropper will open in a popup:
You can click and drag the teal-bordered box around the image to change the crop you'll be applying. The dark area of the image outside of the box will not be visible when the crop is saved.
You can click on any of the dots along the edges of the crop box to resize the crop.
You can also move the crop box around the image by clicking and dragging inside the box.
When you're happy with the crop, click the orange 'Save' button to set the crop.
The crop will come into effect when you save changes to the page, menu, blog post being edited.
When adding images to your website, you don't need to worry about high-resolution images slowing your website down. When you use images on your website, Easy Eatery will automatically resize the image to an appropriate size, based on where the image is being displayed.
Image sizes can be managed within the Theme Customiser. Developers can also edit image sizes within Theme.xml.
How to remove an image from the page
Removing an image from the page or other piece of content that you're editing is easy. Click the 'Delete' button, the last button in the list of controls, when you hover over an image box.
The image and its crop info will be removed, returning the image box to its original empty state.
If you're looking to replace the image in the box rather than clear it out, you can just click the orange 'Image selection' button and choose the image image instead.