active-technologies.com - Network Computer Services - Web Page Design and Hosting - QuickBooks & Bookkeeping Services            
  • Login

Network & Computer Services

  • Network Maintenance and Computer Repair
  • New Equipment Roll-outs
  • System Upgrade - Lifecycle Management
  • Backup Systems
  • Windows - Linux
  • Servers & Desktops
  • WiFI & Barcode
  • Security - AntiVirus - Malware
  • System Design - Planning - Training
  • Purchase Equipment At Cost Through Us
  • On-site and On-line Service Service



Web Page Design & Optimization

  1. Drive Customers To Your Business
  2. Web Maintenance
  3. Mobile Web Sites
  4. Wordpress Customization
  5. Drupal CMS Customization
  6. Organic Search Engine Optimization (SEO)
  7. Local Search Engine Optimization (SEO)
  8. Website Re-Design and Intranets
  9. Online Shopping Carts & Catalogs
  10. Web Analytics and Reporting

QuickBooks & Bookkeeping Services

  • Install Upgrade Restore Multiuser
  • Point of Sale - Custom Reporting
  • Sales Invoicing Posting Reports
  • Purchases Payables Posting Reports
  • eMail and Security
  • Inventory
  • Payroll
  • Job Cost
  • Custom Reporting

  • Home
  • About Us
  • Projects
  • Legalease
  • Green Policy
  • Recommendations
  • CIM Manufacturing Demo
  • Contact Us

You are here

Home | Open Source

Services

  • What We Do
  • Web Page Design
  • Mobile Web
  • Web Hosting
  • Identity Management
  • Search Optimization
  • Content Manager
  • Computer Repair
  • Network Service
  • Backup System
  • Network Assessment
  • Disaster Recovery
  • Data Recovery
  • Technology Planning
  • Technology Partner
  • AntiVirus

Navigation

  • Chaos Tools AJAX Demo
  • Forums
  • Recent content

Drupal 7 Image Gallery Tutorial

Submitted by gma on Sun, 10/06/2013 - 05:40
(Bryan Braun @ bryanbraun.com) This tutorial describes step-by-step how to build a basic thumbnail based image gallery, based on Views. The result would look something like this:

(you can see a live demo at bryanbraun.com/portfolio)

The instruction is designed for Drupal site builders or admins with a basic understanding of Views and Fields. It assumes you are running Drupal 7.x and Views 3.x.

Step 1: Preparation

Modules

A views image gallery uses several modules. You can download and install all of these modules (and the modules they require) at /admin/modules/install.

Enable the following contributed modules...

  • Views - all purpose "reports" generator for Drupal
  • Chaos Tools - a tools library required by Views

...as well as these core modules:

  • Field
  • Image
  • File

Step 2: Content Configuration

Step 2a: Create Content Types

We need to create a new content type for images we put in our gallery.

  1. Browse to /admin/structure/types and create a new content type called Gallery Image.
  2. Add a field to the content type called My Gallery Image. This will allow you to upload an image when creating content.
  3. Optional: remove any unnecessary fields like the body field. This content type only needs to be able to upload an image.

Note: Feel free to use use whatever names you like for these fields and content types

Step 2b: Upload some photos as dummy content

  1. Browse to /node/add and add content using the Gallery Image content type we just created
  2. Use the "My Gallery Image" field to upload one of the photos that you want in your gallery.
  3. Set any other settings as necessary and save the content.
  4. Repeat the steps above until you have loaded up 3 - 5 photos for dummy content

Step 2c: Create an image style for your thumbnail

  1. Go to /admin/config/media/image-styles and click Add Style to add a style named gallery_thumbnail.
  2. Add an effect of "scale and crop" (several other effects may work for you, so feel free to play with these settings)
  3. Set the width and height to be 150 pixels
  4. Update the effect

It ought to look something like this:

Step 3: Build the View

Step 3a: Create a Gallery View

To display images in a Gallery we will create a view that displays every piece of content you have published under the Gallery Image content type.

  1. Go to /admin/structure/views and click Add new view
  2. For the view name, call it "Photo Gallery"
  3. Set the view to Show Content of type Gallery Image sorted by Unsorted
  4. Check the box to Create a block (and uncheck the Create a page box if necessary)
  5. Name the block title "Photo Gallery"
  6. Set the display format to Grid of fields
  7. Set to 10 Items per page, check to use a pager and click save and exit

Step 3b: Views Configuration

We'll have created a view with a block display and now we need to ensure that all our settings are correct.

First, locate the view in your list of views and click the link to edit it. Make sure your settings match those listed below:

  • Display name: 'Photo Gallery'
  • Title
    - Title: 'Photo Gallery'
  • Format:
    - Style: 'Grid'; Number of columns: '5'; Horizontal
    - Show: 'Fields'
  • Fields
    - Content: 'My Gallery Image'; Formatter: 'Image'; Image style: 'gallery_thumbnail'; Link image to: 'content'
  • Filter Criteria:
    - Content: 'Published (Yes)'
    - Content: 'Published or admin'

This criteria ensures that a photo won't appear in the gallery unless the photo has been properly uploaded and publish as part of your Gallery Image content type. The resulting set up will look something like this (though yours ought to say "Content: My Gallery Image").

Save the view.

Step 4: Test your setup

Now scroll to the bottom of your view configuration page and check the Auto preview checkbox. If your gallery is being properly displayed in the region below, then you did it! Just save the view and it will be created as a block (remember, that's the option we chose in step 3a, #4). Now you just navigate to the blocks page (Admin Bar > Structure > Blocks) and drop the block into a region to see how the view looks on your site.

Step 5: What's next?

You can do a lot to customize your gallery. Here are some options:

  • Change the pager settings for your view (determines the default number of thumbnails in your gallery)
  • Style the view output for your view using CSS (I like CSS Injector, since it's quick and easy for beginners)
  • Add a Page display to the view, so it exists on its own page (learn more about displays on drupal.org)
  • Change Image styles to change thumbnail size or image scaling/cropping in the thumbnail
  • Uploading more images
  • Allow rating of images (using modules like Voting API, or Fivestar)

Other Resources

  • Views Gallery module by KarenS -- A Drupal 6 module that uses this methodology with hardcoded content types.

Note: I wrote this tutorial as part of a Drupalcon Denver documentation sprint and I originally saved it in the views issue queue (which I'm pretty certain was the wrong place to put it). Anyways, I'm reposting it here so I could clean it up, include images, add links, and make it more findable. I certainly could have used this when I was figuring this out. Cheers!

‹ Drupal 7 Galleriffic Step by Step Instructions for Views up Drupal 7 Juicebox HTML5 Responsive Image Galleries Module ›
  • Printer-friendly version
  • Log in to post comments
  • 1555 reads

News

  • News

References

  • Thunderbird
  • Outlook
  • Excel
  • Word
  • Access
  • General
  • Open Source
  • Mobile
  • Security
  • ShareWare
  • Site map
  • SEO News/Tips
  • Social Media

Search form

Copyright © 2004-2019 Active Technologies, LLC
Network Computer and Web Services provider
(Powered by active-technologies.com)

Search engine optimization