image handling: understanding the basics of wordpress media

Image Handling:Understanding the Basics of

WordPress Media

Rich Plakas

@RichP on Twitter

www.RichPlakas.com

A Little Bit About Me

★ IT Background going back to the days of DOS & Novell

★ Began “messing” with WordPress in 2007.★ Switched my focus from IT to WordPress in

2011★ I was tired of doing Windoze Updates &

changing Printer Toners :-)★ Joined the Austin WordPress Meetup Group In

2012.★ I love BBQ & Craft Beer.★ I run a beer blog: www.CraftBeerAustin.com

A Little Bit About Me

★ I run a WordPress Agency called Connected Systems

★ We help businesses with all aspects of their Digital Assets including:

★ SEO/SEM★ Analytics and Website Optimization★ Pay-per-Click Ads(Google Adwords & Facebook

Ads) ★ Social Media★ Ecommerce (WooCommerce)★ Email Newsletters

Why Do I Need Images on my Website?

"A Picture is Worth a Thousand Words”

(Most of) our brains process visual content (images) faster and retention of this visual content tends to be

higher as well.

Why Do I Need Images on my Website?

Which Post Looks Better?

Where Do I Find Images?

Besides taking or creating your own pictures, there is a vast collection of websites offering photos that you can place on your site.

Many are free, and others charge fees.

Here are some options for y’all to look at:

Free Image Websites

Flickr (with Creative Commons filter)Stock VaultDreamstimeStock Xchng Freebie ImagesPhotogenGoogle Image Search (with Creative Commons filter)

More image websites listed at: http://handsonwp.com/knowledge-base/tutorial/finding-images/

Creative Commons Pictures

Flickrhttps://www.flickr.com/groups/creative_commons-_free_pictures/pool/

Creative Commons Pictures

Google Image Search with “Labeled for reuse”Filter enabled:

Paid Image Sites

PhotoDuneDollar Photo ClubShutterstockDreamstimeFotoliaDepositPhotosPhotoSpin

iStockPhoto/Getty* (not recommended by me)

Adding Images

The Media Manager was much improved starting with WordPress 3.5, You could now insert multiple images at once, create multiple galleries per post with drag-and-drop reordering, inline caption editing, and simplified controls.

The new media manager also provides an easier way for users to insert videos into their posts. Users can now drag and drop images and video files from their desktops directly into each post. Adjusting the settings for each image — such as adjusting image size — has also been streamlined.

And importing and embedding multimedia from other Web sites, like YouTube, has been eased as well.

Changes to Image Handling in WordPress 3.9 & 4.0

WordPress 3.9 Changes:“Edit images easilyWith quicker access to crop and rotation tools, it’s now much easier to edit your images while editing posts. You can also scale images directly in the editor to find just the right fit.”

“Drag and drop your imagesUploading your images is easier than ever. Just grab them from your desktop and drop them in the editor.”

WordPress 4.0 Changes:“Explore your uploads in a beautiful, endless grid. A new details preview makes viewing and editing any amount of media in sequence a snap.”

How to Manage Photos in WordPress LibrarySize Your Photos Before Uploading

Don’t slow down your site’s performance with extra large images.

Resize and descriptively name image files, before uploading them to the WordPress Media Library.

Pro Tips:

Name images with descriptive keywords(SEO)Conform to the exact measurements indicated by the theme or plugin specifications for fixed sized elements like sliders.

For standard website display, make sure your resolution is set at 72 dpi. (However if you may need high resolution (220 ppi, 264 ppi or 326 ppi) for retina-display devices.)

Common image file types are jpeg, jpg, or png. Use jpg for better compression/faster page loads.

*png is generally used when a transparent background is needed such as a logo.

Using the WordPress Media Manager to Optimize SEO

Having your images indexed by search engines helps get traffic to your site.

Be sure to take the time to correctly label each image for effective SEO.

The new Media Manager makes image optimization much easier.

SEO Tips

In Edit Media, insert keyword-rich words in the Title, Caption, Alt Text, and Description.

Separate words in the Title using spaces, not like — dontdothis.jpg

Search engines, such as Google, do not know what is in your image(yet). They rely on your filename, titles, alt and descriptions to index your picture.

A Word About Accessibility

Using descriptive ALT tags helps web users who might be visiting your website via an Accessibility platform such as a screen reader.

A visually impaired visitor to your website will not be able to see your images, but the screen reader will tell them what it says in the ALT text.

A good alt tag of this image to the right might be:

“Screenshot of the WordPress 4.3 Media Library Screen showing some of the available images in the Library”

Opening the Media ManagerBefore you open your Media Library, position your cursor on the place you want the image to appear in your page or post and click.

Go to the Add Media button at top left of your editing screen.

The Media Manager

The Media Manager

Upload New Media

Uploading and Selecting FilesOnce the Image files are uploaded to your WordPress Media Manager, you will automatically be switched over to the Media Library screen where you’ll have access those newly uploaded files (along with previously uploaded images).

The files you’ve just uploaded will indicate that they are “Selected” meaning that the image or images will be check-marked and highlighted within a blue box.

In addition, you have the choice of showing only the files uploaded to that particular post by using the pull-down menu in the top left corner.

When you open the Media Manager, you will be shown all the image files in your Media Library.

Inserting Media Into A Post or Page

Inserting Media Into A Post or PageIf you wish to use one of the images in the library, click on the image.When an image is selected and active, you will see that it has a blue border around it and a check-mark in the upper right corner.

Adding Meta Information

The selected image will appear in the right hand sidebar under ‘ATTACHMENT DETAILS.’ You can add meta information and captions in this area.

The ‘ATTACHMENT DISPLAY SETTINGS’ area is where you indicate the image alignment on the page or post and the size options — Thumbnail, Medium, Large or Full size.

Once you have filled out the descriptions and made the alignment and size choices, click the blue ‘Insert into page’ button in the lower right hand of the page.The image will then be inserted into your post or page.

Inserting Media Into A Post or PageClick ‘Publish’ or ‘Update’ and the image positioned in the text on your editing screen will appear on the published page or post .

Images in the editing screen can be repositioned by drag-and-drop.

Images Can be resized by clicking on the image once and then dragging a corner.

Inserting Media Into A Post or PageThis is how the image will look on the published page:

Editing an Image on a Post or PageTo edit an image, move your cursor over the image and click on it. The image toolbar will popup.

Image Details

Setting the Featured Image for a PostDepending on your Theme, the featured image of a post may be displayed on your sites home page. If you put your blog post on Facebook or other Social Media sites the will try to pull in this image as well.

Setting the Featured Image for a Post

Setting the Featured Image for a PostOn the lower right hand side of your post edit page you will find “Featured Image”.

Setting the Featured Image for a PostClick on “Set Featured Image” and choose or upload an image file like we did previously for Post Images.

Setting the Featured Image for a PostIf your image dimensions are less than 200px x 200px you will see this warning message about Facebook and other Social Media sites not picking up the image.

Live Demo

WordPress Galleries“Image galleries are a great way to share groups of pictures on your WordPress site. The Create Gallery feature of the WordPress media uploader allows you to add a simple image gallery to pages or posts on your site.” *From the WordPress Codex

WordPress Galleries

WordPress Galleries

WordPress Galleries

WordPress Galleries

WordPress GalleriesExample of WordPress Gallery using Thumbnail Option

WordPress GalleriesThis is how the picture is displayed using the “Media” option

WordPress GalleriesThis is how the picture is displayed using the “Attachment” option

WordPress Galleries

Live Demo

Using a Lightbox In WordPressAs you have seen in the previous slides, the way WordPress display images clicked from a gallery is not ideal. Both require the user to click the browser back button to get back to the original post.

There are 2 simple solution to this. One is to use a Light Box plugin.

Using a Lightbox In WordPress

Using a Lightbox In WordPress

Using a Lightbox In WordPress

WordPress Jetpack CarouselAn alternative to using a light box plugin is to use the Jetpack Carousel feature.

Jetpack is a free plugin from WordPress that contain the equivalent functionality of about 40 plugins!

WordPress Jetpack CarouselOnce inside the Jetpack screen, click on “See the other 27 Jetpack features” and click on the “Photo and Videos” category filters.

WordPress Jetpack CarouselThe Image Carousel setting can be found with your Media Settings.

WordPress Jetpack CarouselThis is is how the Carousel displays an image that was clicked on from the Gallery.

Lightbox Live Demo

As you can see both the a light box plugin or the Jetpack Carousel give the user on your website a much better

image viewing experience!

Third Party Image Galley PluginsOne problem with the built in WordPress Gallery functionality is that it’s NOT Mobile Responsive (at least not without you doing some custom CSS coding).

This is probably the point where you will want to investigate and use a 3 rd Party Gallery Plugin. As shown in the examples below the 3rd Party Gallery Plugin will make the gallery images larger and put them into a single row for easier viewing on a small screen.

WordPress Gallery on iPhone 3rd Party Gallery on iPhone

Third Party Image Galley Plugins

Two Popular WordPress Gallery Plugins

Embedding Youtube and Vimeo Videos

Go to the Video in your Browser

Copy the Video URL

Paste into your Post or Page

Publish/Update and Done!

Embedding Youtube and Vimeo Videos

Embedding Youtube and Vimeo Videos

Embedding Youtube and Vimeo Videos

Image Handling:Understanding the Basics of WordPress

Media

Rich Plakas

@RichP on Twitter

www.RichPlakas.com

Q&A