46
IMAGE MASTERY WITHIN WORDPRESS Upload, Edit, Display, and Share with Ease

Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Embed Size (px)

Citation preview

Page 1: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

IMAGE MASTERY WITHIN WORDPRESS

Upload, Edit, Display, and Share with Ease

Page 2: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Who the h*ck am I?

Page 3: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Amber Hewittgraphicgoo.com

@graphicgoo

Page 4: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

How to Get Images• Shoot your own images

(BONUS: you own the copyright!)

• Public Domain (FREE)LibreStock - librestock.com

• Creative Commons - creativecommons.org Flickr - flickr.com/creativecommons

• Stock PhotographyiStock, Getty Images, Veer, Creative Market

Page 5: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

How NOT to Get Images• Google Image Search

• Downloading from other websites

• Photographing copyrighted works

Page 6: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Before You Upload That Image

Page 7: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Before You Upload…• Reduce the pixel size!

iPhone 6S+ photo is 4032 x 3024 pixels

• Reduce the file size!Average iPhone 6S+ photo size is 2 MB

• Make the title of your image file relevant to the subject matter for better SEO.(IMG_3285.jpg should be yellow-flower.jpg)

Page 8: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

img_3285

Page 9: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Image File Formats

Page 10: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

JPEGGood for photographs

Page 11: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

GIFGood for images with limited colors

(line art)

Page 12: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Animated GIF

Page 13: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

PNGAny image with transparency

(be careful - file size can be large)

Page 14: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Image Apps• Photoshop/Lightroom (Mac, Windows)

• GIMP (Mac, Windows)

• Paint.NET (Windows)

• Pixlr (Web-Based)

• Luminar (Mac)

• Pixelmator (Mac)

Page 15: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Image Apps (Mobile)• Pixelmator (iOS)

• VSCO (iOS, Android)

• Snapseed (iOS, Android)

• Enlight (iOS)

• Metapho (iOS) - View & remove metadata

Page 16: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Uploading Images

Page 17: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

DEMO

Page 18: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Place the cursor where you want the image to be in the post/page and then click the “Add Media” button.

Page 19: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Drag & drop your image(s) here or click the “Select Files” button to select the image(s) from your computer.

Page 20: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

After the image is uploaded, it will appear in the Media Library.

Page 21: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease
Page 22: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease
Page 23: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease
Page 24: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease
Page 25: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Editing Images

Page 26: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Select the image to view the editing option popup.

Page 27: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease
Page 28: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease
Page 29: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease
Page 30: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease
Page 31: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease
Page 32: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease
Page 33: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease
Page 34: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease
Page 35: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease
Page 36: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Image Plugins

Page 37: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Jetpack• GALLERY WIDGET

The Gallery Widget provides you with a simple way to display a photo gallery or slideshow in your blog's sidebar.

• CAROUSELWith Carousel active, any standard WordPress galleries you have embedded in posts or pages will launch a gorgeous full-screen photo browsing experience with comments and EXIF metadata.

Page 38: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Jetpack• PHOTON

Photon is an image acceleration and editing service for sites hosted on WordPress.com or on Jetpack-connected WordPress sites.

• TILED GALLERIESTiled Galleries allow you to display your image galleries in three new styles: a rectangular mosaic, a square mosaic, and a circular grid.

Page 39: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Image Slider Plugins

Soliloquy

Meta Slider

Page 40: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Image Gallery Plugins

NextGEN Gallery

Envira Gallery

Page 41: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Other Image Plugins• IMSANITY

Automatically resizes huge image uploads.

• FEATURED IMAGE ADMIN THUMBAdds inline thumbnail image to admin columns.

• REGENERATE THUMBNAILSAllows you to regenerate your thumbnails after changing the thumbnail sizes.

Page 42: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Sharing Your Images on Social Media

Page 43: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Image Hover Plugins• MONARCH BY ELEGANT THEMES

Social media sharing (includes image hover).

• WWM SOCIAL SHARE ON IMAGE HOVEREasily add social sharing icons on every WordPress image hover.

• JQUERY PIN IT BUTTON FOR IMAGES Highlights images on hover and adds a Pinterest “Pin It” button over them for easy pinning.

Page 44: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Facebook & Twitter Plugins• YOAST SEO

Includes options for specific images for Facebook and Twitter.

• WP FACEBOOK OPEN GRAPH PROTOCOLAdds proper Facebook Open Graph Meta tags.

• OPEN GRAPH PROTOCOL FRAMEWORK Adds proper Facebook Open Graph Meta tags.

Page 45: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Facebook & Twitter Plugins• FACEBOOK OPEN GRAPH, GOOGLE+ AND

TWITTER CARD TAGS Inserts Facebook Open Graph, Google+/Schema.org, Twitter and SEO Meta Tags.

• JM TWITTER CARDSEasy integration of Twitter cards in WordPress.

Page 46: Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Questions?