Overview
Images can make or break your site. Website visitors read a shockingly little (okay, maybe we aren’t so shocked) amount of the copy on your page, leaving the images and visual cues to do much of the heavy lifting. For everything from ads to website banners to pop-ups, having a relevant image can be the key to clearly and effectively communicating your message.
And your messages can change – pretty much all the time! As the weather, fashion, or sports seasons change, so might your messaging and marketing strategy. Your website and its media need to be able to adapt quickly and often so that you’re saying what you want, when you want.
Here is how to add and remove images to your website and landing page on Lunteer.
Media vs. Images
You can upload many different types of files to Lunteer: images, PDFs, audio files, word documents, spreadsheets, and videos. These are referred to as “media.” Images are just media files saved in an image format. Here, we will refer mostly to images, the most common type of media. But you can use these steps with any form of media you’ll be uploading on Lunteer.
Adding Imagery
There are two ways to view, add, and remove images. One is through the Media Library and other is with the image model within the Editor.
NOTE: Learn more about the Lunteer Editor.
Adding Media through the Media Library
In the media library, you can quickly access all the media files you have uploaded to the platform. Here you can add, filter, delete, and select media files.
Add Media:
In the media library, you can quickly access all the media files you have uploaded to the platform. Here you can add, filter, delete, and select media files. To add media to the media library:
- Navigate to the Media Library
- Drag and drop your image into the area within the dotted lines
- Once dropped, the image will upload and display at the top left of the media list
- Click on the image to open the Attachment Details modal and add default meta data (see below for more details).
Upload Multiple Images:
- Select media from your computer
- Drag and drop multiple images into the area within the dotted lines
OR
- Click the Add New button next to the Media Library title
- Drag and drop multiple images or select files using your computer file browser
Edit Media Details:
You can select an image to open the Attachment Detail modal. Here you can add alternative (“alt”) text, title, caption, and/or description for the image. No need to click a save button – it saves automatically. You will see a “saved” text appear at the top right when it has saved the latest updates. Text added here will be the default text used when adding the image on any part of the platform. You always have the ability edit this text when you add the image within content.
Search for Media Files:
On the media library console, you can search by keyword and filter by media type and month added to find your image.
Adding Media through the Editor
Add or Edit Text:
- On the editor toolbar click the insert media icon
- Through this modal, search and select an image stored in your media library or drag and drop an image to upload a new image
Upload Multiple Images:
- Select media from your computer
- Drag and drop multiple images into the area within the dotted lines
OR
- Select the upload files tab located on the top left side of the modal
- Drag and drop multiple images or select files using your computer file browser
Edit Media Details:
Once you select an image, the attachment details will appear to the right of the main list of images. You have the option of editing the default alt text, title, caption, and description. The text you add here only applies to this one instance of adding the image. If you want the text to be the default text, add the text within the attachment detail modal in the Media Library.
Select the Correct Image Size:
NOTE: This step is critical to helping your website load with serious speed
Selecting the correct image size is very important. When you upload an image, based on the website setting, the original image is duplicated into various sizes. This helps with design and site speed, to find out more check out how we optimize images.
In the dropdown you will find the various size options. Select the size that fits best into the section where you are adding the image. For example, for a single “Hero” section you will want to use the large image size, for a section spit into 3, the small image size will work best.
Important Note: The platform will scale down a large image to fit into the section where you add it, but this will reduce load speed on the page. This is because the large image is loaded, which is a larger file size and then the browser must resize it into the given smaller box. Overall, slow and not optimal.
Once you have selected the image or media file you want to add, updated the content fields in the Attachment Details section on the right, and selected the correct image, just press Use in the bottom right corner of the modal.
Adding a Featured Image
- Open a post or page
- Scroll to the Featured Image box – on desktop, it is in the right-hand menu, on tablet it is before the editor
- Click Set featured image
- Select or add the desired image following the above steps.
Conclusion
Take a look at your favorite websites – how impactful is their imagery? They probably have dynamic, relevant, and engaging images that maintain interest every time you re-visit the site. With the right tools, keeping your imagery up to date and relevant is easy and can be incredibly impactful. So add, update, remove, and tweak to your heart’s content- no development required!
Insights Newsletter