Adding Images to the Meta Slider

The Meta Slider plugin is one of my go-to options for adding a photo slider in a WordPress website. These instructions can help you add photos to an existing slider.

Start with photos all the same size

1.  Make sure your photos are all the same pixel size.  That way they will fit nicely within the slider space

2.  Compress your photo(s) at tinypng.com, https://tinypng.com/ – this is a free tool to compress your image size – quality will not be compromised.

  • Upload the image and then download the compressed version.  You can do this for 20 photos at a time.

3. From your dashboard navigate to Meta Slider at the bottom of the left sided navigation menu

4. Once you’ve opened the Meta Slider, you’ll see the slides

5. Media library showing images for a meta slider.On the right hand side above the blocks for the slides there is button Add Slide – click this and you will be brought to the Media Library where you can either use an image already in the Media Library or Upload Files

6.  Select your image and click the blue Add to slider button at the bottom of the screen

Image showing the General and SEO tabs in a Meta Slider.7.  Once you’ve added your photo, using the General tab, you can add a link if you want the slider image to be clickable to a page in your website or another website

Note:  If you want the link to open into a new window, click the New Window box on the right

8.  Next to the General tab is the SEO tab.  Click on this tab to write a short sentence in the Image Alt Text box.  Search engines and screen readers use this text.  It should briefly describe the image.

The Image Title Text is used to create a little pop up box of information when you hover over the image.

Once your photos are in the slider, click the blue Save button on the right.

Refresh the page your slider is on and you should see the new photos in the slider.  Have fun with it!

Cropping an Image

You upload you image to the Media Library.  You realize your image needs to be cropped.  Ugh.  In the old days, you would have to crop that image in your photo editing software and upload the image again. Good news . . .you can now crop your image from the Media Library.

Cropping an Image

Start in the Media Library.  Select the image you want to crop.

The Edit Media or Attachment Details page is next screen.  Click on the Edit Image button below your image.image-editing-01

To start cropping an image, click and drag over the area you want cropped.  The cropped area will become darker.  The area to preserved will be brighter.  Move the crop square as needed to get the crop you want.  Click and hold on any of the little squares (in the corners, center top, bottom, left and right area of the image) to lengthen or shorten the crop.  To scale smaller or bigger, click and drag a corner square.

image-editing-02
Happy with the the new look?  Click the crop button above the image.  The cropped image will replace the original image.  When you are done editing your image:

  • click  the Save button below the image
  • AND THEN click the blue Update button in the right sidebar to update the image.

Media Library

The Media Library allows you to edit, view and delete media you uploaded to your website or blog.  The Media Library provides you with two ways to view your library, the Grid and List Views.  You can toggle between the Grid and List Views by clicking on the icons under the Media Library title.

Toggle the Media Library Views between List and Grid Views.

Media Library Grid View

The Grid View gives you thumbnails of your images, audio and movie icons.

Media in the Library Grid View.

Media Library in the Grid View showing drop down menu.

 

With the grid view,  your media library automatically displays all media items.  It can also be sorted by images, audio, video and media items not attached to a page or post.

 

Media Library List View

The Media Library List View is a table which lists all of your media in a row.  Media is listed with the newest upload first.

Media Library in the List View.

By hovering over a library item in the the List View, you get three options:  Edit, Delete Permanently and View.  You can also quickly see what page or post the library item is attached to and when it was uploaded.

media-library-05

Click Delete Permanently to delete the image from the database.  Clicking View will bring you to the attachment page for the library item.  Clicking Edit will bring you to a page where you can add a caption, alternative text for screen readers and a description of the image.

Media Library - view media to edit the Caption, Alternative Text and Description.

 

Image Details

Once you selected the image you want to add to your page or post, you’ll see a checkbox next to the thumbnail confirming your selection, and see information about it displayed in the Attachment Details pane in the right sidebar of the media uploader.

Attachment Details for your Image

Image details - adding an image to your post or page.

The Attachment Details shows a small un-cropped thumbnail of the image, and important information like the filename, date uploaded, and image dimensions in pixels.

There is a link so you can edit the image, which takes you to the Edit Image page, or you can delete the image by clicking the Delete Permanently link.

You can also edit the following information about your image:

Title: The title of this media.
Caption: The caption for this image. The text you enter here will be displayed below the image.
Alternate Text: Enter the Alt text for the image, e.g. “The Mona Lisa” to describe the media. This alternate text is used by screen readers.
Description: A description of this image.
For more information on these media settings, see the Codex Edit Media page.

Attachment Display Settings for your Image

Image details display settings - adding an image to your page or post.The Attachment Display Settings (below the Attachment Details) controls how your image is displayed when seen on your site.

You can set the alignment (left, center, right or none) and what size image you would like to display on your page.

Left Alignment aligns the image on the left hand margin, and any text that is on the page wraps  around the image to the space on the right.
Right Alignment aligns the image on the right hand margin, and any text that is on the page wraps around the image to the available space on the left.
Center Alignment aligns the image to the center of the page, with no text displayed around the image.
None Alignment Setting inserts the image in to the page with no alignment

Adding Photos to Your Page/Post

Adding images to your page or post will make the page/post more engaging.  When creating or editing a page or post, you can add images using the Media Uploader tool. Here’s how:

1. Put your cursor where you want your image

Before you add an image to your page or post, first insert your cursor in the place within the text where you want the image to appear.  By placing the cursor (and then the image) within your text, you can later set the alignment of the image so that the text will wrap around the image.

Place your cursor on the left margin of your text, even if you want the image to appear on the right. There is an Alignment setting that lets you control the alignment image to appear on the right or the left side of the text.

If you want the image to be on a line without text, place your cursor on a blank line.

Adding images to your page or post.

2.  Click the Add Media button

Once your cursor is where you want your image to appear, click the Add Media button.  This will launch the media uploader.

Adding images to your page or post.

Click on Upload Files to upload new image or images.

Adding images using the Media Uplaoder.

This is the screen for the image uploader:

Adding images - uploading to the Media Uploader.

When the image is uploaded,  choose the image  from your media library by selecting that image.  Click Insert into Post in  the lower right corner to add the photo to your page.

Adding images - using the Media Uploader.