You are here

Easy gallery image option for your content editors in Drupal 7

Module pre-requisites

Download and enable the following modules (or at least the first one) for this tutorial.

Create new admin vocab

  • Create a new vocabulary called 'Admin options'
  • This is where we'll store option content editors can check to affect how images (and long-term other fields) are treated/displayed on the node
  • For now, at least add the term 'Create an image grid from attached images' to this vocabulary

Add new admin fields

  • Make sure the content type you are implementing this for has an Image-type field already added, and that it's one that will accept more than a single value (if you want a grid of images, you gotta give your editors the ability to add more than one ;-))
    • This will work best if you have the "Enable Title field" checkbox checked in the configuration of the Image field.
  • Add a new field called 'Admin options', which is a Term reference with Check boxes/radio buttons as the widget type
    • Make sure you point it to the newly created vocabulary
    • I would set the 'Number of values' the user can select to 'Unlimited' even though we'll only have one value to begin with.  That'll let you be all setup properly to expand as you implement more admin options
  • If you have the Field group module on your site, you can even move this new field and your other admin-type fields into a new fieldset called 'Admin' as I have.
  • Now promptly go to the 'Manage Display' tab and ensure that the new admin term reference is set to be "Hidden" in your node view.  We don't need visitors seeing what admin options have been checked - this is strictly for content editors to easily provide cool behavior and effects from their admin side of things.

Great!  Now our editors can choose to make the attached images into a grid, but simply having that checkbox in there and selecting it doesn't have any action attached yet.  Let's actually implement the functionality:

How it will work

  • A user will create a new node (in my case a 'blog' type node), and, if they want to have a gallery under the content, will upload their images
  • Then, instead of placing these uploaded images somewhere within the content, they will simply check the new 'create gallery from images' admin checkbox
  • A block view, which is placed under the node content automatically checks whether that box is checked for each nodes, and displays all attached images in a table grid
    • When the box is not checked, it simply displays nothing

Create the 'image grid' view

  • Create a new view called 'Image grid' which displays content of type 'Blog post' (in my case) -> if you even want to limit the types of content this will apply to
  • Uncheck 'Create a page' and check 'Create a block'
    • we will only need to create a block view (so we can place it under or on the side of the main content)
  • Make sure we're listing 'fields' rather than 'titles'
  • Add a Filter to your view
    • You want this to apply only to those nodes where the field "Content: Admin options" contain the option "Create an image grid from attached images"
  • Customize the fields displayed
    • Remove the default "Content: Title" that is added by default
    • Add "Content: Image" (or whatever your images field is called)
      • Disable a label from appearing with the field
      • Choose the "Lightbox2: medium -> original" formatter
        • After you've done the testing on this, if you want the images in the grid to be smaller, come back here and choose "Lightbox2: thumbnail -> original" to see if that suits you better
      • Enable the display of multiple values (images in this case), but change the default separator to be a space (" ") rather than the default comma (",").  Images separated by commas will look rather strange! ;-)
    • Remove any default Sort criteria
  • Finally, let's create a Contextual filter - we want this block view to take its images from the particular node it is appearing on
    • Add a brand new contextual filter to your view, based on the "Content: nid" field
    • Select to "Provide a default value" for the nid in the event that it isn't passed on
    • Select to use the ID from the current node's URL (don't worry - this will still work if you have a node URL alias or redirect :-))
  • That's it - let's save our view!

Customize the block

  • After creating that block view, if we now go to our block admin page at admin/structure/block, we should find a brand new block called "View: Image grid" (If you titled your view "Image grid" like I did!).  Find that block and hit "Configure" next to it
  • Set the title of the block to your liking
    • I've set mine to "<none>" because I want the image grid to appear immediately under the text without any headings, however, you can have "Related images" or any other type of title that you'd like.  You can, of course, also set the title in your view - I'm simply choosing not to display a title.
  • Place this block wherever you'd like for it to show the images on the node pages that apply
    • I've set my block to display in the "Content: After" region, because my theme has that option.
    • You may even want to display the images attached to a node in a sidebar or above the image -> set it here
  • Save the block!

Test it

  • Let's create a new node with a bunch of uploaded images and the new admin checkbox check - then see if the images will really pop up as a grid in the correct place
  • Go to /node/add and select the content type (or one of them) that you have implemented the above functionality for
  • Add any fields you have, and make sure to upload several images
    • If you did, indeed, enable the Title field, make sure to fill those in for your images -> you'll see that the Lightbox2 module uses the image title fields very well
  • Check the new admin checkbox and Save
  • The minute you hit 'Save' that page should be published with the grid of images popping up right under or beside it (whatever you chose).  Here is my demo image grid page.
  • Click on any one of the images in my demo page above (or your own newly working sample), and you'll see how beautifully the Lightbox2 module handles interactively displaying them into a larger format, showing their titles (as you entered them when creating the node) and stringing them together in a slideshow format!
  • Now your content editors - without knowing anything about views, blocks or contexts, can create as many gallery grids as they want without needing your help!

It's all about empowering the content creator and editors - so go implement this neat little functionality!

Alternative Resources

There are so many gallery-type modules out there.  Let me know what you're using, if you prefer to go with a ready-made module.  Here are a couple that are currently popular

 

Share

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.