- Drupal Multimedia
- Aaron Winborn
- 2730字
- 2021-05-28 17:41:50
Creating a Gallery
Our first fictitious example is to create an image gallery for a local artists' co-operative. We have just agreed to set up a showcase site for Seaside Treasures, a shop that showcases and sells works created by local artists. We want to create something that looks nice, is easy for computer-illiterate artists to use, and will be quick to set up (since we're volunteering our time).
Being new to Drupal, having maybe set up a blog or two, we know there are options for image handling. But we also know that those options are not currently built into the core, and that means a visit to the contributed module repository (found at http://drupal.org/project/Modules). Taking a quick look, we're excited by the possibilities offered for displaying images, but overwhelmed by the sheer number of contributed modules listed (over 450 modules in the category of Content Display and over 150 in Media at the time of this writing).
What to choose? Acidfree Albums? Gallery? The aptly named Image? The long answer is that there are many options available and ultimately you'll need to explore them to find the best solutions to carry in your Drupal toolbox.
To get you started, however, we're going to cut through all that and show how you can use what Drupalers have used for years to get the job done.
For our first example, here is a screenshot of what we're aiming for. This is a run-of-the-mill gallery with a listing of thumbnails that, when clicked, will show a page with a larger image. Once you have your basic site configured, setting this up will take only a few minutes, leaving you with the time to work on that cool project you've been putting off:

Image Module
To reproduce this gallery, we're going to use the Image module available at http://drupal.org/project/image. In conjunction with this we'll also install the Image Gallery module, which is contributed in the same download.
After you've enabled both modules, you will have a new content type available for your site that is automatically named Image. You can add an image now if you'd like to, visiting Create content | Image (at /node/add/image
) and uploading the image. You'll have a screen like the following:

Note
The first time you visit an image node submission page (or visit the image settings page), you'll likely get a message saying something like this: The directory sites/example.com/files/images has been created. The directory sites/example.com/files/images/temp has been created. The first directory will be used to store images created for image nodes and derived images. The temp directory will be used to temporarily store images during the upload process, and will be automatically emptied of orphaned temporary images periodically during cron sweeps. (Once configured, the cron script will run automatically every hour or so. You can find more information at http://drupal.org/cron.)
This couldn't be simpler. All you need to do is upload your images using the browse button, enter a title, and optionally write a brief description in the body text area. Preview it if you want, or just hit submit and you will have a new image on your site. (You won't actually see the Image Galleries drop-down depicted here until you've set up at least one gallery. We'll deal with that next.)
Assuming you haven't changed any defaults, your new images will also appear on the front page, although probably not formatted as well as they would be in the gallery, once we've set that up.
If you set up one or more galleries for your images, you'll discover that Drupal automatically sorts your images into categories so that you can set up sections for Ceramics, Paintings, Bead Work, and Wood Carvings.
To do this, go to Administer | Content management | Image galleries (at /admin/content/image
). Here you will find a list of any galleries you have set up for the site, which will be empty at first. Click on the Add gallery tab and enter a name for your new gallery (which in our case will be Arts & Crafts).
After adding at least one, you may nest new image galleries below others by selecting the appropriate gallery from the parent drop-down selector. You'll also be able to control the order the galleries appear in using the Weight selector: Galleries with a lower number will appear before those with a higher number, and alphabetically if they share the same weight. For instance, you might have Basket Weaving, Candles, and Dryer Lint Sculpture as categories under the Folk Art gallery, which in turn is below the Arts & Crafts.
Now you can go back to your original image, click on the Edit tab, select one of your new galleries from the drop-down list, and press the Submit button. Then browse to Administer | Site building | Menus (at/admin/build/menu
). Under the Navigation menu, you will probably see Image galleries (disabled). You will need to enable this menu item for it to show up in your navigation menu by clicking enable at the end of that row and pressing Submit on the following screen.
After doing this, you will be able to see your new gallery by browsing to Image galleries (at image). You will also notice that the breadcrumb changes for your content, so it will list the gallery at the top of the page (with something like Home | Image galleries | Arts & Crafts | Mobiles).
When you visit the gallery page, you will also note that any description you entered for the gallery will be listed there with the thumbnail of the most recent image entered in that gallery to represent it.
The Image Gallery module is actually an extension of the Taxonomy module included in the Drupal core. Taxonomy is one of the many features that allow Drupal to stand out, giving it a way to powerfully control the flow of content through a site.
We won't delve too deeply into the wonderful world of Drupal's taxonomy with its ability to create complex and rich nested, multiple hierarchal vocabularies. It will suffice to say that you can harness the power of taxonomy and folksonomy to organize your site in a logical and useful way that makes it easy for you, your users, and even Google to find exactly what you or they are looking for in seconds.
Gallery categories, although they use the same engine as the rest of Drupal taxonomy, are generally configured and accessed from a different location in the menu tree. This is to allow the gallery to work automatically without any special configuration. Technically, the Image Gallery creates a unique taxonomy vocabulary, and each gallery is a term beneath it. You can see this by browsing to Administer | Content management | Taxonomy (at /admin/content/taxonomy
). (In Drupal 5, Taxonomy was sometimes referred to as Categories such as in the menu path.)
You've probably noticed by now that your image is presented in two different sizes, both of which may be different than the original uploaded size. This happens automatically with help from the Image module.
You'll also see that various sizes are available when viewing an image node page: By default, you'll see a link under the image for Thumbnail. If you click on this, you will see the image displayed in a new size and a link to another size labeled Preview, which is the size an image is normally displayed in when visiting its node page.
Note
The Original size is available only to users who have the view original images access setting, so you won't see this link unless you add that setting to a role. You can see all access settings for your site by visiting Administer | User management | Permissions (at /admin/user/permissions
). Note that you may also wish to set up a new role for editors who might need the create image content access setting. User roles are created at Administer | User management | Roles (/admin/user/roles) and once created, will appear at the Permissions settings page. You may assign new roles to users by editing the user's account and checking the new roles. You can see all users on the site by visiting Administer | User management | Users (at/admin/user/user
), where you will see links to edit their accounts.
When you first set up the Image module, two sizes are set up for your site: Thumbnail (at 100x100 pixels), and Preview (at a maximum of 640x640 pixels). The Thumbnail size is displayed when the image is shown as a teaser such as on the front page and on the gallery pages, and the Preview size is shown on the full page.
Though it may be convenient when first setting up a site, for many sites these defaults will probably not be adequate. You may change the sizes your images are displayed in by going to Administer | Site Configuration | Images | Files and sizes (at /admin/settings/image
). On this page, you will see text fields for Width, Height, and Link in the Image sizes fieldset. Also, each size may be set to Scale or Scale and crop, which is the second option for creating exact-sized images. (There are settings available for the Default image path and Maximum upload size on the page as well.)

You may change the settings for your Original, Thumbnail, and Preview sizes here. If you have values for both width and height, then the resulting image will be resized to a maximum width by height (in pixels). If you enter only one value, then it will be scaled down exactly to that width or height with the other value changing appropriately to keep the same aspect ratio.
You may add more image sizes here as well. By default, only the Thumbnail and Preview sizes will be shown automatically on the site. But the other sizes will also be made available as links on the image node page. However, you will have access to those new sizes when theming your site. We will cover this later in the book.
The Link settings will configure the links shown at the bottom of the image node page. If set to Same Window and clicked on, the link will display the node page with the new size. If set to New Window, then the link will pop up as an image displayed in a new window. (As a technical note for innovative developers, these link elements will have CSS class elements applied, which could be useful when combined with jQuery to create pop ups with automatically-resized windows.)
Note
Note that if you make a change to a size setting, any images you created before making the change will still have the old size. They will be recreated as needed before getting displayed, and you will receive a reminder. The first user to see a new size may receive a message stating something like, Cool Pix thumbnail derivative image had a timestamp (Sun, 07/13/2008 - 17:09) that predates the last changes to the image size settings (Sun, 07/13/2008 - 17:44). The derivatives will be rebuilt to regenerate it. To force the system to resize the image files, you can also do this manually, by visiting the image node or gallery page that displays its thumbnail, by editing an image and checking the Rebuild derivative images box, or by going to Administer | Content management | Content (at /admin/content/node
), selecting the images you wish to resize, and selecting Rebuild image thumbnails from the Update options drop-down.
Image Gallery Settings
You may change some basic gallery settings at Administer | Site configuration | Images | Image gallery (/admin/settings/image/image_gallery
). These include how many images to display on a gallery page (by default 6), whether to display the Posted by information on those pages, and the Image display sort order.

Gallery Alternatives
As noted earlier, there are alternatives for using the Image Gallery module to display images. These options range from using add-ons that build onto Image's functionality, to full-blown packages that use their own system, to building your own gallery from scratch with existing tools.
Acidfree comes with more features than Image Gallery, and in fact builds on top of the Image module. It is designed to be simple to set up and use. However, it has not yet been upgraded for Drupal 6.
Gallery uses a library external to Drupal called Gallery 2, which has a thriving community of its own and offers features not seen in other options. This requires a third-party installation from http://gallery.menalto.com/. However, this will usually require learning another theming system apart from Drupal, if you do not want one of the themes provided out-of-the-box. Also, the images are not as well integrated into Drupal or supported by other modules.
You can also build your own gallery using a combination of modules. You might start by changing the theme of Image Gallery. Or you may create your own type of image node using a combination of the CCK and the ImageField modules, and wrapping it all up with Views. All of these techniques will be covered in the later chapters.
There are certainly other options available. If none of the options presented work best for your site, you would be served well by searching Drupal's forums and groups, and studying the contributed modules available to the community. The truly inspired ones are always welcome to join an existing project, helping to extend and improve the media-handling capabilities of Drupal.
A Brief Note about Image Toolkits
The Image module (as do other modules) uses a PHP Image toolkit to manipulate images such as for resizing and cropping. By default, the GD2 toolkit will be used when you install the Image module. This toolkit is compiled by default with PHP, and so is supported by most host providers.
You may wish to use ImageMagick instead, which must be compiled for PHP on your server. ImageMagick supports more image types such as GIF and PNG files. It also allows advanced image manipulation functions such as rotation and gradient creation, although at the time of this writing most of that is not being harnessed well by Drupal.
After doing this, you will need to visit Administer | Site configuration | Image toolkit (at /admin/settings/image-toolkit
) and select the new toolkit. Assuming everything goes well, you will see the Version and Copyright information for ImageMagick. (If not, then your server may not have ImageMagick installed and you will either need to contact your host or compile it yourself, or switch back to the default GD2 toolkit.) You can learn more about ImageMagick at http://www.imagemagick.org, and by searching for it at Drupal.org. Once you have done this, you may also want to install the ImageMagick Advanced Options module that is bundled with the Image module:

There are other image toolkits available as well. The Acidfree Albums module uses another toolkit called Imagick (which makes use of the ImageMagick libraries, but does not fork its own process). This toolkit allows lossless JPEG rotation, which Acidfree uses when available.
Finally, there are other toolkits available to PHP that offer better, more, and/or different functionalities. These include Netpbm, ImLib2, and FreeImage. Netpbm is comprehensive, and supports conversion between image types. ImLib2 is faster than ImageMagick, but does not support as many file types. FreeImage is a binary library accessible from other languages besides PHP and is available across many operating systems.
Drupal 7 will make the support for various Image toolkits easier, moving the functionalities from include files to modules. Once this is in place, it will be easier to natively support more image-handling functions and allow contributed modules to offer more of the features editors would like to see on their sites.
Note
If your server does not have any PHP image toolkit installed, you will see the error: No image toolkit is currently enabled. Without one the image module will not be able to resize your images. In this case, first go to Administer | Site configuration | Image toolkit (at /admin/settings/image-toolkit
). Ideally, your server will at the very least have the built-in GD2 toolkit installed. If not, you will need to ask your hosting company to recompile PHP with the GD2 toolkit enabled, or move to another hosting company.
- Rhino 6.0中文版入門、精通與實戰
- 平面設計綜合教程:Photoshop+Illustrator+CorelDRAW +InDesign(微課版)
- Illustrator CC 2018中文版入門與提高
- Web 2.0 Solutions with Oracle WebCenter 11g
- NHibernate 3.0 Cookbook
- After Effects影視特效立體化教程:After Effects 2021(微課版)
- 中文版Maya 2016實用教程
- AutoCAD 2020中文版入門、精通與實戰
- 3D打印輕松實踐:從材料應用到三維建模
- 中文版Photoshop CC基礎教程
- 科技繪圖/科研論文圖/論文配圖設計與創作自學手冊:科研動畫篇
- 跨境電商:速賣通搜索排名規則解析與SEO技術
- 中文版Maya 2016基礎培訓教程
- 剪映專業版:PC端短視頻制作(全彩慕課版)
- Illustrator CS6平面設計案例教程(微課版)