Drupal-lovers

Who love to Drupal

30+ Essential Drupal Modules

Posted by drupallovers on April 19, 2012

  The Big Three

“The big three” are important enough that they deserve a category of their own. Most drupal modules worth using have integrated with one of these three. Their importance simply can’t be stressed enough.

  • Content Construction Kit (CCK) – Part of drupal 7; still a contrib in drupal 6. Allows you to define new content types (e.g. blog entry, event, or employee record…) and add “fields” to them. A field could be plain text, an image, a flash video, or whatever. You can also adjust how these fields display in the live view. No drupal install should be without this module.
  • Views – Broadly speaking, this module empowers non programmers to build dynamic streams of content displaying any number of fields. The content may come from nodes (a.k.a. content types and fields), users, system log entries, etc. You can display this stream in any number of formats including RSS feeds, tables, or just the vanilla view for a content type. You can also create pages or blocks — its very tightly interwoven with drupal. Nearly every drupal module worth using is integrated with this module. Extremely powerful when used in combination with CCK.
  • Panels

    I believe Panels + CCK & Views is a hint at what drupal will look like 3 years into the future. I had to change my pants after the first time I witnessed it. At a very simple level, you could think of it as a layout manager. Create a 1,2,3 column layout. Or a 3 column layout with a full width footer and header, and plop pieces of content in them — say a view, a block, or a node. That description, however does not do it justice. Since version 3, its positioned itself as a replacement for drupal core’s clunky block system. It can now override a node page, and can be used to place content all over the place. It also introduced a concept of contexts, selections rules, and relationships. These are concepts that deserve a series of blog posts, but lets just say its solving some of the weirdest, mind numbing, bug creating problems found in advanced websites. Ironically, I used to hate this module, but after version 3 I will defend its awesomeness to the death!

For Administration Sanity

  • Admin Menu – Quick Dropdown menu to all admin areas. Makes any setting only a click away, instead of 3 to 6 clicks away.
  • RootCandy – A theme specially designed for administration. Drupal 7 comes with an admin theme included, but this is still highly recommended in drupal 6.

 

Content and SEO

  • Pathauto – Automatically create human readable URLS from tokens. A token is a piece of data from content, say the author’s username, or the content’s title. So if you set up a blog entry to use tokens like [author-name]/[title] then a blog entry by “Phil Withersppon” titled “my great day” will be rewritten example.com/phil-witherspoon/my-great-day.
  • Printer, email, and PDF Versions – There are still people out there who prefer to print out content to read later. This module does just that, and also lets them send your content via email.
  • NodeWords – A very poorly named module that’s great at letting you edit meta tags.
  • Page Title – Lets you set an alternative title for the <title></title> tags and for the <h1></h1> tags on a node.
  • Global Redirect – Enforces numerous well thought out SEO rules, for example since I don’t use this module you could access my content at “http://www.nicklewis.org/node/1062&#8221;. This module however will search for the alias and 301 to the proper URL http://www.nicklewis.org/40-essential-drupal-6-modules. (thanks Jeff!)
  • Path Redirect – Simple idea: make it easy to redirect from one path to another. Does a good job at it.
  • Taxonomy manager – Makes large additions, or changes to taxonomy really really easy and painless.
  • Node Import – Made it shockingly easy to import 2000 csv rows, tie rows to CCK fields (or locations), and even will file it under the right taxonomy terms in hierarchy so long as you plan ahead.

Navigation

  • Menu Block – Lets you split menus into separate blocks based on depth. Say you have a top level menu link “Articles” with sub menu links “Politics”, “Technology”, “lifestyle”. This block would let you show the sub menus in the right sidebar, and the top level “article” as tabs in the header.
  • Taxonomy Menu – Automatically generate menu items for categories. Handles syncing between taxonomy and menus, and is ready to be used in conjunction with views or panels.
  • Custom Breadcrumbs – Set up custom breadcrumb paths for content so that every page doesn’t just have a breadcrumb back to “home”. (note: i’ve used menu_trails a lot too.)
  • Nice Menus – Drop down menus (for people who are into that kind of thing).

WYSIWYG Editors + Image Uploading

  • WYSIWYG API – The standard integration module.
  • CKEditor – Currently my favorite WYSIWYG editor. WYSIWYG API only supports CKEditor on its dev version (at the time of this writing). For the time being, I use this module instead of WYSIWYG api. Regardless, the rest of the world probably uses WYSIWYG api.
  • IMCE – File browser / image inclusion for WYSIWYG editors. CKeditor is integrated out of the box, WYSIWYG API implementations require a bridge module.

Video and Image Handling

  • Filefield – Base CCK file upload field. Useful on its own, but also required by other essential modules.
  • ImageAPI, ImageCache, Imagefield – These three work together. ImageAPI handles low level integration with server side image processing (e.g ImageMagick). ImageCache allows you to set up presets for automatic resizing, cropping, and a host of other operations you’ll probably never need to use. ImageField then provides an upload field to a piece of content, which you can use imagecache presets to resize in the display. Imagefield is very well integrated with Views and CCK. The paintings on the right show a bunch of images automatically resized using this technique.
  • Lightbox2 – If you’ve set up your imagefields, lightbox2 lets you add another layer of options. For example, display image resized at 300px wide on the page, but blow it up to full size when clicked. Like Imagefield, lightbox 2 is well integrated with Views and CCK. Very powerful combination.
  • Embedded Media Field – Embed video and audio files from dozens of third party providers ranging from youtube, to services you’ve probably never heard of.

User Profile, Ratings & Notifications

  • Content Profile – The core profile module sort of sucks. This turns profiles into nodes allowing you all the options of views and CCK.
  • Voting API + Fivestar – The standard voting widget of Drupal.
  • Notifications – Provides the ability to send emails when someone comments, or replies to a comment. Has a host of other features.
  • Captcha + Recaptcha – Standard Antispam system. In use on this very site.

Stuff Marketers Will Love

  • Webform – We all know visitors love filling out forms. This module lets your marketing team create custom forms, and collect whatever info they want.
  • Google Analytics – Simple integration of drupal with google Analytics.
  • Service Links – Easy “share this” links for content. Supports digg, facebook, delicous and a bunch of other social web 2.0 services.

Events and Calendars

  • Date – CCK field for handling dates, and date ranges.
  • Calendar – Integrated and controlled by views.

Location and Mapping

  • Location – Standard API for collecting addresses and lat/long. Integrated with Views and CCK. Somewhat difficult to use, but its a somewhat difficult problem it solves.
  • Gmap – Display locations in GMap.

Ecommerce

For Developers

  • Devel – Offers an enormous amount of information for developers, including: theme template variables, and overrides, browsable data structures, and datasets for performance-tuning. Just the debug function dsm(); makes it worth the download.
  • Backup & Migrate — Greatly eases the pain of moving changes from your local development environment to the live server and vice versa.
  • Drush – Its actually not really module, but a “Swiss army knife” set of tools that are run from a command line. One example command is “drush dl views”: running it will automatically download the latest version of views and place it in the right drupal folder. 1 second command instead of a 1 minute process of downloading from drupal, uploading via FTP. There’s many other commands that are just as useful.

Conlusion

Lists like this can be outdated within six months. Always be on the look out for better and better modules.

Advertisements

Posted in Drupal, Modules | Leave a Comment »

Custom Search Module for Drupal

Posted by drupallovers on March 30, 2012

The Drupal core provides a Search module which is great for many sites. However, it doesn’t provide some of the more sophisticated features that some sites need. The Custom Search module is a good alternative if you want more control over what gets searched, who gets to search, and what results you see.

The Custom Search module adds layers of control and sophistication to the core search module. It’s easy to install and understand, and will give you more control over the search functions on your site. It also integrates with other search modules and APIs.

The core search function and the Custom Search module

tutuploadsmedia_1332978557735.png

The basic elements of the core search module are:

  • A block for front-end display. There is very little configuration available for this block. I’ve named this one “Core Search Block” to make it easy to distinguish from the customized one We’ll be creating.
  • Advanced search is available on search results page. If a user clicks Advanced Search on the results page, a form opens up so you can refine your search. (When using the Garland Template).

This gives you a sophisticated search, but little control over how it’s implemented throughout the site. A good way to expand on this is to add the Custom Search Module. Here’s a summary of the added options.

Basic options:

  • Select which content type(s) to search,
  • Select which specific module search to use (node, help, user or any module that implements search),
  • advanced criteria

Advanced options:

  • change the default search box label,
  • add a default text in the search box,
  • add advanced search criteria,
  • change the default submit button text,
  • use an image instead of the submit button,
  • change the order of all the elements,
  • include some elements in a popup block,
  • add a filter to the results page,
  • show/hide basic and/or advanced search in the results page,
  • show/hide meta data in the results page,
  • multiple search paths

Step 1. Download and install the module

Step 2. Enable the module and its sub-modules

tutuploadsmedia_1332974776069.png

There are three included sub-modules:

  • Custom Search Taxonomy: taxonomy options for the search block.
  • Custom Search Blocks: provides additional search blocks, with different settings.
  • Custom Search Internationalization.

Step 3. Set Permissions for users and administrators

tutuploadsmedia_1332974833304.png
  • The confirmation message will have a link to the permissions. Click it to go directly to the permission settings.
tutuploadsmedia_1332975091365.png
  • Set user and admin permissions for two modules. I wanted everyone to be able to search so I gave anonymous users and authenticated users permissions by checking the boxes
  • You have four sets of permissions to set.
    • Custom Search
      • Admin
      • User
    • Custom Search Blocks
      • Admin
      • User

Step 4. Configure the module

tutuploadsmedia_1332975243521.png
  • Return to the Modules page and click Configure. You can also get to the configuration screen by going to Configure > Custom Search
tutuploadsmedia_1332975841984.png
  • When you land on the configuration page the selected tab will be highlighted. You will be going through all the tabs to complete the full configuration. So when you complete the first page, choose another tab and continue
  • I’m not going to go through every single configuration step. The choices are easy. If you have a need to create refined searches, they will make sense to you. If not, trial and error is the best way to get familiar with them. In this demo I’m going to enable everything.
  • There is one section that may need a little explanation – the Search Blocks tab:
tutuploadsmedia_1332981680985.png
  • Select the number of blocks. One of the great things about this module is that every block can have it’s own configuration settings. Suppose you wanted a block on the home page that searched the entire site, but not the forum. On the forum page you want a block that only searches the forum. In that case you would create two blocks. If you wanted anonymous users to be able to search just some forum topics, and registered users to have more option, you would create 3 blocks, and control which one shows by who’s logged in.
  • I’m just going to create one for this demo. Once you decide on this, add blocks to your site.
  • Be sure to save before moving on.

Step 5. Add blocks to your site

tutuploadsmedia_1332982028297.png
  • Go to Structure > Blocks.

Step 6. Assign blocks to regions

tutuploadsmedia_1332976654551.png
  • The custom search blocks you created will be visible and numbered.
  • Choose the regions for the blocks.
tutuploadsmedia_1332982219714.png
  • The new block is added.
  • The original block created by the core is still there. It’s default label is Search Form. I can’t think of a reason why you would want both of them on the same page unless you’re writing a tutorial, so you can remove the original if you want.
  • Be sure to Save Blocks before you try any configuration.

Step 7. Customize the blocks from the front end

tutuploadsmedia_1332982785885.png

Here are both blocks, the original core search block and the one I just added. Compare the look of the Core one with the first image. You’ll see that some custom features have been added. The first picture just shows an entry field and a search button. Now we can search tags and forums. This is because the new module makes those capabilities available to all the modules.

It also makes customization very simple. When you are viewing the module from the front end, mouse over the title and you will see an icon that looks like a cog from a gear.

tutuploadsmedia_1332983164241.png

This will give you access to the configuration for this particular module. It makes it much simpler if you are going to have multiple search boxes with different types of search. You can define each one while you are on it’s page. It saves time and prevents mistakes.

Step 8. Configure Visibility

tutuploadsmedia_1332983345582.png
  • Clicking Configure will allow you to change the visibility and normal block function.
tutuploadsmedia_1332977044916.png
  • Clicking Custom Search configuration will give you access to define the search box itself.

Step 9. Configure each block to have custom features

tutuploadsmedia_1332983579145.png

From here you can configure what’s include and what type of search you want.

Result

tutuploadsmedia_1332983702278.png

Above you can see what the original search block looks like after I’ve configured some additional elements to show. This will allow you to present a highly customized search experience to your the public and authorized users.

Posted in Drupal, Drupal7, Modules | Tagged: | Leave a Comment »

Multiple Categories with the Drupal Contact Module

Posted by drupallovers on March 30, 2012

The Drupal Contact module is often replaced by the Webform module. However, it can be useful in some situations. For example, image that you have different departments and you want each of them to get a different contact form on your Drupal website. If you’re willing to keep it simple, you can do everything you need with the core Contact module and won’t have to install anything else.

It all depends on knowing how to create categories and blocks.

Step 1. Make sure the Contact module is enabled

tutuploadstutuploadsStep_1._Make_sure_the_Contact_module_is_enabled.png
  1. Click Modules
  2. Click Save configuration.
  3. Click Configure next to Contact.

Step 2. Add and edit categories.

tutuploadstutuploadsStep_2._Add_and_edit_categories..png

Click Add category to add a new one.

There is a default category called Website feedback that you can use as well, but we are showing you how to add extra ones. You can edit the default category later if you need to.

Step 3. Configure the category

tutuploadstutuploadsStep_3._Configure_the_category..png
  1. Give the category a name.
  2. Specify the Recipients
  3. Create an Auto-reply message.
  4. Set Selected. Yes means it will be the default contact form. Since this is a new category, you probably want this to be No. You can only have one default.*
  5. Be sure to click the Save button.

*Selected: When a visitor clicks on the link to the contact form, the categories will show in a drop down list. Whichever one is chosen with a “Yes” will show automatically If you want your visitor to be forced to choose a category before submitting the form, make all of these fields “No”

Continue repeating the process until you have all the categories you want. A “category” can be a different department, a group or individual.

Step 4. Enable the menu link

tutuploadstutuploadsStep_4._Enable_the_menu_link..png

Jump to the Menus administration page by clicking the blue link in the instruction paragraph. Alternatively you can get their via the admin menu and clicking Structure then Menus.

tutuploadstutuploadsAlternate_path_to_Menus.png

Step 5. List the links

tutuploadstutuploadsStep5._List_the_links.png

A Contact menu item (disabled by default) is added to the Navigation menu, which you can modify on the Menus administration page. Click list links next to Navigation.

Step 6. Enable the link

tutuploadstutuploadsStep_6._Enable_the_link.png

This menu link will go directly to the site-wide contact form. You will see a Contact menu item that is disabled. You can use this one as a guide for creating other menu links.

Step 7. Configure the link

tutuploadstutuploadsStep_7._Configure_the_link.png
  1. Edit the link title if needed.
  2. Enable the link so it appears on the menu.
  3. Choose the parent link if you want it to be different from the default “Navigation”.

Step 8. Add a block with instructions for the user

tutuploadstutuploadsStep_8._Add_a_block_with_instructions_for_the_user.png

Go to Structure > Blocks.

Step 9. Add a block

tutuploadstutuploadsStep_9._Add_a_block..png

Step 10. Add the block information

tutuploadstutuploadsStep_10._Add_the_block_information..png
  1. Enter a Block Description. This will not be seen by the public.
  2. Enter a Block Title. This will be seen by the public.
  3. Write your instructions. This will also be visible to the public,

Scroll down the page.

Step 11. Set the visibility settings by assigning it to the Contacts page

tutuploadstutuploadsStep_11._Set_the_visibility_settings_by_assigning_it_to_t.png
  1. Choose “Only listed pages”. The only page we want to have these instructions is the Contact page.
  2. Write “contact” in the text field.
  3. Save the block.

Specify pages by using their paths. Enter one path per line. The ‘*’ character is a wild card. Example paths are blog for the blog page and blog/* for every personal blog.is the front page.

There are other parameters and settings on this page, but for the purpose of this tutorial we only need the basics.

Step 12. Enable the block

tutuploadstutuploadsStep_12._Enable_the_block.png

You will be returned to the Blocks page. You will find the block you added in the Disabled list with the title you created. To enable it, choose the position from the drop down box.

tutuploadstutuploadsmedia_1318376672850.png

Choose Help.

This box lists all of the regions available on the template you are using. On the Bartik template, the Help region is right where we want it. You may have a different idea or location on your website.

Step 13. Final configuration then save.

tutuploadstutuploadsStep_13._Final_configuration_then_save..png

As soon as you choose the region, the block title will now be visible at the top of the page that shows the enabled modules. The will be grouped by region, so this one will be under Help.

Remember to Save – scroll to the bottom of the page

tutuploadstutuploadsmedia_1318376971177.png

No changes will be saved until you click Save blocks.

Your result

tutuploadstutuploadsYour_result.png

If you followed all these steps you will have a contact form that looks something like this.

  1. There is a link on the menu to the form.
  2. The instructions are in the Help Region in a block you added.
  3. The correct email address shows. (this will change to the right one when the category is selected).
  4. There is a drop down list with the categories you created.

Posted in Drupal, Drupal7, Modules | Tagged: , | Leave a Comment »

Getting Started With Drupal’s Webform Module

Posted by drupallovers on March 30, 2012

Webform is the module for making forms and collecting information from users in Drupal.

After a submission, you can send users a thank-you email as well as sending a notification to administrators. Results can be exported into Excel or other spreadsheet applications. Webform also provides some basic statistical review and has an extensive API for expanding its features.

If you need to build a lot of customized, one-off forms, Webform is a more suitable solution than creating content types and using the CCK or Field modules.

Download the Webform Module

tutuploadsStep_1._Download_the_Webform_Module.png

Go to this url http://drupal.org/project/webform, and download the Webform Module.

There are some additional modules that add some functionality and make some operations easier. You can download the optional modules as well. To keep things simple, we’ll use the basic module and show you how to create a simple survey of registered users.

tutuploadsmedia_1317090861314.png

Download the correct version. They may have changed since we wrote this, so be sure to check.

Install the Webform Module

tutuploadsStep_2._Install_the_Webform_Module.png

Enable the module

tutuploadsEnable_the_module.png

Go to the Modules page and scroll down to Webform and click the check box. Click Save configuration.

Access the form fields

tutuploadsAccess_the_form_fields.png

Go to Structure > Content types

tutuploadsmedia_1317093423174.png

Scroll down to Webform and look the right for the links to edit and manage fields and the display.

tutuploadsmedia_1317094660865.png

Click Edit

If you are familiar with CCK in Drupal 6, or Fields, which is now part of D7 core, you will see a familiar interface for adding and managing new fields.

tutuploadsmedia_1317095178845.png

This is not the place where you will be creating forms. Editing here is exactly the same as editing Fields in Content Types, which is a way to make fields available to this content type. From here you can edit fields, manage existing fields, the display and the comment functions by clicking on the appropriate tabs. But creating the actual form is done by adding content in the same way you would add an article.

You won’t need to do much here but review all your choices and see if there is anything you feel you must change. The default values will work for the purposes of our demonstration. After you create your first form and understand the module you might want to revisit the configuration.

Now that the module is installed and the configuration is checked, you can begin building your survey form.

Create your first webform by adding it as content

tutuploadsStep_3._Create_your_first_webform_by_adding_it_as_content.png

Go to Content > Add Content > Webform

Don’t get confused over Poll vs Webform. We are creating a form with various types of questions, not taking a Poll. Poll is another content type that is similar, but restricted to multiple selection fields and gathering the statistics on the responses. Webform is a form submission module, and collects the actual responses and stores them in a table for you to review. You can collect almost any type of data using Webform.

Create the basic form details

tutuploadsCreate_the_basic_entry_form_and_configure_the_same_as_any.png

Give it a title and make the decisions on all basic options. Save this with the save button at the bottom of the page.

Add form components

tutuploadsStep_4._Start_adding_form_components.png

Now you will see the controls for creating and editing the rest of the form elements. Start adding Form components on the WEBFORM tab.

tutuploadsStep_5._Make_a_pre-filled_username_field_using_a_Token.png

Give the component a label, choose textfield and then click Add.

We’re surveying registered users, so we are going to automatically fill in their username. A name is basic text field, but we want our registered users to show up on the textfield, so we’re going to make use of Tokens. Using Tokens is just an optional feature.

tutuploadsmedia_1317148972326.png

Enter the token %username in the Default value field.

This will pull the username from the data base and fill it in automatically.

If you don’t see the TOKEN VALUES, you probably don’t have the Token module installed. You only need Token if you want to fill in the default values taken from the data base. If this is going to be a blank field that the user will fill in when they visit the page, you can just leave the Default value blank. I used Token here to illustrate the possibilities available to you.

If you need the Token module you can download it here http://drupal.org/project/token

Scroll down the rest of the page and make any configuration selections you need then click Save Component at the very bottom of the page.

Create a “Select” field

tutuploadsStep_6._Create_your_first_Select_field.png

Fill in a new label and choose the Select options type from the drop down. Click Add and complete the options on the next screen

Create the list of options

tutuploadsStep_7._Create_the_list_of_options_for_the_user_to_choose.png

Go to Options and create Key Value Pairs. These pairs consist of a machine readable key and a plain language value separated by a “|” – This character is called a “pipe” and you can find it by holding shift while pressing the backslash key “\” key on most keyboards.

Key-value pairs MUST be specified as “safe_key|Some readable option”. Use of only alphanumeric characters and underscores is recommended in keys. One option per line.

Save the Component.

Repeat this step for the flavor of the jelly and type of peanut butter.

tutuploads-_Default_choice_is_radio_buttons.png

When you are creating lists, the default type is radio buttons. If you want check boxes or a listbox the choices are farther down on the page. You can also set the field as mandatory or optional. If you click the “Multiple” check box at the top, the list will appear as check boxes. If you choose “Listbox” under DISPLAY you will have a drop down box. Selecting “Multiple” and “Listbox” will allow users to make multiple selections from a dropdown box.

When you create the Jelly type, add Other as a choice. Then add a text field so people can write in their suggestions.

Add a Text field

tutuploadsStep_8._Add_a_Text_field.png

You can add a text field, or a textarea. A text field is for short entries like names. A textarea will be a large area for entering more extensive written responses.

Other field types you might want to add for your purposes are an E-Mail field or Date Field. You can choose thees types from the dropdown “Type” box.

tutuploadsmedia_1317154370995.png

You can choose other field types from the Type drop down.

Add a preset field type

tutuploads-_Add_a_preset_field_type_-_an_added_feature_of_Webform.png

There is a convenience feature you may want to use. You can create pre-built option lists and add them to your form. The module comes with several default lists. Add one for States if you want to see how this looks on your form. Label it State and then choose the Select Options type and when you get to the next screen, make your selection.

tutuploadsmedia_1317151406971.png

Choose US States from the drop down.

Check your form

tutuploadsStep_9._Check_your_form_and_fine-tune_the_view..png

At this point your form will look similar to this. You can change the locations of the descriptions by clicking the WEBFORM tab and editing each item and making different configuration selections. Once you have the form ordered the way you like it and all the questions and fields correct. Go back to the WEBFORM tab EMAIL tab and set the EMAIL options.

You can use drag and drop to move form elements to different positions.

Configure the E-Mail options.

tutuploadsStep_10.__Configure_the_E-Mail_options..png

Go back to the WEBFORM tab and look for the E-mails sub-tab. Fill in an address and click Add.

Set the email address if you want to receive an email when the form is submitted. You can add multiples.

tutuploadsmedia_1317152290926.png

There are lots of choices to make. Be sure you check every one of them so they are correct for your form. Be sure to save the changes.

Configure the Form Settings

tutuploadsStep_11._Configure_the_Form_Settings.png

From the WEBFORM tab Click the Form Settings sub-tab at the top of the page. Check and modify settings as needed. Save your changes.

Now you can publish your form exactly like you would publish any other content item on your site. After you’ve had a chance to collect submissions, you will see the results when you are logged in as a user with the correct permissions.

tutuploadsmedia_1317152553413.png

Click Content > Find Content and select the form from the content list and you can find the results tab. This will allow you to see the collection of data you have as well as give you some simple analysis.

Posted in Drupal, Drupal6, Drupal7, Modules | Tagged: , , | Leave a Comment »

How to Use the SEO Checklist for Drupal

Posted by drupallovers on March 30, 2012

The SEO Checklist for Drupal is a very useful module to help with your SEO efforts.

The SEO Checklist module doesn’t perform any SEO functions, but it will guide you through the process of optimizing your site and it will recommend best-of-breed modules. After installation the checklist will take you through a list of recommended changes made by the experts at Volacci.

Step 1. Before We Start: Planning

The SEO Checklist is going to recommend a lot of potential modules for you to install. To help clarify things, I’ve divided those modules up into separate lists. You should start with the Base Modules list and then move on down to the others.

  1. Base Modules
  2. Optional Base Modules
  3. Essential Working Modules.
  4. Anti-Spam Modules. There are several possibilities but you only need to choose one.
  5. Nice if you want them, but not really needed

A note of caution before we begin: not all of these modules have stable releases for Drupal 7. Please use of all these on a test site before using them on a live site.

Step 2. Before We Start: Register for Webmaster Tools

Before you start you are going to want to do is register for Google, Yahoo and Bing accounts and sign up for their webmaster tools. You will need the verification files, tracking codes and other identifiers provided by these services.

  1. Save the verification files to your hard disk.
  2. Write down all account numbers.
  3. Have your username and password to each account handy.

Every SEO program I’ve tested has needed this information, so if you’re serious about SEO, start with signing up for the webmaster tools.

Step 3: Before We Start: The Quickest Workflow for the SEO Checklist

The SEO Checklist will recommend a lot of modules for you to install, so here is one way to approach the installation:

tutuploadstutuploadsHow_to_install_modules_-_the_quickest_work_flow_model_for.png

Go to Modules > Install new module. You’re going to be doing a lot of this. Install the first module on the list.

tutuploadstutuploadsmedia_1321333405188.png

Browse for a downloaded module, choose it, then click Install.

tutuploadstutuploadsmedia_1321333566069.png

Click Enable newly added modules.

tutuploadstutuploadsmedia_1321333672310.png

Normally what you would do is find the module you just installed and click the check box in the Enabled column, scroll to the bottom of the page and click Save to save the changes. Then you would see if there is a configuration link and fill in the details.

But you’ve got a lot of these to do so you might want to consolidate the tasks.

My actual work flow:

  1. Installed all the modules
  2. Enabled them in small groups
  3. Ran a status report to check for errors
  4. Corrected any errors
  5. Got everything working before I configured them.

What I actually did to make this quicker was skip the Enable step, and go back to the top of the page and click Install new module again and installed another one. I kept installing until i was done.

Then I returned to the page and enabled them in bulk. If you do this, don’t try to enable all of them at the same time. It stresses the system and you’ll get errors. Enable a group and come back several times until they are all enabled.

Go to Reports > Status Report and check for errors. Just do the minimum amount of work you have to do to get rid of any errors.

Many of these modules are going to need configuration. I’ll go back and consider the configuration as I go through the SEO Checklist. That’s what it’s for. It’s going to take a lot of time and study if you’re not already an SEO wizard to figure out the perfect configuration for everything.

Now we can click run cron manually and check for errors

tutuploadstutuploadsRun_Cron_and_check_for_errors.png

Just running cron will clear up some errors. You might have to take action on others.

tutuploadstutuploadsmedia_1321310485116.png

Be sure to read the cautions too, and take action. The Status report will give you a good idea on what you need to do to fix things.

Step 4. Install the base modules

Now let’s get started with the installation. These modules are used by many other modules, and you may already have them installed. If not, you should install them now. They aren’t really needed for SEO, but as you go through the checklist and try to install subsequent modules, you’ll have to back up and install these too, so you might as well start here.

Step 5: Install the Optional base modules

The modules below are strictly optional and not absolutely essential to SEO. You can always skip these and come back to them if you don’t think you need them now. But if you are going to want them, your life will be easier if you install them at this stage, rather than wait until they appear on the checklist.

HTML Purifier    
HTML Purifier is a standards-compliant HTML filter library. HTML Purifier will not only remove all malicious code (better known as XSS) with a thoroughly audited, secure yet permissive white list, it will also make sure your documents are standards compliant, something only achievable with a comprehensive knowledge of W3C’s specifications.

This is a standalone component that strips improper HTML from entries. You need to download the entire compressed file and get special instructions on installation. It’s an improvement on the filtered html core module, and isn’t 100% necessary to optimization. It just depends on what level of optimization you wish to achieve.

il18n    – Internationalization
If you are only developing in English you can skip this. This is a collection of modules to extend Drupal core multilingual capabilities and be able to build real life multilingual sites. It has some requirements and it has some recommended add ons. If you are going to have a multi-national site be sure to read this:
http://drupal.org/project/i18n

Step 6. Install the Essential Working Modules

Now we come to the modules that actually do the optimizatin. If you’ve installed Ctools, Token and Context the rest should go pretty fast. The best and quickest workflow is to download, install and enable them, then configure them later as you go through the SEO Checklist.

Step 7. Choose and Install an Anti-spam Module

You only need one of these. If may already have one installed. If not, you can choose any of these based on your preference.

Step 8. Nice if you want them, but not really needed

tutuploadstutuploadsmedia_1321336813817.png

Now let’s get started on the module itself.

Step 9. Access the SEO Checklist

tutuploadstutuploadsStep_7._Access_the_SEO_Checklist.png

Go to Configuration in the menu bar. Now that everything is installed it’s time to start working the checklist.

tutuploadstutuploadsmedia_1321299685397.png

Scroll down the page to the Search and Metadata section and click on SEO Checklist.

tutuploadstutuploadsmedia_1321299708932.png

Move through the tabs on the left and check a box and Click Enable if you haven’t enabled them yet.

The picture above shows what the list looks like before I installed the Token and Page Title modules. The download link actually takes you to the download page so you could download the module now, and then enable it. If you do it this way you will be working all day. Try the mass installation first.

tutuploadstutuploadsmedia_1321300756856.png

After I installed the Page Title Module you can see there is now a Configure link. If everything has been installed you will only need to work on configuration as you go through the list.

Each time you complete a task, click the check mark, then scroll to the bottom of the page and click the Save button.
If you don’t Save, it won’t record your your check marks, and you won’t have a record of what you did.

tutuploadstutuploadsmedia_1321300799012.png

Keep going through all the tabs. Click the check boxes as you complete a task. Remember to save.

Result

tutuploadstutuploadsResult_19dc86638c3e31aaffc6e9bd6a8e1fe9.png

When you’re all done you’ll have a list of all the completed tasks, time and dates, who did the work, and quick access to the configuration so you can make changes.

This module will:

  • Help you keep track of what needs to be done.
  • Check for installed modules give you some basic information on them.
  • Provide a list of things that need to go on your to-do list.
  • Time/date stamp each item and record who completed it.

Posted in Drupal7, SEO | Tagged: , , | 8 Comments »

A Introduction to the Drupal 7 Media Module

Posted by drupallovers on March 30, 2012

The Media Module is one of the most hyped new modules for Drupal 7. It is often talked about as the best option for handling images, video and audio files in Drupal 7.

However, available information about the Media Module is long on 90 minute conference presentations and short on quick, practical guides. So, in this tutorial we’re going to get right to the point. We’re going show you how to set up the Media Module, what it does and how to use it to add YouTube videos to your content. Let’s go ….

Install the Media Module

Head over to http://drupal.org/project/media and download the Media Module. You will also need the latest version of the CTools module from http://drupal.org/project/ctools.

tutuploadsmedia_1329323257702.png

Understand the Media Module

Go to Structure > Content types > click Manage fields next to a content type.

You’ll see that a new field option called “Multimedia asset” is now available.

tutuploadstutuploadsmedia_1329321089490.png

This field type will allow you to upload a variety of file types. Click Save and you can decide that those file types are:

tutuploadstutuploadsmedia_1329321123983.png

If you create a “Multimedia asset” field for you content, the image below shows what it will look like when you go to add content.

tutuploadstutuploadsmedia_1329321160323.png

Click on “Select media” and you can upload new files.

tutuploadstutuploadsmedia_1329321181758.png

Most importantly, you can also browse a Library of all the files that you’ve uploaded.

tutuploadstutuploadsmedia_1329321446684.png

This Library feature is the real reason for using Media. As explained on the Media FAQ page: http://groups.drupal.org/node/19746

“The Media module provides an engine that can be used to manage files and metadata. Individual Media module plugins, as well as the modules they integrate with, will handle media display.”

So the only thing this field can do at the moment is upload files to the library. If you want to actually show the files, you’ll need to rely on extra modules. Let’s see how that works.

Go to Structure > Content types > click Manage fields next to a content type. If you choose to add a File field you’ll now have a Media file selector option.

tutuploadstutuploadsmedia_1329321575868.png

If you choose to add a Image field you’ll now have a Media file selector option.

tutuploadstutuploadsmedia_1329321599641.png

Here’s what the Image field will look like when you go to add content.

tutuploadstutuploadsmedia_1329321692781.png

You’ll be able to browse your new media library and insert an image just as you would do normally.

tutuploadstutuploadsmedia_1329322313974.png

Adding Video to Content via the Media Module

Adding external videos to the Media module relies on the Embedded Media Field module: http://drupal.org/project/emfield.

That module allows you to hook into all sorts of external sites, provided you have the appropriate module. In this example, we’ll use YouTube so install this module as well: http://drupal.org/project/media_youtube.

Install and enable both of those modules.

tutuploadsmedia_1329324509632.png

Go to Structure > Content types and add a Multimedia asset field.

tutuploadsmedia_1329324555689.png

As you choose the settings, make sure to check both the Video and youtube boxes.

tutuploadsmedia_1329324583650.png

Save that new field.

There is one important thing you must now do to make sure that the videos display. Click on Manage Display at the top of the page.

tutuploadsmedia_1329328094802.png

Normally settings for the video field would be available but in this case I had to click Save before they appeared. Then you can click the cog on the right-hand side, next to the video field.

tutuploadsmedia_1329327802623.png

Set the File view mode to Small, Large or Original and click Update.

tutuploadsmedia_1329328239375.png

Click Save so that your changes aren’t lost.

Now you can go to Add content and use the new video field.

tutuploadsmedia_1329324699175.png

Once you’ve inserted the YouTube URL and clicked Submit, you should see a video thumbnail as in the image below.

tutuploadsmedia_1329324715341.png

Save the content and your video will be showing on the page.

tutuploadsmedia_1329328419096.png

YouTube is a simple and popular example. If you want to use other sources for video or audio, head to http://drupal.org/project/emfield and you’ll see a list of all the options and the modules that they require.

 

A note of caution: Media is under heavy development. There isn’t yet a stable version of Media. As of mid-February, there is a Release Candidate 3 but not yet a stable version.

Posted in Drupal7, Modules | 9 Comments »

An Introduction to Drupal’s Display Suite(DS)

Posted by drupallovers on March 30, 2012

One of the rites of passage for beginner Drupal users is to learn Panels. It’s a useful tool for laying out pages and redesigning content pages without any code knowledge.

However, not everyone is a fan. Panels is sometimes criticized for being hard to use and for having performance issues.

In this tutorial we’re going to introduce you to a powerful alternative: Display Suite. We’re going to show you several ways in which it can make designing your content fun and pain-free.

Why Display Suite?

We’re going to use Movies as our example. In the image below, we created a Movies content type and added several fields. We added a a Movie Poster, Director, Stars and the Length of the movie.

tutuploadsmedia_1330890697146.png

So far, so good. However, the vertical layout seen above is ugly. In contrast, the image below is Titanic as seen on IMDB.com. That site has a two column layout that makes the content much more attractive.

The goal of Display Suite is to allow us to move from the layout above to the layout below.

tutuploadsmedia_1330890712547.png

Getting Started with Display Suite

To start working with Display Suite, you just need two modules:

  1. Display Suite: http://drupal.org/project/ds
  2. Chaos Tools Suite: http://drupal.org/project/ctools

Download and install both modules. Make sure to enable all of the Chaos Tools Suite modules that you are able to in order to get as the full benefit from Display Suite.

Go to Structure > Display suite so to see the options available. We’re going to start by clicking Layout.

tutuploadsmedia_1330895877454.png

You’ll now see a list of all the things that you can redesign with Display Suite. You can create new layouts for Comments, Nodes, Taxonomy terms and User pages.

Get started by clicking on the content type you want to redesign.

tutuploadsmedia_1330895943731.png

You’ll now see all of your fields. This screen can also be accessed by clicking Manage Display when you’re working with a particular content type:

tutuploadsmedia_1330896164042.png

You’ll now see your normal Manage Display option as in the image below:

tutuploadsmedia_1330891154417.png

The extra power of Display Suite can be seen at the bottom of the page. Click Layout for movies in default and you’ll see some layout options:

tutuploadsmedia_1330896210138.png

In this example I chose Two column stacked and then clicked Save.

The Ajax-based drag-and-drop wasn’t working for me, but I was able to use the Region dropdown to place each of the fields into different parts of the page:

tutuploadsmedia_1330896342969.png

When it was done, I had a layout that appeared close to IMDB. The Movie Poster was on the left and the other information was on the right:

tutuploadsmedia_1330896717669.png

One note of caution here: the are several view options available in the top-right corner. Make sure that you are redesigning the layout for Full content if you want to control the normal content pages.

tutuploadsmedia_1330891389687.png

If you’ve created your layout once, it is easy to re-use it for others by using the Clone layout option.

tutuploadsmedia_1330891407022.png

The end result can be seen below. I was able to divide my content into two columns:

tutuploadsmedia_1330896687265.png

If you need to get more sophisticated with your layouts, you have two options:

  1. You can add Panels to your site and use the Custom layout feature to add more options.
  2. You can use template files to change how existing layouts work. In the image below, I’ve highlighted how Display Suite helps with this.
tutuploadsmedia_1330891566431.png

View Modes

View modes is a very useful Display Suite feature that makes working with Views easier and more flexible.

Starting by going to Structure > Display Suite > View Modes > Add a view mode.

We’re going to create a new View Mode called Sidebar which will add a layout for Nodes in our Sidebar. Go ahead and choose the settings below.

tutuploadsmedia_1330891976272.png

Now you can go to Structure > Display Suite > Layout > Manage display and enable your new view mode for the content type you’re working with.

tutuploadsmedia_1330892001911.png

Click Save and it will appear as an option in the top-right hand corner:

tutuploadsmedia_1330892058711.png

Go ahead and set up your design the sidebar content. Choose the layout from the bottom of the page and then add your fields. Click Save when you’re done.

If you haven’t done so yet, go ahead and install Views http://drupal.org/project/views and create a View. Once your View is ready, click Fields under the Format label.

tutuploadsmedia_1330892322902.png

Usually you will have only Content and Fields as options but this time Display Suite will also be an option.

tutuploadsmedia_1330892355190.png

Choose Display Suite and click Apply (all displays). Then choose your new Sidebar View Mode.

tutuploadsmedia_1330892386484.png

The image below shows how my block turned out, using the Sidebar View Mode that I created. This View Mode can now be reused across as many Views and Blocks as you wish. You can make one update from inside Display Suite and automatically update all of those Views and Blocks.

tutuploadsmedia_1330892858898.png

Styles for Regions

The final feature we’re going to look at is Display Suite’s Styles for Regions feature. To start using it, go to Structure > Display suite > Styles.

I’m going to be subtle. I’m going to create a style for one of the my content regions called Big Ugly Border:

tutuploadsmedia_1330894672739.png

When I go back to my Manage display page, it’s possible to apply that new style to any of the regions.

tutuploadsmedia_1330894652173.png

With some CSS added to the theme file, we can target that region accurately. Here’s the CSS:

tutuploadsmedia_1330894691242.png

And here is the big, ugly border that resulted:

tutuploadsmedia_1330894727159.png

Summary

We have wanted to recommend Display Suite for over year. It is a far more user-friendly alternative to Panels for many layout option. Panels will still be a better option for designing individual pages such as your homepage or an important landing page. However for working with content types, we’re now recommending Display Suite, particularly to beginners. Mediacurrent have a good blog post on when and why using Panels still makes sense.

One note of caution: we have held off from recommending Display Suite until now because bugs were still being worked out. The Fields feature still contained too bugs many for us to recommend yet, but the rest of the Display Suite core worked perfectly during testing.

Posted in Drupal7, Modules, Theme | Tagged: , , , | 1 Comment »

Using the Views Slideshow Module in Drupal 7

Posted by drupallovers on March 30, 2012

Slideshows are one of the most popular things that people want on their website and the Views Slideshow Module is the most popular way to create slideshows in Drupal.

So, it’s no surprise that Views Slideshow is one of the most popular Drupal modules.

Creating a Views Slideshow isn’t too difficult, but there are a quite a few steps to go through. If you’re a beginner, this will be a complete installation guide.

In this tutoirial we’re going to build a slideshow that will show rotatings testimonials in a block on our site.

Step 1. Install the necessary modules and files

tutuploadsmedia_1331155648284.png
To start, you’re going to need the following 5 or 6 modules to use Views Slideshow. Install and enable all of them.

You’ll also need to install jQuery which will make the slideshow work.

  • Be sure the Libraries Module is installed.
  • You need to install the jQuery cycle .js file.The process is a little different than a module installation. Start by saving the file from here: http://malsup.com/jquery/cycle. Click the download link on the site and it will open the actual file. Save the file to your computer.
  • Login to access your Drupal site files and browse to the /sites/all/ folder. Create a directory here called /libraries/.
  • Now create another folder inside /libraries/ called /jquery.cycle/. The full path to this folder will be /sites/all/libraries/jquery.cycle/.
  • Copy or upload the file jquery.cycle.all.js to the same folder. The full path will be /sites/all/libraries/jquery.cycle/jquerycycle.all.js.

Step 2. Create an image style for the thumbnails

tutuploadsmedia_1331163031317.png
  • Go to Configuration > Image styles > Add style.
  • After you click Add style you will be prompted to give the style a name. Name the new style testimonial_thumbnail.
  • Choose Resize from the Effects menu. Click Add.
tutuploadsmedia_1331163440590.png

Set the size of the testimonial_thumbnail. Make it small, 75×75 should work. Click Add effect.

tutuploadsmedia_1331163502577.png

Step 3. Create a new content type

Go to Structure > Content types > Add new content type.

tutuploadsmedia_1331164645120.png

Create a content type called Testimonials. Click Save and Add Fields when you are finished.

tutuploadsmedia_1331166506658.png

Step 4. Add an image field

tutuploadsmedia_1331167891419.png
  • Add a new field named Testimonial Image.
  • Add the field name testimonial_image.
  • Choose Image as the type from the drop down,
  • The form element will select itself.
  • Click Save three times until the field is created.

Step 5. Add a link field

tutuploadsmedia_1331168531613.png
  • Add a new field named Testimonial Links.
  • Add the field Name testimonial_link.
  • Choose Link from the dropdown.
  • The form element will select itself.
  • Click Save.

You can repeat these last two steps step for as many fields as you want to add to the Testimonial Content Type. I’m going to add one more called Signed. It will be a text field where I can put the name of the person who left the testimonials.

Step 6. Manage the display of the fields

Click Manage Display to edit the way the fields are displayed.

tutuploadsmedia_1331170440659.png

We’re going to specify the image style to be used with this content type.

tutuploadsmedia_1331170129653.png
  • Adjust the positioning of the fields as needed using the drag and drop method.
  • Click the cog icon on the Testimonial image row.
  • Select the image style from the dropdown menu.
  • Choose testimonial_thumbnail. This is the image style you created back in Step 2.
  • Choose the link destination. (in this picture it’s hidden below the style drop down.) You probably want it to link to the content.
  • Click update.
tutuploadsmedia_1331170181692.png
  • Make any other changes to other fields you want.
  • Click Save at the bottom of the screen.

Step 7. Define the elements that make up the teaser

tutuploadsmedia_1331171042145.png
  • Look for the Teaser button toward the top right of the window. Click this to set the length of Teaser text and other details.
  • The Teaser settings show you that only 600 characters will be used for the teaser text. To change it click the cog icon.
  • Also, make sure the fields Signed, Testimonial Link and Testimonial image are set hidden in the teaser.
tutuploadsmedia_1331171368521.png
  • Click and drag the plus sign next to Testimonial Image.
  • Move it above the Hidden Field label so it will be part of the teaser.
  • The hidden fields will show in the full testimonial, but not in the teaser.
tutuploadsmedia_1331226423347.png
Now you have finished creating the fields and display for the Testimonials content type. Now we need to go and work with Views to complete the slideshow.

Step 8. Add the View

  • Go to Structure > Views > Add a new view.
  • Enter the settings below. Make sure to define the view as a block.
tutuploadsmedia_1331224560504.png
  1. Name it Testimonial Slider.
  2. Check Description and give it a description.
  3. Choose the to Show Content and then the content type you want to show.
  4. Uncheck Create a page.
  5. Check Create a block.
  6. Type Testimonial Slider into Block Title.
  7. Choose the Slideshow Format made up of teasers.
  8. Decide the number of items to show on the page. Use “0” if you want to scroll through all testimonials. Otherwise it will loop through 5 of them.
  9. Click Continue & edit

Step 9. Edit the View

  • Click on None under Block Settings.
  • Give your block a name.
  • Click Settings under FORMAT and next to Slideshow.
tutuploadsmedia_1331230229715.png

Scroll through the options and make changes. From here you can add classes, choose the transition type for the slides and and Internet Explorer tweaks. Take some time to look at all your choices. This is where you will control the look and performance of the slides. Be sure to save any changes you make.

tutuploadsmedia_1331230426361.png

 

Step 10. Publish the block

  • Go to Structure > Blocks.
  • Your new block will now show in the list of disabled blocks, and you can add it to a region like any other block. Add it to the region of your choice. I added it to Sidebar second.
tutuploadsmedia_1331231366205.png

Step 11. Add some testimonials

Now let’s create some content and try it out. Get some sample images to use for the thumbnails and create some testimonials.

TIP: if you want to quickly create sample items with Lorum Ipsum text, you can use a module called Drupal Ipsum, which allows you to just check a box to fill the article with dummy text when you create it. That’s what I used here.

tutuploadsmedia_1331231761204.png

Go to Content > Add content.

tutuploadsmedia_1331231933998.png

Choose Testimonials and create several so you can get a good idea of how the scroller and the block appear.

Step 12. Go to your homepage and look at the result

tutuploadsmedia_1331237195034.png

Your block should now show on your site.

Step 13. Edit the slideshow

tutuploadsmedia_1331237845579.png
Now that we can see the block in action, we may want to make changes. Here’s how to make them:
  • Mouse over the corner of the block so the gear appears.
  • Click the dropdown arrow.
  • Click Edit view

Step 14: Edit the slideshow settings

tutuploadsmedia_1331256334018.png
  • Choose Settings next to Slideshow.
  • In this example, we’re going to change the speed to 700 so that slideshow operates more quickly.
tutuploadsmedia_1331239855077.png

Summary

There are a wide variety of possibilities and options available to you with Views Slideshow. You might now want to go back and change anything from the image styles, to the fields, to the content, to the slideshow settings.

This tutorial hasn’t taken you in depth with any of those, but hopefully you now feel confident enough to start to build your own slideshows. You now know where to edit the image styles, fields, content and slideshow settings.

From here, it’s a question of practice and we’re sure you’ll build some great slideshows.

Posted in Drupal, Drupal7, Modules | 2 Comments »

Creating a Photo Gallery in Drupal 7

Posted by drupallovers on March 30, 2012

This tutorial will show you how to create a photo gallery in Drupal 7.

It won’t create the world’s flashiest or most impressive gallery, but it will work. This tutorial is designed for beginners so that they can understand the key concepts behind creating a gallery in Drupal 7.

If you’re still using Drupal 6, we have a tutorial for you also.

Step 1: Install Modules

You will need to install and enable the only modules listed below:

Step 2: Create a content type

First, we’re going to set up a photos content type. Go to Structure > Content types > Add content type and create a new content type to use for the photo gallery.

tutuploadsmedia_1331060256061.png

Step 3: Add a Photo Field

Now we’re going to add an image field to our new content type so that we can actually upload photos. Go to Manage Fields and create a field using the Image data type.

tutuploadsmedia_1331060521185.png

Step 4: Upload the photos

There’s a variety of ways to to upload enough photos to fill a photo gallery.

tutuploadsmedia_1331060694984.png

Step 5: Create the View

Go to Structure > Views > Add new view and let’s set up the view:

  1. Give your view a name such as Photo Gallery.
  2. Choose to show Content of type Photos.
  3. Check the create a page box.
  4. Choose the Grid display format and choose fields.
  5. Choose a number that will work well in a grid: 12 is the example used here.
tutuploadsmedia_1331060923047.png

Click Continue & edit.
Scroll down and you’ll see a preview of your photo gallery. The only thing missing? Photos.

tutuploadsmedia_1331060942549.png

Step 6: Improve the View

Let’s go and add the photo to our view. Click add next to Fields.

tutuploadsmedia_1331060960346.png

Search for and select the photos field that you created earlier.

tutuploadsmedia_1331062354345.png

Click Apply (all displays) twice. Now your preview at the bottom of the page will look like the image below. The only thing wrong now is that the images are all different sizes.

tutuploadsmedia_1331061075586.png

Step 7: Resizing the Images

Drupal comes with a way to automatically resize images. Let’s see how.

  • Go to Configuration > Image styles > Add style.
  • Enter a name of your new resizing option.
  • Click Create new style.
tutuploadsmedia_1331061159450.png

You’ll now see a preview of the image resizing. Currently nothing is happening.

tutuploadsmedia_1331061180084.png
  • At the bottom of the page, choose Scale and crop.
  • Click Add.
tutuploadsmedia_1331062529803.png

Choose how wide and high the photos will be. In our example we have four photos across the page, so we’ll choose a width that will allow us to fit four photos in. Click Add effect to finish.

tutuploadsmedia_1331061232609.png

You’ll now see a fresh preview of the image resizing.

tutuploadsmedia_1331061251914.png

Now let’s go and apply the resizing to our photos.

  • Go to Structure > Views > Photo Gallery > edit.
  • Click Settings next to your photos field. You can now go to Image style and choose the style that you just created.
  • You might also want to uncheck the Create a label box so that the field name doesn’t show.
  • Click Apply (all displays).
tutuploadsmedia_1331061400126.png

Click Save to finish your view and go to visit it on the front end of your site. Voila! Your Drupal 7 photo gallery is complete.

tutuploadsmedia_1331061620284.png

Posted in Drupal7, Modules | Leave a Comment »

Creating a Photo Gallery in Drupal 6

Posted by drupallovers on March 30, 2012

This tutorial will show you how to create a photo gallery in Drupal 6.

It won’t create the world’s flashiest or most impressive gallery, but it will work. This tutorial is designed for beginners so that they can understand the key concepts behind creating a gallery in Drupal 6.

You will need to install and enable at least the five modules listed below. Several of these do depend on other modules so your final list of installed modules will be longer.

Step 1: Create a content type

tutuploadsmedia_1319216976361_1f2fe1c78e0920de1ea5ba7a5ff8f583.png

Go to Administer > Content types > Add content type

tutuploadsmedia_1319217177397_844bbc12d125fb9fad4865972d717676.png

Create a new content type called Photo Gallery.

Step 2: Add a Photo Field

tutuploadsmedia_1319217290277_b01fda4505f98c5957126e6f8e0212c7.png

Click Manage fields next to Photo Gallery and we’re going to add a photo field.

  • Label: Photo
  • Field name: photo
  • Type of data: File
  • Form element: Image

Click Save twice to create the field.

Step 3: Upload the photos

tutuploadsmedia_1319217497427_5ac7feb4089391f3506882690d31a23d.png

Go to Create content > Photo Gallery and upload the photos you would like in your gallery. Each photo will be it’s content item.

Go ahead and upload at least four photos so that we have something to work with.

Step 4: Creating the View

Go to Site building > Simple views > Add view.

tutuploadsmedia_1319218260634_19f84ecf8319f259206e523973e53756.png

Enter the following settings:

  • Title: Dog Photo Gallery
  • Path: dog-photo-gallery
  • Display: Photo Gallery posts
  • Sorted: Newest first
  • As a: List of titles

Click Submit when you’ve finished.

Step 6: Improving the view

Go to Site building > Views > click on Edit next to your new view which will be called simpleviews_1 if this is your first time using Simple Views.

Make sure to click Page on the left-hand side as in the image below:

tutuploadsmedia_1319219922899_c90800417f2a421f501fddb7d7253d0a.png
Click on HTML List under Basic settings:
tutuploadsmedia_1319218867382_d2a2115530d9f4f03e17a7b0a6cfaa82.png
Choose Grid and click Update:
tutuploadsmedia_1319218798006_455e520b2212a6c60f10fe3448242ed7.png

Set the number of columns to 2 on the next page.

Now we’re going to add the photo and caption. Click the plus icon next to Fields:

tutuploadsmedia_1319218909521_51aa7c428a60eee55535af00ed09c655.png
Check the box next to Content: Photo.
tutuploadsmedia_1319218931915_275905a89c24ca0c3602dc22130c4e90.png

Click Add.

Set Label to None and set Format to Image:

tutuploadsmedia_1319218966333_ba86a5516d6eb715adb41eb81b8ddf75.png

Click Update.

Click the plus icon next to Fields once more.

Check the box next to Node: Body.

tutuploadsmedia_1319218991684_5d105ec5860ec528cd391fac1c66b679.png

Click Add then you’ll see a Label field. Remove the text in that field.

tutuploadsmedia_1319220198814_8b493852ff1d099fbef6f2b14ba537c4.png

Click Update.

Click Save at the bottom of the page make sure your changes aren’t lost.

Click View “Page” in the top-right corner to visit your Photo Gallery. It will look like the image below:

tutuploadsmedia_1319219304319_b7b14308967e3c95966034d338606b50.png

Those photos are clearly too big. We’ll need to fix them. That is why we also have the ImageCache module installed …

Step 6: Resizing the images

 

tutuploadsmedia_1319219530623_e9e13617c7e31b8f07b88544ff811a83.png

Click Add Resize enter the maximum height and width that you would like for the images on the main page of the photo gallery.

300 pixels wide and high might be a good choice to start with.

tutuploadsmedia_1319220329218_05016b22ae1d2a43978a5e1b32f0bfe6.png

Go to Site building > Views > click on Edit next to your new view. Make sure you click Page on the left-hand side.

tutuploadsmedia_1319220125486_780a5d79bb67e03e7753a378271fd8f4.png
tutuploadsmedia_1319220154418_e5c4c97fb0df0c4ca3d4e1d12b4eb674.png

Click Save and visit your Photo Gallery. It will now look like the image below:

tutuploadsmedia_1319220412413_f200f43eba07c6afe4d99a2c20450d83.png

Step 8: Resizing the individual images

You can also create presets for individual photos so that they will not go over the edge of the page, no matter how big they are.

Go to Site building > ImageCache > Add new preset.

Create a new preset called individual photo.

Click Add Scale and set both the width to 700. That means that no photos will be wider than 700 pixels but they can be as high as necessary.

Click Save Preset.

Go to Content management > Content types > manage fields next to Photo Gallery > click Display fields at the top of the page.

Click on the Full node dropdown and choose the individual photo image that you just created. That will apply the 700 pixels maximum width to all of the photos when they are shown individually.

Click Save.

tutuploadsmedia_1319220882379_55226e993b028c7df3dead2670614758.png

Posted in Drupal6 | Leave a Comment »