by Elliot Christenson on May 17, 2017 - 10:03pm

Lots of non-profit organizations use Drupal - they're actually our biggest group of customers! In working with so many non-profit organizations, we've come across some common problems non-profits have with their Drupal sites. We're going to do a series of articles with tips for non-profits -- this is this first one! (click here to subscribe and get them all via e-mail)

One of the most common problems is how to promote and acknopwledge sponsors, donors, in-kind volunteers on their website. Where to fit all the logos/names?

In this blog post, I'm going to tackle one of the most popular solutions: putting them in a sildeshow.

(There's other techniques which we'll look at in future articles!)

Read more to learn how to add a sponsor slideshow to your site!

Creating a sponsor slideshow

The first common solution to this problem is "Views Slideshow". You may know that Views is a powerful Drupal feature. It's available as an add-on in older versions of Drupal and is in Drupal "Core" in Drupal 8! Many people refer to Views as the reason they use Drupal!

What you'll need the following installed and enabled to follow my brief walk-through:

  • Drupal
    note: screenshots are in Drupal 8, but Drupal 7 is similar
  • Views
    note: Drupal 8 has Views included!
  • Views Slideshow
    note: make certain to follow the installation instructions - including adding the jQuery Cycle "Library"

(Aside: If this process seems too complicated, this is exactly the sort of thing we help our customers on our Standard support plan or higher! :-))

Step 1: Create a New Content Type

Go to the Content Types Section of you Admin Interface: /admin/structure/types

Drupal Content Types Admin Page

Click the "+ Add content type" button.

Add Content Type

Note: You can set the settings how you choose on this - especially if you are planning on having a full-fledged "sponsor page" for each sponsor. I'm going to focus on only the parts needed to get a logo!

The Publishing Options Tab

We'll want to turn off "Promoted to Front Page" for this - just in case you are utilizing that Drupal feature and don't want to have that accidentally promoted!

Publishing Options

The Display Settings Tab

We'll want to turn off "Display author and date information" for this - you can set this if you want end-users to know which of your staff accounts was used to upload the logo, but I generally assume it is a "site admin" account. So, I prefer this off!

Display Settings

The Menu Settings Tab

We'll want to turn off the option to add this content to a menu - because it generally won't make sense to do that. Again, if you add more fields to the "Sponsor" Content Type, you may find a need to leave this on!

Menu Settings

Click "Save and Manage Fields", then we're on to Step 2!

Step 2: Add an Image Field

Add an Image Field to Content Type

As you can see, adding a Content Type in Drupal is super-easy! We have a "Title", and we have a "Body" field by default. You could delete the "Body" field if you want to simplify things for your editors, but here we're simply going to add an Image Field.

Click on "+ Add Field"

Add a New Field

Then simply hit "Save and Continue", then "Save Field Settings" on the next page.

The bottom part of the final Field Add Page has some settings you may want to pay attention to (image size, alt field, title field, etc.). We're going to leave everything as defaults for now!

Final Image Field Settings

Hit "Save Settings" - and we're done adding the Sponsor Content Type!

Step 3: Add the Slideshow View Block

Under your Structure Menu, select Views!

Views Page

Then, simply click "+ Add View"!

Name the Slideshow something simple like "Sponsor Slideshow", select "Content of Type Sponsor" instead of the default "Content of Type All". Don't click "Save and Edit" yet.

Views Slideshow Creation

Now, scroll down if necessary, and click the checkbox "Create a block" under "Block Settings". Make certain to set the "Display Format" to (you guessed it) "Slideshow" and change the second dropdown to say "Fields".

Slideshow Block Settings

Then, you can click "Save and Edit".

We're almost done. The next screen has a mind-numbing number of options, but we're only going to use one! We're going to change it from using the "Title" field to use our "Logo" field.

Views Options Page

In the left column, under the "Fields" heading, select "Add". Then, in the box that comes up, simply Search for, then select by checkbox "Logo".

Add Logo Field

Click "Add and configure fields".

This next page has options that may be of interest including changing the displayed image size. We're just going to leave this all as is!

Views Slideshow Logo Display Settings

Finally, we'll click "Save" to save our Views Block! Next we're going to place it!

Go to the /admin/structure/block page. This can get a bit complicated. We're simply going to add this to our homepage in the Content area.

Add Block Page

Once here, Click on "Place block" next to the "Content" header. Search for "Sponsor" in the search box, then clik "Place block" next to our "Sponsor Slideshow" View!

Select Slideshow Block

We're going to leave all the default options here, except for the addition of "<front"> to the text box under the "Pages" tab.

Configure Block Page

Then, click "Save Block". If you have any "Sponsors" added, your front page should now look something like this!


If you have any suggestions or issues with the tutorial, please feel free to add a comment or hit me on Twitter. 

And again, if this process seems too complicated, this is the sort of thing we could help you setup on your Drupal site, included in our Standard support plan, if you were a customer. :-)

In a future article, I'm going to tackle some other ways to show sponsor/volunteer/partner logos. But next time, we're planning to look at a case study of a successful non-profit Drupal site.

Subscribe to get all our Drupal Non-Profit Tips!

See you next time!

Want to read more articles like this? blog Subscribe to the blog and recieve e-mail updates when new articles are published!

Add comment