- Drupal Multimedia
- Aaron Winborn
- 2598字
- 2021-05-28 17:41:51
Multiple Images
We'll start with a fairly involved requirement. Our client, Mr. Bob's Gadgets and Gizmos, wants to create a gallery of items for sale. The gallery will have a thumbnail that shows up on product listing pages. He also wants a larger thumbnail to display in a Featured Gadget block. Finally, each product will have the option to display several images on its page.
We review our options and first note that we don't want to use Image nodes for our product pages; each product requires specific information with more complex requirements than just a simple node. Besides, Mr. Bob is already using the Image node type and its Image Gallery module for posting pictures of his pet Pekingese.
We might just use Image Attach (also part of the Image package) for this situation: At the time of this writing, we can't attach multiple images. However, there is some code in the module to create a framework for this, which is in the to-do list. So by the time you read this, that module might just be the perfect fit.
However, even after seeing if Mr. Bob would like to sponsor that feature for the module, he clarifies that he wants the image that shows up in the Featured Gadget block to be a different image than what shows up on the teasers. So our needs are more complex than what that solution would allow anyway.
ImageField: Flexible, Powerful, Useful
So we'll look at CCK and then learn about its related ImageField. CCK will allow us to define new fields to store information and ImageField will attach images to nodes as specific fields.
This seems to be the perfect combination, although we'll also need to make use of the ImageCache and Views modules to polish it off. Additionally, ImageField requires the FileField to be installed and enabled (from http://drupal.org/project/filefield). We'll be making a heavy use of FileField in later chapters, by the way. Finally, we also need to install the Token module from http://drupal.org/project/token.
If you haven't already, enable both the CCK and ImageField modules by browsing to Administer | Site building | Modules (at /admin/build/modules). You'll also need to enable the FileField, Token, and FileField Tokens modules.
We're now going to create a new content type for our products. We'll need to store the following information for each product: Product Name, Description, Teaser Thumbnail, Featured Gadget Image, and Gadget Images.
Browse to Administer | Content management | Content types | Add content type (at /admin/content/types/add) and enter the name of our new type, Gadget, next to both Name and Type. On this screen, Name refers to what editors will see when entering content of this type and Type is how it will be known internally to Drupal. Thus, though they may often be the same, Type may not contain spaces or other special characters, resulting in type names such as news_article and slideshow_image.
The Description will display on the Create content page (at /node/add). After entering a brief description, we'll rename Title to Product Name, and Body to Description. Before submitting this page, make sure the other settings are what we need: whether to automatically promote a node to the front page, enabling/disabling comments, and so on. Leave Attach Images disabled since we'll be setting up our custom image fields rather than using Image Attach.
After clicking Save content type, our new Gadget node type will appear on the Content types administration page. We could actually begin creating new gadgets, although we wouldn't have images yet.
So from the resulting screen at Administer | Content management | Content types (dmin/content/types), we'll click on the edit link in the Gadget operations.
There are now new menu items available on the tabs for this page. We need to click on the Add field tab, which will bring us to /admin/content/node-types/gadget/add_field. If we had already defined fields on other types, those existing fields would appear in a drop-down, allowing us to redefine fields for multiple types.
For instance, we could have a Node Reference field that could refer to our gadgets that could be reused for Blog entries, News releases, and Article content types. On the other hand, we might want a particular Image Field that would be required with only one image allowed, and another that is not required but allows for multiple images. In that case, we wouldn't reuse that field.
Our first field will be the Teaser Thumbnail. Firstly, enter teaser_thumbnail for the Field name, which will set the machine-readable name as field_teaser_thumbnail. This is how the field is known to Drupal and we'll use that when referring to the field in code.
Now, enter Teaser Thumbnail for the human-readable Label. Next, select Image for the Field type and click the Continue button:
You'll then see a similar screen, with the exception of a new selection drop-down, Widget type. Press Continue again.
The next settings for our widget influence the display and storage of the field. We determine what kind and size of images to accept, where to store them, and other related options, as we'll see.
The top section of these settings is specific to this content type. We may share this field with other content types, and override them as and when needed.
First we see the Help text, which is displayed to editors when uploading images. Next are the Permitted upload file extensions. The default of jpg jpeg png gif is suitable in most cases. We could easily leave the Maximum and Minimum resolution for Images, as we'll resize them dynamically later. In fact, we could set both to our desired 80x80 and be done with it in this case. However, we're thinking of the future when we may want our teasers to be of a larger size. So, we'll set the minimum to 80x80 and leave the maximum value alone:
Opening the File size restrictions section, we see a Maximum upload size per file and per node. This can be invaluable when allowing user submitted images to counteract possible bloat on your file system. However, since these images will only be uploaded by our trusted editors, we'll leave the settings alone for now:
The File path will create a subdirectory of the /files folder. This can be useful for organizing photos, when examining them with the FTP to give a recognizable path for the photo URL and to reduce filename collisions. Note that when photos of the same filename are uploaded, the conflicting filename will be appended with a unique number, so this is usually not a problem. Additionally, we can use tokens here, which will dynamically be replaced with a specific value as a file is uploaded. For instance, [uid] would be replaced with the author's unique identifying number.
For this example we will set the File path to images/teaser_thumbnail/[user], which will create folders on the fly for newly uploaded images such as images/teaser_thumbnail/aaron or images/teaser_thumbnail/bob. This will make it easier to manage our file assets later by automatically sorting images in the file system for the editors who will be uploading them:
Again, we can use tokens for our Default Title and ALT text fields, which appear on our image tool tips, and for web text readers. We'll leave this alone as we can change that on an individual basis when needed:
Finally, in our field's Global settings, we can set whether a field is Required, the allowed Number of values, and whether or not to Always list files. These settings will affect this particular image field, regardless of what content type uses it, as opposed to the previous settings that may be overridden on a case-by-case basis.
When required, attempting to submit content without uploading our thumbnail image will result in a validation error that will require the editor to upload an image before continuing.
If we changed the Number of values setting, we would be allowed to upload more than one image to a single node. This could be up to 10, or unlimited, according to the number selected.
If we check the Always list files box, then images will always be displayed with the node. Otherwise, the editor uploading them gets to determine that for each individual node:
Leaving the other settings alone, let's set our Teaser Thumbnail to Required and click Save field settings, which will bring us to the Gadget's Manage fields tab.
Create a new field called Gadget Images by again clicking on Add field. As our last field, this will be an Image. But in addition to this, we'll also allow up to four values. Leave all the Widget settings as they are (unless we want to add some help text or group our field, and/or to set the File path to a custom value). Again, check the Always list files box.
Finally, we'll create one more image field named Featured Gadget Image (which will be known to the computer as field_featured_gadget_image). We'll leave the Required box unchecked and the Number of values at one, but check the Always list files box. We won't feature just any gadget as the thumbnail, we'll only want to display a single image here.
Managing Fields
On a content type's Manage fields page, we'll see a good overview of our fields. Here we can change the placement of our fields ensuring that, for instance, an image is displayed before the body or fields are grouped together. To change the order of fields, simply click and drag the handle to the left of a field to move it to another location:
The Manage fields screen may be used to navigate to and edit existing fields by clicking on the Configure link next to a field, or from the tabs above. You can also remove fields from this screen as well, with the Remove link.
If you have the Fieldgroup module active on your site, you may group fields together as well, creating a new group with the Add group tab from this page. A group created in this way will become an option from the Group column of this page, or from the Display in group option on a field's configuration page.
Press the Save button to save the placement changes.
Let's go ahead and create a gadget by browsing to Create content and clicking on the Gadget type (/node/add/gadget).
The following screenshot is shown in two parts.
Part one:
Part two:
When entering or editing content with image fields, you will have a Browse button to select a file to upload. Then, you may Preview or Submit the post as usual or optionally Upload an individual image before continuing. As seen in this screenshot, once you've uploaded an image, you will have the opportunity to add a Title or Alt tag (if provided by the field definition). Additionally, if you wish to upload more than one image in a field that provides for multiple values, then you will need to press the Upload button first.
When we examine our new gadget, we will unfortunately not see any photos. They are listed (assuming we checked the List box earlier) with links to the actual photos. However, in nearly every circumstance, this is not acceptable:
Though the default display for Image Fields is unsuitable for our purposes, the CCK makes it easy for us to customize the content display. We can determine whether to display an image or not on a per-field basis. We'll do this now by browsing to the Gadget | edit | Display fields tab (at /admin/content/ node-type/gadget/display):
We will hide the labels for the Featured Gadget Image and the Teaser Thumbnail by selecting <Hidden>. For this example, we'll keep the label for the multiple Gadget Images above the display.
All images but the Teaser Thumbnail will be hidden when displayed as a Teaser, and only Gadget Images will be displayed on the Full node page mode. We do this by setting them to Image linked to node and Image respectively, and selecting <Hidden> for the other image fields.
After submitting this page, we can go back to the front page (assuming we promote our gadgets to the front page) and see the teaser formatted properly, and likewise for our full page:
Block Views
We've hinted at a new block for our Featured Gadget Image. That block will feature a random image that's been marked sticky by our editors. Let's create that now. We'll need to make sure our Views module is active, which was covered in the first chapter. Assuming the module has been enabled, go to Administer | Site building | Views (at /admin/build/views) and click the Add tab (which brings you, appropriately enough, to /admin/build/views/add).
Name this view featured_gadget. This is the machine name, and may not have spaces or punctuation. You may also enter a brief description for the administration page to help differentiate the new view from others. You might also want to give it a tag such as Gadgets:
After clicking Next, you will be at the Defaults for the view. We'll just add a Block display using the drop-down selector and pressing Add display on the left, and edit the details there. Adding options here will also affect the defaults, if we add other displays to the view later.
Give the block a Title of Featured Gadget and enter 1 for Items to display.
Fields are used only with List and Table views. They determine what will be displayed for nodes selected for the view, rather than depending only on a teaser or full page view.
Now we'll add a couple of fields by pressing the + button to the right of Fields. Add our image by selecting Image: field_featured_gadget_image from the resulting drop-down and pressing the Add button:
After pressing Add, you'll have a chance to select the Format of the field: Select Image linked to node and press Update:
After that submits, do the same for Node: Title by checking Link this field to its node and blanking out its Label before updating.
Now, Filters. We use filters to determine which nodes to display in our block. Add two filters, Node: Sticky and Node: Type by pressing the + button next to Filters and checking those two boxes. For the Value of Node: Type, select Gadget; this will ensure that only gadgets are chosen.
Lastly, select Global: Random for the Sort Criteria.
After saving these changes, you will have a new block on the Blocks administration page (Administer | Site building | Blocks | List at /admin/build/block/list). Select the Right sidebar region for the block and press Save blocks.
Since we are only featuring nodes that have been marked as Sticky, we need to enter a new gadget with that setting. Enter a new gadget at Create content | Create Gadget (/node/add/gadget), and check the Sticky at top of lists box in the Publishing options field set.
After submitting this (and a couple of more for testing purposes), a random gadget will be featured.
- 中文版Photoshop CS6完全使用手冊（超值版）
- 數碼攝影后期零基礎入門教程
- Vue.js框架與Web前端開發從入門到精通
- Photoshop后期強：數碼攝影后期完全寶典
- 零基礎玩轉AI繪畫
- AutoCAD Civil 3D 2018 場地設計實例教程
- Microsoft SharePoint 2010 Administration Cookbook
- Blender 3D 2.49 Architecture, Buidlings, and Scenery
- AIGC輔助數據分析與挖掘：基于ChatGPT的方法與實踐
- NetLogo多主體建模入門
- 中文版After Effects CC 2018 動漫、影視特效后期合成秘技
- Building Websites with PHP/Nuke
- Photoshop移動UI設計從入門到精通
- SolidWorks 2020中文版從入門到精通
- Apache CXF Web Service Development