Learn how to incorporate photo galleries, pictures, and designs into a WordPress site using either a theme or plugin.

1. SoCal WordPress
Galleries, sliders,
featured content,
and slideshows
August 16, 2011
Hosted by:
Presenters: Natalie MacLees and Noel Saw
SoCalWP.com

2. Tonight’s Host Sponsor
www.mediatemple.net
Twitter @mediatemple

3. Other Sponsors
Turnkey content subscription plugin and
payment system for WordPress
WordPress: In Depth
Second Edition

4. Tonight’s Agenda
— WordPress In-Depth 2nd Edition by Que book give-away
— Media Pass Content Subscription Plugin Demo
— WordPress gallery themes demo by Noel Saw
— Theme Forest: Anan and Photoshot
— Graph Paper Press: Sidewinder and Workaholic
— WordPress gallery plugins demo by Natalie MacLees
— Smooth Slider
— NextGen Gallery
— 15 minute general Q&A
— Wrap-up and Upcoming Events
— Drawing for two free WordPress books and networking

5. Who needs a WordPress Gallery?
— Graphic Designers
— Photographers
— Fine Artists
— Illustrators
— 3D Modelers/Animators
— Architects
— Anyone who’s in a visually creative field

6. Gallery Themes vs. Plugins
— Themes are all-inclusive: includes entire page layout,
design, and gallery/slideshow functionality
— Usually they’re paid themes
— Includes some documentation and support
— Possibly more learning curve
— Plugins provide functionality and
work with existing WordPress sites
— Keep the design/layout you want
— Many are free but you might have to pay for premium
support
— Plugins might have incompatibility problems with your
theme

7. Gallery Theme: Anan
— Buy at Theme Forest (affiliate link)
— Full Screen home slideshow either single image or
slideshow
— Multiple inner page slideshows using gallery custom
post types. Fairly intuitive to learn.
— Easy to upload logos on navigation bar
— Built with Jquery
— Make take longer to load on slower connections for
visitors
— Example site: BeautifulDayPhotography.com

8. Gallery Theme: Sidewinder
— Buy membership at Graph Paper Press (affiliate
link)
— Wide screen home page slider
— Visitor can jump on position to view that photo
— Navigation bar has gallery category links at top of
page
— Inner page galleries rely on posts and attached
images to that post which may not be obvious to
new users
— Example site: LauraGracePhotography.com

9. Next up…
— WordPress Gallery Plugins:
— Smooth Slider
— NextGen Gallery

10. Galleries and Slideshows
Southern California WordPress Meetup
socalwp.org | @socalwp | #socalwp
Wednesday, August 17, 2011

11. Featured Content:
Smooth Slider
Wednesday, August 17, 2011

12. Smooth Slider
•SEO-friendly
•Non-coder friendly
•Premium support available
•Content choices
Wednesday, August 17, 2011

13. Smooth Slider
•Image choices
•Text choices
•Link choices
•Control slide order
•WPMU compatible
Wednesday, August 17, 2011

14. Room for Improvement
•Image-only slideshows
•One per page
•Settings
•CSS/JavaScript
•Mixed content
Wednesday, August 17, 2011

15. Smooth Slider
in Action
Wednesday, August 17, 2011

16. Non-coders:
Using SmoothSlider
•Install and activate plugin
•Add posts, pages, custom post types, or
media to sliders by visiting the edit page
and selecting options in the
SmoothSlider module
•On the SmoothSlider setting screen,
select colors, fonts, etc. The admin
preview shows you what your slider
looks like
Wednesday, August 17, 2011

17. Non-coders:
Using SmoothSlider
•After your SmoothSlider is created
and styled, you can place it on your
site:
•Use the SmoothSlider widget in a
widget area of your site
•Use the SmoothSlider shortcode
[smoothslider id=x] to put the
SmoothSlider in a post or page
Wednesday, August 17, 2011

18. Coders:
Using SmoothSlider
•Create a custom CSS theme for your
slider by putting a new theme folder
inside of wp-content/plugins/
smooth-slider/css/skins
•***Keep a backup - your theme
will be deleted when the plugin is
updated
Wednesday, August 17, 2011

19. Coders:
Using SmoothSlider
•Place the SmoothSlider into any of
your template files using a template
tag:
•<?php get_smooth_slider(x); ?>
•<?php get_smooth_slider_category
(‘slug’); ?> (dynamically create a
SmoothSlider from a post
category)
Wednesday, August 17, 2011

20. Galleries and Slideshows:
NextGen Gallery
Wednesday, August 17, 2011

21. NextGen Gallery
•Upload choices
•Image modifications
•Organization options
•Display options
Wednesday, August 17, 2011

22. Room for Improvement
•Non-coder customizations
•Documentation
Wednesday, August 17, 2011

23. NextGen Gallery
in Action
Wednesday, August 17, 2011

24. Non-coders:
Using NextGen Gallery
•Install and activate NextGen Gallery
plugin
•Upload photos and create galleries.
•Organize galleries into albums
•Edit photos: add tags, resize,
watermark, add titles, add
descriptions, adjust thumbnails,
rotate, etc.
Wednesday, August 17, 2011

25. Non-coders:
Using NextGen Gallery
•Once your photos are uploaded and
organized, you can display them on
your site in a few different ways:
•Widgets in widget areas of the site
•Shortcodes to display them in
posts and pages
Wednesday, August 17, 2011

26. Non-coders:
Using NextGen Gallery
• Shortcodes:
• [slideshow id=x w=x h=x]
• [album id=x template= extend or compact]
• [nggallery id=x template=caption or carousel]
• [singlepic id=x w=x h=x float=left or right mode=web20 or
watermark]
• [imagebrowser id=x template=caption or exif]
• [nggtags gallery=‘slug’ or album=‘slug’]
• [random max=x]
• [recent max=x]
• [tagcloud]
Wednesday, August 17, 2011

27. Coders:
Using NextGen Gallery
• Create custom displays for NextGen
Galleries:
• Inside your theme, create a nggallery
folder
• Default NextGen Galleries can be found
in wp-content/plugins/nextgen-gallery/
view
• Copy the file you’d like to modify to
your nggallery folder inside your theme
Wednesday, August 17, 2011

28. Coders:
Using NextGen Gallery
• Create custom displays for NextGen
Galleries (continued):
• Keeping the same file name will
override the default NextGen template
• Alternatively, rename the file to create
a new custom view (e.g. gallery-
customview.php)
• To use a new custom view: [gallery id=x
template=customview]
Wednesday, August 17, 2011

29. Questions?
Wednesday, August 17, 2011

30. Wrap-up & Upcoming Events
— Advanced Photoshop for web designers workshop
this weekend
— WordCamp LA September 10th: WordCamp.LA
— Upcoming joint meeting – Developers’ Hackathon:
+
September / October - Details TBD

31. Thanks for joining us!
Special thanks to our sponsors:
Contact:
SoCalWP .com
Nataliemac.com | natalie@nataliemac.com
NoelSaw.com/+ (Google profile) | noel@wpverse.com