How to Create a Simple Photo Gallery

Photo galleries are a great way to show a group of related photos on your website.  WordPress has a Create Gallery Media Library tool within the to help you create that first simple photo gallery.  Here are the steps:

Creating a Simple Photo Gallery

A photo gallery can go anywhere you’d like within a Page or Post or on a Page by itself.  Place your cursor where you want your gallery to appear and click into that spot.

Click the Add Media button

Once you’ve placed your cursor where your want to have your image gallery, click on the Add Media button to open the Media Uploader.

 

Create a Gallery link.

In the popup window, click the Create a Gallery option from the list on the left.  You’ll be brought to the Create Gallery page.  This is where you can click on all the images you want to add in your gallery.  If the images are not in your Media Library yet, no worries, just click on the blue Upload Files to upload your images.

Once you’ve selected your images, click on the blue Create a new gallery button in the lower right corner of the screen.

You’ll be brought to the Edit Gallery screen.

Edit Gallery

Edit Gallery screenshot.

From the Edit Gallery screen, you can give your images captions, click and drag to re-arrange the order and remove an image from the gallery.  If you decide to remove an image from the gallery, just click the X on that image.  No worries, you will not be removing the image from the Media Library.  You can use images you upload and images already in your Media Library by clicking on the Add to Gallery link on the left.

In the Gallery Settings, you can decide if the image links to its Attachment Page, Media Page or not have a link.  You can decide on the number of columns and if the images will be in a random order each time your gallery is loaded in a browser.  You can also decide if the image in your gallery will be Thumbnail, Medium, Large or Full Size.

Once you have your photos in the right order and the settings done, you are almost there.  Click on the blue Insert Gallery link at the bottom right corner of the screen.  The gallery will then be inserted in your Page or Post and you’ll see something like this:

Simple photo gallery in Page or Post.

If you want to make any changes to your gallery, click on the pencil.  To remove the gallery, click on the X.  If you’re happy with the gallery on your Page, click the Publish or Update button to save your changes.

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