SlideShare a Scribd company logo
1 of 31
Download to read offline
SoCal WordPress
                     Galleries, sliders,
                      featured content,
                        and slideshows
                           August 16, 2011

                                Hosted by:



Presenters: Natalie MacLees and Noel Saw
                           SoCalWP.com
Tonight’s Host Sponsor

    www.mediatemple.net

    Twitter @mediatemple
Other Sponsors

Turnkey content subscription plugin and
payment system for WordPress


            WordPress: In Depth
            Second Edition
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
Who needs a WordPress Gallery?
—  Graphic Designers
—  Photographers
—  Fine Artists
—  Illustrators
—  3D Modelers/Animators
—  Architects
—  Anyone who’s in a visually creative field
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
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
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
Next up…
—  WordPress Gallery Plugins:
  —  Smooth Slider
  —  NextGen Gallery
Galleries and Slideshows
                             Southern California WordPress Meetup
                               socalwp.org | @socalwp | #socalwp




Wednesday, August 17, 2011
Featured Content:
                             Smooth Slider


Wednesday, August 17, 2011
Smooth Slider

                   •SEO-friendly
                   •Non-coder friendly
                   •Premium support available
                   •Content choices

Wednesday, August 17, 2011
Smooth Slider

                   •Image choices
                   •Text choices
                   •Link choices
                   •Control slide order
                   •WPMU compatible

Wednesday, August 17, 2011
Room for Improvement

                   •Image-only slideshows
                   •One per page
                   •Settings
                   •CSS/JavaScript
                   •Mixed content

Wednesday, August 17, 2011
Smooth Slider
                               in Action


Wednesday, August 17, 2011
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
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
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
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
Galleries and Slideshows:
                             NextGen Gallery


Wednesday, August 17, 2011
NextGen Gallery

                   •Upload choices
                   •Image modifications
                   •Organization options
                   •Display options

Wednesday, August 17, 2011
Room for Improvement



                   •Non-coder customizations
                   •Documentation


Wednesday, August 17, 2011
NextGen Gallery
                                in Action


Wednesday, August 17, 2011
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
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
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
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
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
Questions?



Wednesday, August 17, 2011
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
Thanks for joining us!

               Special thanks to our sponsors:




Contact:
SoCalWP .com

Nataliemac.com | natalie@nataliemac.com
NoelSaw.com/+ (Google profile) | noel@wpverse.com

More Related Content

Viewers also liked

WordPress Tips and Tricks (DFW Meetup)
WordPress Tips and Tricks (DFW Meetup)WordPress Tips and Tricks (DFW Meetup)
WordPress Tips and Tricks (DFW Meetup)Stephanie Leary
 
Social Media + WordPress - SoCal WP Meetup
Social Media + WordPress - SoCal WP MeetupSocial Media + WordPress - SoCal WP Meetup
Social Media + WordPress - SoCal WP MeetupNoel Saw
 
WordPress 3.4 Preview
WordPress 3.4 PreviewWordPress 3.4 Preview
WordPress 3.4 PreviewNoel Saw
 
SoCal WordPress Meetup - iWeb to WordPress aka WP99
SoCal WordPress Meetup - iWeb to WordPress aka WP99SoCal WordPress Meetup - iWeb to WordPress aka WP99
SoCal WordPress Meetup - iWeb to WordPress aka WP99Noel Saw
 
Blog designing using wordpress.com tips by Bishal
Blog designing using wordpress.com tips by Bishal Blog designing using wordpress.com tips by Bishal
Blog designing using wordpress.com tips by Bishal Magar Bishal Rana
 
Enhance User Engagement with WordPress.com VIP and the Playbuzz Plugin
Enhance User Engagement with WordPress.com VIP and the Playbuzz PluginEnhance User Engagement with WordPress.com VIP and the Playbuzz Plugin
Enhance User Engagement with WordPress.com VIP and the Playbuzz PluginPlaybuzz
 
Introduccion al Procesamiento Digital de Imagenes
Introduccion al Procesamiento Digital de ImagenesIntroduccion al Procesamiento Digital de Imagenes
Introduccion al Procesamiento Digital de ImagenesVíctor Manuel García Luna
 

Viewers also liked (7)

WordPress Tips and Tricks (DFW Meetup)
WordPress Tips and Tricks (DFW Meetup)WordPress Tips and Tricks (DFW Meetup)
WordPress Tips and Tricks (DFW Meetup)
 
Social Media + WordPress - SoCal WP Meetup
Social Media + WordPress - SoCal WP MeetupSocial Media + WordPress - SoCal WP Meetup
Social Media + WordPress - SoCal WP Meetup
 
WordPress 3.4 Preview
WordPress 3.4 PreviewWordPress 3.4 Preview
WordPress 3.4 Preview
 
SoCal WordPress Meetup - iWeb to WordPress aka WP99
SoCal WordPress Meetup - iWeb to WordPress aka WP99SoCal WordPress Meetup - iWeb to WordPress aka WP99
SoCal WordPress Meetup - iWeb to WordPress aka WP99
 
Blog designing using wordpress.com tips by Bishal
Blog designing using wordpress.com tips by Bishal Blog designing using wordpress.com tips by Bishal
Blog designing using wordpress.com tips by Bishal
 
Enhance User Engagement with WordPress.com VIP and the Playbuzz Plugin
Enhance User Engagement with WordPress.com VIP and the Playbuzz PluginEnhance User Engagement with WordPress.com VIP and the Playbuzz Plugin
Enhance User Engagement with WordPress.com VIP and the Playbuzz Plugin
 
Introduccion al Procesamiento Digital de Imagenes
Introduccion al Procesamiento Digital de ImagenesIntroduccion al Procesamiento Digital de Imagenes
Introduccion al Procesamiento Digital de Imagenes
 

Similar to WordPress Gallery Themes & Plugins

Making kitten GIF galleries fabulous - Image optimisation for WordPress
Making kitten GIF galleries fabulous - Image optimisation for WordPressMaking kitten GIF galleries fabulous - Image optimisation for WordPress
Making kitten GIF galleries fabulous - Image optimisation for WordPressKayleigh Thorpe
 
Online exhibits in Plone
Online exhibits in PloneOnline exhibits in Plone
Online exhibits in PloneJazkarta, Inc.
 
Steph's Html5 and css presentation
Steph's Html5 and css presentationSteph's Html5 and css presentation
Steph's Html5 and css presentationstephy123123
 
Steph's Html5 and css presentation
Steph's Html5 and css presentationSteph's Html5 and css presentation
Steph's Html5 and css presentationstephy123123
 
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPressWhat Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPressEast Bay WordPress Meetup
 
full-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptxfull-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptxPlasterdog Web Design
 
Improving Site Design and Usability
Improving Site Design and UsabilityImproving Site Design and Usability
Improving Site Design and Usabilitycouldbe studios
 
WordPress Plugins to add style to your website
WordPress Plugins to add style to your websiteWordPress Plugins to add style to your website
WordPress Plugins to add style to your websiteBelinda Johnstone
 
D7 10 modules-in-20mins v2 copy
D7 10 modules-in-20mins v2 copyD7 10 modules-in-20mins v2 copy
D7 10 modules-in-20mins v2 copyAcquia
 
Drupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven DevelopmentDrupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven DevelopmentMediacurrent
 
Theme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.orgTheme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.orgThemeHorse
 
Introduction to Drupal 7 - Making a slideshow with Views 3
Introduction to Drupal 7 - Making a slideshow with Views 3Introduction to Drupal 7 - Making a slideshow with Views 3
Introduction to Drupal 7 - Making a slideshow with Views 3Kalin Chernev
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013dmethvin
 
Accessibility Hacks version 2
Accessibility Hacks version 2Accessibility Hacks version 2
Accessibility Hacks version 2Graham Armfield
 
Accessibility Hacks Version 2
Accessibility Hacks Version 2Accessibility Hacks Version 2
Accessibility Hacks Version 2Graham Armfield
 
Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsSteven Slack
 

Similar to WordPress Gallery Themes & Plugins (20)

Making kitten GIF galleries fabulous - Image optimisation for WordPress
Making kitten GIF galleries fabulous - Image optimisation for WordPressMaking kitten GIF galleries fabulous - Image optimisation for WordPress
Making kitten GIF galleries fabulous - Image optimisation for WordPress
 
Online exhibits in Plone
Online exhibits in PloneOnline exhibits in Plone
Online exhibits in Plone
 
Interactive Web Design 5 - Week 2 - Introduction
Interactive Web Design 5 - Week 2 -  IntroductionInteractive Web Design 5 - Week 2 -  Introduction
Interactive Web Design 5 - Week 2 - Introduction
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
 
Steph's Html5 and css presentation
Steph's Html5 and css presentationSteph's Html5 and css presentation
Steph's Html5 and css presentation
 
Steph's Html5 and css presentation
Steph's Html5 and css presentationSteph's Html5 and css presentation
Steph's Html5 and css presentation
 
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPressWhat Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
 
full-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptxfull-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptx
 
Improving Site Design and Usability
Improving Site Design and UsabilityImproving Site Design and Usability
Improving Site Design and Usability
 
WordPress Plugins to add style to your website
WordPress Plugins to add style to your websiteWordPress Plugins to add style to your website
WordPress Plugins to add style to your website
 
D7 10 modules-in-20mins v2 copy
D7 10 modules-in-20mins v2 copyD7 10 modules-in-20mins v2 copy
D7 10 modules-in-20mins v2 copy
 
Intro to Wordpress
Intro to WordpressIntro to Wordpress
Intro to Wordpress
 
Drupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven DevelopmentDrupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven Development
 
Theme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.orgTheme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.org
 
Introduction to Drupal 7 - Making a slideshow with Views 3
Introduction to Drupal 7 - Making a slideshow with Views 3Introduction to Drupal 7 - Making a slideshow with Views 3
Introduction to Drupal 7 - Making a slideshow with Views 3
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013
 
Accessibility Hacks version 2
Accessibility Hacks version 2Accessibility Hacks version 2
Accessibility Hacks version 2
 
Accessibility Hacks Version 2
Accessibility Hacks Version 2Accessibility Hacks Version 2
Accessibility Hacks Version 2
 
Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for Clients
 

Recently uploaded

Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 

Recently uploaded (19)

Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 

WordPress Gallery Themes & Plugins

  • 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
  • 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