About Mel What I think of me – Jacques Surveyer photographer and

writerl What I have done – IT and now Web Developmentl How I have trained – Computer Science at U of Michigan,

MBA at Western Ontariol What I do for fun – photography, tennis, badminton and

selective travell Slides here - http://www.slideshare.net/jbsurveyer/the-

best-wordpress-image-grids-pluginsl Slides and summary here: http://theopensourcery.com

6 Key WordPress Success Factors

1) Effective Website Layout & User Interactions2) Easy Access to and Presentation of Data3) Media/Image Refinement and Layout4) Ease of change of style and features5) Easy to operate and update6) Security & reliability of the WP Package

WordPress has become the Web's OSLike Apple, WP Developers can say “there is a plugin for that”

The Web Age of Visual Images1 -There are 2 billion cameras in the world today.2 - 10% of all images taken by humans were done in last year.3 - Images convey info, mood, style instantly.4 - Images have catapulted social media like Instagram, Pinterest,

Tumblr, Facebook to prominence.5 - Pages with relevant images have 94% more total views.6 - Interactive images with video, animations, and links

+ attract more users+ act as visual sitemaps to a website

7 - 67% of users say the quality of a product image is very important in selecting and purchasing.

8 - Search results with an image get 60% higher use.

http://www.jeffbullas.com/wp-content/uploads/2012/05/Images-Infographic.png

Website Users are ”casual” about their Images

l Staging of image may not be appropriatel Size of image is awry – too small, too bigl Finishing of image can be poor, too many dirty dogsl Not enough support for image managementl Concern about image security

Images Used 5 Principal Ways

l Single, standalone imagesl Sliders of imagesl Image Galleries or Gridsl Videos l Animations, interactive images

Image Grids – What are they?

l Image Grids displays a gallery of medial Used when many images are on tabular display

Image Grids - Why they matter I

l

l Image Usage on All the Worlds Websites

http://w3techs.com/technologies/cross/image_format/site_element

Image Grids - Why they matter 2

l

1 - Image grids are used in portfolios, photo galleries, product layouts, testimonials, people lists, etc.

2 - Images help reduce the bounce rate.3 - Images improve conversion rates.4 - Image grids help pull users below the foldline.5 - Image grids can act as a second menu or Visual

Sitemap for a website.6 - Image grids with lightboxes can tell a story and pack

an info punch.

Image Grids != Sliders Angular uses a l Image grids are 2 dimensional, sliders 1

l l l l l l l l Image grids have some animation, sliders have lots more.l Image grids emulate slider's use of click links & text captioning.

Image Grid Trends

20+ free+premium Image Grid pluginsl https://www.designmaz.net/best-wordpress-gallery-plugins/

http://www.hongkiat.com/blog/wordpress-photo-gallery-plugins/- Very mixed capabilities and user ratings on free versions- Compare to hot free slider plugins and frontend plugins + Responsive design is consistently provided+ Lightbox support for most grids+ Captioning supported in lightbox and some on-grid- Few support for image sources beyond WP Gallery- Some support for Page/Post using featured images- Some support for Masonry/Isotope layout- Few support filtering which images shown in the grid- Few support load more or infinite scroll

l

l l

Free and Good Image GridsHere are 5 free WP image grid plugins 1 - NextGen Gallery has improved immensely

2 - Easy Image Collage

3 - Foo Gallery

Demo of Foo Gallery at http://uidesigns.theopensourcery.com/free-foo-gallery/

4 – Justified Image Gallery

Demo of JIG in action - http://uidesigns.theopensourcery.com/free-jig/

5 – Grid Accordion

Demo view

2 Premium Image GridsHere are two premium Image Grids that earn their keep.Essential Image Grid for $27/website use. Justified Image Grid for $29/website use.

Premium Image Grid Attributes+ Responsive image grids that work well on mobile and desktop screens.+ Ability to incorporate portrait, landscape, and varying dimensions images in

the same image grid using masonry and other adaptive layouts.+ Add styled captions, links, and shortcodes to images.+ Use a variety of image sources including WP gallery, NextGen, FaceBook,

Flickr, Instagram, CPT, WooCommerce etc.+ Provide an image grid of feature Posts based on taxonomy, category, or date

to create a Visual Sitemap+ Provide a variety of lightboxes for magnification of images with captions.+ Allow for load-more infinite image scrolling.+ Provide filtering of images displayed in the grid with filter buttons along the

top for All, Tagged, Category, etc. + Provide a variety of styling options for individual images and the grid as a

whole.

Essential Grid in Action

Essential Grid does captions, masonry, & linksEssential supports Post, Page, CPT, Iframe, etcEssential displays YouTube, Vimeo, HTML5, Wistia videoBut no support for Nextgen, Flickr, Instagram, other sources

Essential Grid Posts

Setting up a Visual Sitemap for Posts or Pages is easy to do.The sitemap can be a single row slider with filters

Essential Grid Pros & Cons

+ Has 32 preset Skins for wide layout choices + Presets can be modified by users with Skin editor+ Box, Full-width, and Full-Screen Grids+ Tabbed, drag and drop Image Grid editor easier to use than JIG editor + Easier use of video in image grid than JIG+ Documentation has more and better examples- Much fewer image sources- Weaker handling of mixed dimension images- More bugs, especially in advanced features

JIG in Action

Justified Image Grid handles varying image dimensions best

JIG in Action 2 WP Gallery Grid with Descriptions and Captions Image Grid is responsive Note the very different image sizes neatly fit together

JIG with Posts

JIG can only handle Posts in its banner format.Easy to setup and manage.No support for Pages, Custom Post Type, etc.

JIG Pros and Cons

+ Superior support for Image Sources including Nextgen, Flickr, Facebook,500px, Pinterest, deviantART, Stumbleupon, Imgur, Tumblr, & WordPress.com.

+ Superior handling of varying size images in a grid.+ better range of captioning options and control.+ better bug support and fixes.- weaker WP Page, CPT, Woo Commerce support.- fewer video, iframe and custom object options.- less control of full-width and full-screen image grids.

Summary

+ The premium Image Grid plugins are more than a cut above their free plugin counter parts.

+ Both have a wide range of features so there is a substantial learning curve to master.

+ For many projects, it is easy to justify an added $29US/use cost of JIG or $27US/use cost of Essential Grid.

+ If you have lots of people, product, event, and image portfolios, the premium plugins make them easier to produce.

? - If you need quick image grids with varying data sources and varying image sizes – think JIG.

? - If you need a mix of video, image, and CPT with wide or fullscreen layout and precise styling – think Essential Grid.

! - If you want to save time and money on a job with lots of images and image grids, think premium image grid plugin