SlideShare a Scribd company logo
1 of 12
Download to read offline
Adding a Photo Gallery to a WordPress Post or Page
       Inserting one photo at a time when writing a WordPress post is pretty straightforward, but what if you
       want to add a whole collection of photos? Suppose you’re taking a trip around the world and you’ve set
       up your blog to chronicle your travels, and in each post you want to include a dozen shots of the city you
       visited that day?

       The good news is that WordPress has gallery features built in, so you don’t even need a plugin to add a
       basic photo gallery to a post or page.

       The bad news is that it requires more steps than adding a single photo. In fact, if you’re not used to
       WordPress, the latest features to help you display galleries might just make things more confusing for
       you. (The WordPress development team knows it needs to work on media, but hasn’t had a chance to
       tackle that yet. Improvements are in the pipeline.)

       Meanwhile, WordPress galleries aren’t really that difficult once you get used to them, and there are
       some great plugins and themes to allow you to add some spectacular effects. Here are the steps to
       insert a no-frills photo gallery without adding any plugins.

           1. Open the edit screen for the post or page where you want to insert the gallery. You can create a
              new post, or add the gallery to an existing post.
           2. Position your cursor where you want the gallery to appear. Moving galleries after you insert
              them is more trouble than putting them in the right place to start with.
           3. Click the Insert Image button at the top left of the post/page editing area.
1
Page




       Sallie Goetsch                            sallie@wpfangirl.com                          t: @salliegoetsch
4. Click the From Computer tab to upload the images for your gallery.




           5. Select and upload multiple images at once.
2
Page




       Sallie Goetsch                          sallie@wpfangirl.com                t: @salliegoetsch
(Windows users can select non-consecutive images by holding down the CTRL key while clicking
               the icons; Mac users can do the same with the CMD key. To select consecutive images, hold
               down the SHIFT key.) Click Open when you’ve finished selecting images.

               Tip: If you really are traveling around the world, uploading photos from your camera in
               an Internet café anywhere but Japan or South Korea can be pretty time-consuming.
               These days, even point-and-shoot cameras boast resolutions of 12 megapixels or more.
               That’s a 4000 x 3000 pixel image: each JPG file will be 2.5 MB. A set of them will take
               forever to upload over patchy hotel wi-fi or the satellite connection in that Mexican
               café.

               If you don’t plan to print the photos when you get home, go into your camera settings
               and set your photo size and quality below the maximum. An image size of 1600 or even
               1200 pixels on the longest edge is plenty for a website.

           6. Wait until WordPress has finished “crunching” the files and click the Save All Changes button at
              the bottom of the list of images.
3
Page




       Sallie Goetsch                           sallie@wpfangirl.com                          t: @salliegoetsch
Power Users’ Clinic: Add Titles and Descriptions to Gallery Images
        For bonus points, after you click “Save all changes”, click “Show” next to each image and fill in each
        image’s title, alternate text, caption, and description. Then Save all changes again. Giving the images
        titles that mean something to you helps the search engines find you and it helps screen readers for
        the visually impaired. And it will help you, too, when you’re going through your media library trying
        to find a particular photo.
4
Page




       Sallie Goetsch                           sallie@wpfangirl.com                            t: @salliegoetsch
7. After you click “Save all changes”, the Gallery tab appears at the top of the Add an Image dialog
              box. From now on, whenever you click the Add an Image button for that post, you’ll see the
              Gallery tab between From URL and Media Library. That tab only appears in posts that have had
              galleries inserted. The number in parentheses after the word “Gallery” shows how many images
              are in the gallery.




           8. Choose your Gallery Settings from the options below the list of images in the gallery. This is
              where you decide what order to put the pictures in and how many columns your gallery should
              have.

               If your gallery is going to appear on a page with a sidebar and you use the standard 150 x 150
               pixel thumbnail size, you won’t be able to fit more than three images across. But if you use a
               full-width page for your galleries, or a smaller thumbnail size, you can have five or six columns of
               photos.

               Note: to change the size of your image thumbnails, go to Settings  Media.

               In addition to the built-in options to sort the images by Menu Order, Date/Time, Title, and
               Random, you can manually order your images by numbering them in the boxes in the Actions
               column and clicking “Save all changes” again.

               The final option is whether to link the thumbnails to the original image file or to the attachment
               page. If you’ve filled in an image description or want people to be able to submit comments on a
               particular image, then it’s best to link to the attachment page. Lightbox and slideshow plugins
               tend to override this option, but some will display the descriptions from the attachment page.
5
Page




       Sallie Goetsch                            sallie@wpfangirl.com                            t: @salliegoetsch
9. When you’re happy with your settings, click the Insert gallery button.




               Once you click the button, a gallery placeholder appears in your post editor window. If you’re
               using the visual editor, the gallery placeholder looks like this:
6
Page




       Sallie Goetsch                           sallie@wpfangirl.com                           t: @salliegoetsch
If you’re using the HTML editor, the gallery placeholder looks like this:




               What you’re looking at is called a gallery shortcode. (A “shortcode” is a command in square
               brackets that substitutes for HTML or PHP.) If you need to move your gallery around in your
               post, the easiest way is to switch to the HTML editor and cut and paste that shortcode.

           10. If your theme supports post formats, toggle the “Gallery” radio button on. That way your gallery
               can take advantage of any special design features your theme has for galleries.
7
Page




       Sallie Goetsch                            sallie@wpfangirl.com                         t: @salliegoetsch
WordPress introduced post formats in 2011 with WordPress 3.1. They’re designed to
               help display certain kinds of content in special ways, much the way Tumblr does.

               Older themes may not support post formats, or may support them in a different way. The
               Coraline theme from Automattic supports Gallery and Aside post formats, but you have to
               designate categories in the theme options in order to use them. If you’re inserting a gallery in
               the Coraline theme, be sure to choose the right category.




               If your theme doesn’t support post formats, don’t worry. The gallery itself will display just fine.
               The main difference will be in the way the post excerpt appears on the blog index page.
8
Page




       Sallie Goetsch                             sallie@wpfangirl.com                            t: @salliegoetsch
11. And now for the last crucial step: publish the post or page.




               Your gallery post appears as a grid of neatly arranged thumbnails.
9
Page




       Sallie Goetsch                            sallie@wpfangirl.com               t: @salliegoetsch
The actual galleries appear much the same in Coraline (above) and Twenty Eleven (below).




       So What Does the Gallery Post Format Do?
       If WordPress galleries themselves look the same in themes that support the gallery post format and
       those that don’t, what does the gallery post format actually do?

       First, it gives the designer the opportunity to make the rest of the post look different from other kinds of
       posts—making it a full-width post where a standard post has a sidebar, for instance, or giving it a
       particular background color.

       Second, it changes the way the post appears in the blog index (the home page). The themes used for the
       screenshots above both show post excerpts in the blog index. For a standard post, the excerpt is just a
       few lines of unformatted text. That wouldn’t work very well for a gallery, so a gallery post excerpt is set
       up to work a little differently.

       “Coraline” and “Twenty Eleven” both represent gallery posts with a single thumbnail image and tell you
       how many images are in the gallery, but the Coraline excerpt has a box around it and a link to “more
       galleries.” The Twenty Eleven excerpt has a label above it saying “Gallery.” Those differences are design
       choices made by the theme developers.
10
Page




       Sallie Goetsch                            sallie@wpfangirl.com                            t: @salliegoetsch
Coraline Gallery Post Excerpt 1




       Twenty Eleven Gallery Post Excerpt 1

       If galleries are important to you, check out the way a theme handles the gallery post format in the demo
       before you decide to use it. Sure, you can hack the CSS in the stylesheet or install a plugin to change it,
11




       but the better it works in the first place, the better off you are.
Page




       Sallie Goetsch                            sallie@wpfangirl.com                           t: @salliegoetsch
Power Users’ Clinic: Gallery Shortcodes
        In earlier versions of WordPress, the only way to insert a gallery was with the shortcode [gallery].
        Used by itself (you can type it into either the visual editor or the HTML editor), the [gallery]
        shortcode will display a gallery of all images attached to that post or page.

        But you can do more, because shortcodes come with options. In fact, the [gallery] shortcode comes
        with more options than you have when you insert a gallery through the file upload screen. The
        options associated with the [gallery] shortcode are:

               columns: number of columns in the gallery.
               id: ID of the post whose images you want to display. It does not have to be the post you’re
                putting the gallery into. You can find the post ID by hovering over the post title in the All
                Posts list and looking down into the lower left corner. You’ll see a small popup that says
                something like “http://your.domain.com/wp-admin/post.php?post=ID&action=edit,” except
                there will be a number after the “post=” instead of the word “ID”. That’s the post ID
                number.
               size: the image size to use for the thumbnail grid: thumbnail, medium, large, or full. The
                default is “thumbnail.”
               orderby: the criterion for ordering images. The choices are menu_order, date, title, ID, and
                RAND.
               order: ASC (ascending) or DESC (descending).
               link: determines whether the thumbnails link to full-size images (file) or attachment pages
                (attachment).
               include: tells the gallery to include specific attachment (image) IDs. You find these by going
                into the WordPress Media Library and hovering over the image title. A popup appears in the
                lower left corner of the browser, the same way it did to show you the post ID.
               exclude: tells the gallery to exclude specific attachment (image) IDs. You can use either the
                “include” or the “exclude” option in one shortcode, but not both.

        So if you wanted to insert a gallery that used a single column of large images, ordered by ID, and
        including attachments 17, 18, 19, 25, 26, 27, 34, 35, 36 (from three different posts), the shortcode
        would look like this:

        [gallery columns="1" size="large" orderby="ID" order="ASC" link="attachment"
        include="17, 18, 19, 25, 26, 27, 34, 35, 36"]

        And then there are the really geeky options that probably won’t be of interest to anyone but theme
        designers:

               itemtag: the type of (X)HTML tag used to enclose each item in the gallery. The default is
                “dl”, which is “definition list.”
               icontag: the tag used to enclose each thumbnail image. The default is “dt”, or “definition
                term.”
               captiontag: the tag used to enclose the caption for each thumbnail. The default is “dd” or
                “definition definition.”
12




        A designer might want to change these if definition lists are going to be important in the theme, but
Page




        ordinary people can safely ignore them.



       Sallie Goetsch                           sallie@wpfangirl.com                            t: @salliegoetsch

More Related Content

What's hot

Finding and Crediting Copyright-Friendly Images for Presentations and Public...
Finding and Crediting Copyright-Friendly Images for Presentations and Public...Finding and Crediting Copyright-Friendly Images for Presentations and Public...
Finding and Crediting Copyright-Friendly Images for Presentations and Public...CurriculumCollection
 
Social Media Basics - WordPress Definitions
Social Media Basics - WordPress DefinitionsSocial Media Basics - WordPress Definitions
Social Media Basics - WordPress DefinitionsLaunch It Social Media
 
Creating a Blog
Creating a BlogCreating a Blog
Creating a BlogMrsLG
 
A2WPress Roadfighter Theme Documentation
A2WPress Roadfighter Theme DocumentationA2WPress Roadfighter Theme Documentation
A2WPress Roadfighter Theme DocumentationA2WPress
 
Post Type Formats
Post Type FormatsPost Type Formats
Post Type Formatsrobingurl65
 

What's hot (6)

Finding and Crediting Copyright-Friendly Images for Presentations and Public...
Finding and Crediting Copyright-Friendly Images for Presentations and Public...Finding and Crediting Copyright-Friendly Images for Presentations and Public...
Finding and Crediting Copyright-Friendly Images for Presentations and Public...
 
Social Media Basics - WordPress Definitions
Social Media Basics - WordPress DefinitionsSocial Media Basics - WordPress Definitions
Social Media Basics - WordPress Definitions
 
Creating a Blog
Creating a BlogCreating a Blog
Creating a Blog
 
A2WPress Roadfighter Theme Documentation
A2WPress Roadfighter Theme DocumentationA2WPress Roadfighter Theme Documentation
A2WPress Roadfighter Theme Documentation
 
Image servers
Image serversImage servers
Image servers
 
Post Type Formats
Post Type FormatsPost Type Formats
Post Type Formats
 

Viewers also liked

WordPress SEO Revisited by Lou Anne McKeefery of Be Found
WordPress SEO Revisited by Lou Anne McKeefery of Be FoundWordPress SEO Revisited by Lou Anne McKeefery of Be Found
WordPress SEO Revisited by Lou Anne McKeefery of Be FoundEast Bay WordPress Meetup
 
WCSF 2012 - All You Can Eat Content Types
WCSF 2012 - All You Can Eat Content TypesWCSF 2012 - All You Can Eat Content Types
WCSF 2012 - All You Can Eat Content TypesScott Clark
 
bbPress - WCSF 2012
bbPress - WCSF 2012bbPress - WCSF 2012
bbPress - WCSF 2012John Jacoby
 
Git Version Control for the Complete N00b by Adam LaBarge
Git Version Control for the Complete N00b by Adam LaBargeGit Version Control for the Complete N00b by Adam LaBarge
Git Version Control for the Complete N00b by Adam LaBargeEast Bay WordPress Meetup
 
WordPress and Business Intelligence
WordPress and Business IntelligenceWordPress and Business Intelligence
WordPress and Business IntelligenceTech Liminal
 
High Performance WordPress
High Performance WordPressHigh Performance WordPress
High Performance WordPressvnsavage
 
Designing for The Modern Web
Designing for The Modern WebDesigning for The Modern Web
Designing for The Modern WebSara Cannon
 
WordPress State of the Word 2012
WordPress State of the Word 2012WordPress State of the Word 2012
WordPress State of the Word 2012photomatt
 
Rob La Gatta; Making the Events Calendar Sit Up and Beg
Rob La Gatta; Making the Events Calendar Sit Up and BegRob La Gatta; Making the Events Calendar Sit Up and Beg
Rob La Gatta; Making the Events Calendar Sit Up and BegEast Bay WordPress Meetup
 
Sallie Goetsch: Making the Events Calendar Sit Up and Beg
Sallie Goetsch: Making the Events Calendar Sit Up and BegSallie Goetsch: Making the Events Calendar Sit Up and Beg
Sallie Goetsch: Making the Events Calendar Sit Up and BegEast Bay WordPress Meetup
 
Real Developer Tools for WordPress by Stefan Didak
Real Developer Tools for WordPress by Stefan DidakReal Developer Tools for WordPress by Stefan Didak
Real Developer Tools for WordPress by Stefan DidakEast Bay WordPress Meetup
 

Viewers also liked (16)

WordPress SEO Revisited by Lou Anne McKeefery of Be Found
WordPress SEO Revisited by Lou Anne McKeefery of Be FoundWordPress SEO Revisited by Lou Anne McKeefery of Be Found
WordPress SEO Revisited by Lou Anne McKeefery of Be Found
 
WCSF 2012 - All You Can Eat Content Types
WCSF 2012 - All You Can Eat Content TypesWCSF 2012 - All You Can Eat Content Types
WCSF 2012 - All You Can Eat Content Types
 
bbPress - WCSF 2012
bbPress - WCSF 2012bbPress - WCSF 2012
bbPress - WCSF 2012
 
Git Version Control for the Complete N00b by Adam LaBarge
Git Version Control for the Complete N00b by Adam LaBargeGit Version Control for the Complete N00b by Adam LaBarge
Git Version Control for the Complete N00b by Adam LaBarge
 
Is Your (Client's) Website Ready for 2017?
Is Your (Client's) Website Ready for 2017?Is Your (Client's) Website Ready for 2017?
Is Your (Client's) Website Ready for 2017?
 
WordPress and Business Intelligence
WordPress and Business IntelligenceWordPress and Business Intelligence
WordPress and Business Intelligence
 
High Performance WordPress
High Performance WordPressHigh Performance WordPress
High Performance WordPress
 
State of Mobile
State of MobileState of Mobile
State of Mobile
 
Designing for The Modern Web
Designing for The Modern WebDesigning for The Modern Web
Designing for The Modern Web
 
WordPress State of the Word 2012
WordPress State of the Word 2012WordPress State of the Word 2012
WordPress State of the Word 2012
 
PhpStorm for WordPress
PhpStorm for WordPressPhpStorm for WordPress
PhpStorm for WordPress
 
Making WordPress Easier to Use
Making WordPress Easier to UseMaking WordPress Easier to Use
Making WordPress Easier to Use
 
WordPress Comments (November Meetup)
WordPress Comments (November Meetup)WordPress Comments (November Meetup)
WordPress Comments (November Meetup)
 
Rob La Gatta; Making the Events Calendar Sit Up and Beg
Rob La Gatta; Making the Events Calendar Sit Up and BegRob La Gatta; Making the Events Calendar Sit Up and Beg
Rob La Gatta; Making the Events Calendar Sit Up and Beg
 
Sallie Goetsch: Making the Events Calendar Sit Up and Beg
Sallie Goetsch: Making the Events Calendar Sit Up and BegSallie Goetsch: Making the Events Calendar Sit Up and Beg
Sallie Goetsch: Making the Events Calendar Sit Up and Beg
 
Real Developer Tools for WordPress by Stefan Didak
Real Developer Tools for WordPress by Stefan DidakReal Developer Tools for WordPress by Stefan Didak
Real Developer Tools for WordPress by Stefan Didak
 

Similar to WordPress Gallery tutorial

Image Handling: Understanding the Basics of WordPress Media
Image Handling: Understanding the Basics of WordPress MediaImage Handling: Understanding the Basics of WordPress Media
Image Handling: Understanding the Basics of WordPress MediaRich Plakas
 
Using Wordpress with Reclaim Hosting
Using Wordpress with Reclaim HostingUsing Wordpress with Reclaim Hosting
Using Wordpress with Reclaim HostingCindy Royal
 
What is Gutenberg A Modern WordPress Block Editor.pdf
What is Gutenberg A Modern WordPress Block Editor.pdfWhat is Gutenberg A Modern WordPress Block Editor.pdf
What is Gutenberg A Modern WordPress Block Editor.pdfWPWeb Infotech
 
Ci 350 tumblr
Ci 350 tumblrCi 350 tumblr
Ci 350 tumblrcooper276
 
A2WPress Squirrel Theme Documentation
A2WPress Squirrel Theme DocumentationA2WPress Squirrel Theme Documentation
A2WPress Squirrel Theme DocumentationA2WPress
 
A2WPress Regal Theme Documentation
A2WPress Regal Theme DocumentationA2WPress Regal Theme Documentation
A2WPress Regal Theme DocumentationA2WPress
 
How to migrate to the New Blogger safely… and edit your template easily
How to migrate to the New Blogger safely… and edit your template easilyHow to migrate to the New Blogger safely… and edit your template easily
How to migrate to the New Blogger safely… and edit your template easilyClaudiaB
 
Complete word press tutorial
Complete word press tutorialComplete word press tutorial
Complete word press tutorialwp-enlight
 
Drupal For Dummies
Drupal For DummiesDrupal For Dummies
Drupal For DummiesKoen Delvaux
 
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesWordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesMichelle Ames
 
How To Set Up Your Own Blog Using Wordpress
How To Set Up Your Own Blog Using WordpressHow To Set Up Your Own Blog Using Wordpress
How To Set Up Your Own Blog Using Wordpressmsrichards
 
A2WPress Themia Documentation
A2WPress Themia DocumentationA2WPress Themia Documentation
A2WPress Themia DocumentationA2WPress
 
A2 w press coveradocs
A2 w press coveradocsA2 w press coveradocs
A2 w press coveradocsA2WPress
 

Similar to WordPress Gallery tutorial (20)

Image Handling: Understanding the Basics of WordPress Media
Image Handling: Understanding the Basics of WordPress MediaImage Handling: Understanding the Basics of WordPress Media
Image Handling: Understanding the Basics of WordPress Media
 
Using Wordpress with Reclaim Hosting
Using Wordpress with Reclaim HostingUsing Wordpress with Reclaim Hosting
Using Wordpress with Reclaim Hosting
 
What is Gutenberg A Modern WordPress Block Editor.pdf
What is Gutenberg A Modern WordPress Block Editor.pdfWhat is Gutenberg A Modern WordPress Block Editor.pdf
What is Gutenberg A Modern WordPress Block Editor.pdf
 
Web design basics_04
Web design basics_04Web design basics_04
Web design basics_04
 
Ci 350 tumblr ci 350
Ci 350   tumblr ci 350Ci 350   tumblr ci 350
Ci 350 tumblr ci 350
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Ci 350 tumblr
Ci 350 tumblrCi 350 tumblr
Ci 350 tumblr
 
A2WPress Squirrel Theme Documentation
A2WPress Squirrel Theme DocumentationA2WPress Squirrel Theme Documentation
A2WPress Squirrel Theme Documentation
 
A2WPress Regal Theme Documentation
A2WPress Regal Theme DocumentationA2WPress Regal Theme Documentation
A2WPress Regal Theme Documentation
 
How to migrate to the New Blogger safely… and edit your template easily
How to migrate to the New Blogger safely… and edit your template easilyHow to migrate to the New Blogger safely… and edit your template easily
How to migrate to the New Blogger safely… and edit your template easily
 
Complete word press tutorial
Complete word press tutorialComplete word press tutorial
Complete word press tutorial
 
Drupal For Dummies
Drupal For DummiesDrupal For Dummies
Drupal For Dummies
 
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesWordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
 
How To Set Up Your Own Blog Using Wordpress
How To Set Up Your Own Blog Using WordpressHow To Set Up Your Own Blog Using Wordpress
How To Set Up Your Own Blog Using Wordpress
 
Claim Your GSU Blog!
Claim Your GSU Blog!Claim Your GSU Blog!
Claim Your GSU Blog!
 
How To Use GSU Sites
How To Use GSU SitesHow To Use GSU Sites
How To Use GSU Sites
 
A2WPress Themia Documentation
A2WPress Themia DocumentationA2WPress Themia Documentation
A2WPress Themia Documentation
 
WordPress
WordPressWordPress
WordPress
 
A2 w press coveradocs
A2 w press coveradocsA2 w press coveradocs
A2 w press coveradocs
 
WordPress Basics
WordPress BasicsWordPress Basics
WordPress Basics
 

More from East Bay WordPress Meetup

How to Develop a Color Palette for Your Website with Amanada McCoy
How to Develop a Color Palette for Your Website with Amanada McCoyHow to Develop a Color Palette for Your Website with Amanada McCoy
How to Develop a Color Palette for Your Website with Amanada McCoyEast Bay WordPress Meetup
 
Beyond Gravity Forms: Form Plugins for WordPress
Beyond Gravity Forms: Form Plugins for WordPressBeyond Gravity Forms: Form Plugins for WordPress
Beyond Gravity Forms: Form Plugins for WordPressEast Bay WordPress Meetup
 
Advanced Custom Fields: Amazing Possibilities and Irritating Limitations
Advanced Custom Fields: Amazing Possibilities and Irritating LimitationsAdvanced Custom Fields: Amazing Possibilities and Irritating Limitations
Advanced Custom Fields: Amazing Possibilities and Irritating LimitationsEast Bay WordPress Meetup
 
Introduction to Google Analytics by Katherine Mancuso
Introduction to Google Analytics by Katherine MancusoIntroduction to Google Analytics by Katherine Mancuso
Introduction to Google Analytics by Katherine MancusoEast Bay WordPress Meetup
 
iThemes Exchange: the New Kid on the WordPress E-Commerce Block
iThemes Exchange: the New Kid on the WordPress E-Commerce BlockiThemes Exchange: the New Kid on the WordPress E-Commerce Block
iThemes Exchange: the New Kid on the WordPress E-Commerce BlockEast Bay WordPress Meetup
 
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
 
Drag-and-drop WordPress Themes, featuring Themify Builder
Drag-and-drop WordPress Themes, featuring Themify BuilderDrag-and-drop WordPress Themes, featuring Themify Builder
Drag-and-drop WordPress Themes, featuring Themify BuilderEast Bay WordPress Meetup
 

More from East Bay WordPress Meetup (20)

How to Conduct an SEO Audit
How to Conduct an SEO AuditHow to Conduct an SEO Audit
How to Conduct an SEO Audit
 
WordPress Membership Plugins: WP-Members
WordPress Membership Plugins: WP-MembersWordPress Membership Plugins: WP-Members
WordPress Membership Plugins: WP-Members
 
WordPress Membership Plugins: MemberPress
WordPress Membership Plugins: MemberPress WordPress Membership Plugins: MemberPress
WordPress Membership Plugins: MemberPress
 
How to Develop a Color Palette for Your Website with Amanada McCoy
How to Develop a Color Palette for Your Website with Amanada McCoyHow to Develop a Color Palette for Your Website with Amanada McCoy
How to Develop a Color Palette for Your Website with Amanada McCoy
 
Event Management Plugins for WordPress
Event Management Plugins for WordPressEvent Management Plugins for WordPress
Event Management Plugins for WordPress
 
Beyond Gravity Forms: Form Plugins for WordPress
Beyond Gravity Forms: Form Plugins for WordPressBeyond Gravity Forms: Form Plugins for WordPress
Beyond Gravity Forms: Form Plugins for WordPress
 
Advanced Custom Fields: Amazing Possibilities and Irritating Limitations
Advanced Custom Fields: Amazing Possibilities and Irritating LimitationsAdvanced Custom Fields: Amazing Possibilities and Irritating Limitations
Advanced Custom Fields: Amazing Possibilities and Irritating Limitations
 
March 2015: Plugins Worth Paying For
March 2015: Plugins Worth Paying ForMarch 2015: Plugins Worth Paying For
March 2015: Plugins Worth Paying For
 
Google Webmaster Tools for WordPress
Google Webmaster Tools for WordPressGoogle Webmaster Tools for WordPress
Google Webmaster Tools for WordPress
 
Introduction to Google Analytics by Katherine Mancuso
Introduction to Google Analytics by Katherine MancusoIntroduction to Google Analytics by Katherine Mancuso
Introduction to Google Analytics by Katherine Mancuso
 
iThemes Exchange: the New Kid on the WordPress E-Commerce Block
iThemes Exchange: the New Kid on the WordPress E-Commerce BlockiThemes Exchange: the New Kid on the WordPress E-Commerce Block
iThemes Exchange: the New Kid on the WordPress E-Commerce Block
 
Running a WordPress Business--Some Numbers
Running a WordPress Business--Some NumbersRunning a WordPress Business--Some Numbers
Running a WordPress Business--Some Numbers
 
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
 
Making WordPress Fly
Making WordPress FlyMaking WordPress Fly
Making WordPress Fly
 
Drag-and-drop WordPress Themes, featuring Themify Builder
Drag-and-drop WordPress Themes, featuring Themify BuilderDrag-and-drop WordPress Themes, featuring Themify Builder
Drag-and-drop WordPress Themes, featuring Themify Builder
 
Drag and-Drop WordPress Themes
Drag and-Drop WordPress ThemesDrag and-Drop WordPress Themes
Drag and-Drop WordPress Themes
 
Fun with WooCommerce
Fun with WooCommerceFun with WooCommerce
Fun with WooCommerce
 
Managed WordPress Hosting
Managed WordPress HostingManaged WordPress Hosting
Managed WordPress Hosting
 
Having Fun with Local WordPress Development
Having Fun with Local WordPress DevelopmentHaving Fun with Local WordPress Development
Having Fun with Local WordPress Development
 
Share Your WordPress Developer Tools
Share Your WordPress Developer ToolsShare Your WordPress Developer Tools
Share Your WordPress Developer Tools
 

Recently uploaded

Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 

Recently uploaded (20)

Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 

WordPress Gallery tutorial

  • 1. Adding a Photo Gallery to a WordPress Post or Page Inserting one photo at a time when writing a WordPress post is pretty straightforward, but what if you want to add a whole collection of photos? Suppose you’re taking a trip around the world and you’ve set up your blog to chronicle your travels, and in each post you want to include a dozen shots of the city you visited that day? The good news is that WordPress has gallery features built in, so you don’t even need a plugin to add a basic photo gallery to a post or page. The bad news is that it requires more steps than adding a single photo. In fact, if you’re not used to WordPress, the latest features to help you display galleries might just make things more confusing for you. (The WordPress development team knows it needs to work on media, but hasn’t had a chance to tackle that yet. Improvements are in the pipeline.) Meanwhile, WordPress galleries aren’t really that difficult once you get used to them, and there are some great plugins and themes to allow you to add some spectacular effects. Here are the steps to insert a no-frills photo gallery without adding any plugins. 1. Open the edit screen for the post or page where you want to insert the gallery. You can create a new post, or add the gallery to an existing post. 2. Position your cursor where you want the gallery to appear. Moving galleries after you insert them is more trouble than putting them in the right place to start with. 3. Click the Insert Image button at the top left of the post/page editing area. 1 Page Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch
  • 2. 4. Click the From Computer tab to upload the images for your gallery. 5. Select and upload multiple images at once. 2 Page Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch
  • 3. (Windows users can select non-consecutive images by holding down the CTRL key while clicking the icons; Mac users can do the same with the CMD key. To select consecutive images, hold down the SHIFT key.) Click Open when you’ve finished selecting images. Tip: If you really are traveling around the world, uploading photos from your camera in an Internet café anywhere but Japan or South Korea can be pretty time-consuming. These days, even point-and-shoot cameras boast resolutions of 12 megapixels or more. That’s a 4000 x 3000 pixel image: each JPG file will be 2.5 MB. A set of them will take forever to upload over patchy hotel wi-fi or the satellite connection in that Mexican café. If you don’t plan to print the photos when you get home, go into your camera settings and set your photo size and quality below the maximum. An image size of 1600 or even 1200 pixels on the longest edge is plenty for a website. 6. Wait until WordPress has finished “crunching” the files and click the Save All Changes button at the bottom of the list of images. 3 Page Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch
  • 4. Power Users’ Clinic: Add Titles and Descriptions to Gallery Images For bonus points, after you click “Save all changes”, click “Show” next to each image and fill in each image’s title, alternate text, caption, and description. Then Save all changes again. Giving the images titles that mean something to you helps the search engines find you and it helps screen readers for the visually impaired. And it will help you, too, when you’re going through your media library trying to find a particular photo. 4 Page Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch
  • 5. 7. After you click “Save all changes”, the Gallery tab appears at the top of the Add an Image dialog box. From now on, whenever you click the Add an Image button for that post, you’ll see the Gallery tab between From URL and Media Library. That tab only appears in posts that have had galleries inserted. The number in parentheses after the word “Gallery” shows how many images are in the gallery. 8. Choose your Gallery Settings from the options below the list of images in the gallery. This is where you decide what order to put the pictures in and how many columns your gallery should have. If your gallery is going to appear on a page with a sidebar and you use the standard 150 x 150 pixel thumbnail size, you won’t be able to fit more than three images across. But if you use a full-width page for your galleries, or a smaller thumbnail size, you can have five or six columns of photos. Note: to change the size of your image thumbnails, go to Settings  Media. In addition to the built-in options to sort the images by Menu Order, Date/Time, Title, and Random, you can manually order your images by numbering them in the boxes in the Actions column and clicking “Save all changes” again. The final option is whether to link the thumbnails to the original image file or to the attachment page. If you’ve filled in an image description or want people to be able to submit comments on a particular image, then it’s best to link to the attachment page. Lightbox and slideshow plugins tend to override this option, but some will display the descriptions from the attachment page. 5 Page Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch
  • 6. 9. When you’re happy with your settings, click the Insert gallery button. Once you click the button, a gallery placeholder appears in your post editor window. If you’re using the visual editor, the gallery placeholder looks like this: 6 Page Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch
  • 7. If you’re using the HTML editor, the gallery placeholder looks like this: What you’re looking at is called a gallery shortcode. (A “shortcode” is a command in square brackets that substitutes for HTML or PHP.) If you need to move your gallery around in your post, the easiest way is to switch to the HTML editor and cut and paste that shortcode. 10. If your theme supports post formats, toggle the “Gallery” radio button on. That way your gallery can take advantage of any special design features your theme has for galleries. 7 Page Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch
  • 8. WordPress introduced post formats in 2011 with WordPress 3.1. They’re designed to help display certain kinds of content in special ways, much the way Tumblr does. Older themes may not support post formats, or may support them in a different way. The Coraline theme from Automattic supports Gallery and Aside post formats, but you have to designate categories in the theme options in order to use them. If you’re inserting a gallery in the Coraline theme, be sure to choose the right category. If your theme doesn’t support post formats, don’t worry. The gallery itself will display just fine. The main difference will be in the way the post excerpt appears on the blog index page. 8 Page Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch
  • 9. 11. And now for the last crucial step: publish the post or page. Your gallery post appears as a grid of neatly arranged thumbnails. 9 Page Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch
  • 10. The actual galleries appear much the same in Coraline (above) and Twenty Eleven (below). So What Does the Gallery Post Format Do? If WordPress galleries themselves look the same in themes that support the gallery post format and those that don’t, what does the gallery post format actually do? First, it gives the designer the opportunity to make the rest of the post look different from other kinds of posts—making it a full-width post where a standard post has a sidebar, for instance, or giving it a particular background color. Second, it changes the way the post appears in the blog index (the home page). The themes used for the screenshots above both show post excerpts in the blog index. For a standard post, the excerpt is just a few lines of unformatted text. That wouldn’t work very well for a gallery, so a gallery post excerpt is set up to work a little differently. “Coraline” and “Twenty Eleven” both represent gallery posts with a single thumbnail image and tell you how many images are in the gallery, but the Coraline excerpt has a box around it and a link to “more galleries.” The Twenty Eleven excerpt has a label above it saying “Gallery.” Those differences are design choices made by the theme developers. 10 Page Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch
  • 11. Coraline Gallery Post Excerpt 1 Twenty Eleven Gallery Post Excerpt 1 If galleries are important to you, check out the way a theme handles the gallery post format in the demo before you decide to use it. Sure, you can hack the CSS in the stylesheet or install a plugin to change it, 11 but the better it works in the first place, the better off you are. Page Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch
  • 12. Power Users’ Clinic: Gallery Shortcodes In earlier versions of WordPress, the only way to insert a gallery was with the shortcode [gallery]. Used by itself (you can type it into either the visual editor or the HTML editor), the [gallery] shortcode will display a gallery of all images attached to that post or page. But you can do more, because shortcodes come with options. In fact, the [gallery] shortcode comes with more options than you have when you insert a gallery through the file upload screen. The options associated with the [gallery] shortcode are:  columns: number of columns in the gallery.  id: ID of the post whose images you want to display. It does not have to be the post you’re putting the gallery into. You can find the post ID by hovering over the post title in the All Posts list and looking down into the lower left corner. You’ll see a small popup that says something like “http://your.domain.com/wp-admin/post.php?post=ID&action=edit,” except there will be a number after the “post=” instead of the word “ID”. That’s the post ID number.  size: the image size to use for the thumbnail grid: thumbnail, medium, large, or full. The default is “thumbnail.”  orderby: the criterion for ordering images. The choices are menu_order, date, title, ID, and RAND.  order: ASC (ascending) or DESC (descending).  link: determines whether the thumbnails link to full-size images (file) or attachment pages (attachment).  include: tells the gallery to include specific attachment (image) IDs. You find these by going into the WordPress Media Library and hovering over the image title. A popup appears in the lower left corner of the browser, the same way it did to show you the post ID.  exclude: tells the gallery to exclude specific attachment (image) IDs. You can use either the “include” or the “exclude” option in one shortcode, but not both. So if you wanted to insert a gallery that used a single column of large images, ordered by ID, and including attachments 17, 18, 19, 25, 26, 27, 34, 35, 36 (from three different posts), the shortcode would look like this: [gallery columns="1" size="large" orderby="ID" order="ASC" link="attachment" include="17, 18, 19, 25, 26, 27, 34, 35, 36"] And then there are the really geeky options that probably won’t be of interest to anyone but theme designers:  itemtag: the type of (X)HTML tag used to enclose each item in the gallery. The default is “dl”, which is “definition list.”  icontag: the tag used to enclose each thumbnail image. The default is “dt”, or “definition term.”  captiontag: the tag used to enclose the caption for each thumbnail. The default is “dd” or “definition definition.” 12 A designer might want to change these if definition lists are going to be important in the theme, but Page ordinary people can safely ignore them. Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch