28 Apr

Setting up Stingray from Scratch or on an Existing Website

The following guide is for use with the Stingray Drupal Theme available for purchase here.

This guide will assist you in setting up Stingray and it’s additional features on a pre-existing website or from scratch. Although we recommend that users new to Drupal install the theme using our custom installation profile, that takes care of all of this for you in a few simple clicks, we understand that this might not always be ideal. But if you’ve never heard of the CCK, Views and Imagecache modules before today, we recommend that you proceed with caution and much patience. ;)

And as always, before doing anything to a pre-existing site, make sure to BACKUP.

So let’s get rollin’.

1A. Install Drupal if you haven’t already. Make sure mod_rewrite is enabled, we’ll need to use Clean Urls for this.

1B. First on the list, grab the required modules. You can steal them out of the Easy Installer sites/all/modules folder, or download them using the links below:

Required Modules:

Content Construction Kit (CCK)
FileField
ImageAPI
Imagecache
Imagefield
Jquery Update
Token
Views
Dynamic Display Block
Thickbox

Once you have all of the modules together, drop them in your ‘sites/all/modules’ folder inside your Drupal installation. If you don’t have any third party modules already, you may have to create the ‘modules’ folder.

2. Enable the new modules.

The Content Permissions module included with CCK isn’t necessary, but if you do enable it remember to set the permissions so that users who aren’t logged in will be able to view our custom fields.

3. Copy the ‘stingray’ folder that’s found inside the ‘Core Theme Files’ folder in stingray_pack.zip to sites/all/themes.

4. Enable your new theme. Looks pretty sharp, amirite?

5. Setup your Imagecache presets.

Navigate to Administer > Site Building > Imagecache.

First, create a preset called ‘feature-block’. Add a ‘Scale’ action with the following settings:

Width: empty
Height: 170

Next, add a ‘Crop’ action with the following settings:

Width: 75
Height: 170
X offset: center
Y offset: center

Next create another new preset and name it ‘lead-image-full’. Add a ‘Scale’ action with the following settings:

Width: 200
Height: empty

Lastly, create one more preset called ‘lead-image-teaser’. Again add a ‘Scale’ action and use the settings:

Width: 100
Height: empty

That’s it. We’re finished with Imagecache!

6. Import the Article custom content type.

Navigate to Administer >Content Management>Content Types. From the tabs at the top, select ‘Import’.

Inside the stringray_pack.zip you’ll see a folder called ‘cck and views exports’. Open up the file cck_article_type_export.txt in a text editor. Copy the contents.

Paste the contents of the file into the Import Date text area. Click import to import that sucker.

Double check Administer >Content Management>Content Types and if you did things correctly you should see the new ‘Article’ content type. Congrats.

7. Now we’ll setup some taxonomy to control where the Views are going to appear. Navigate to Administer>Content Management>Taxonomy.

Click the tab ‘Add Vocabulary’. In the Vocabulary Name field, type in Display Block/Features Selector. Select ‘Article’ for the content type, and under settings check the box next to ‘Tags’.

Once you save it’ll take you back to the main Taxonomy overview, and at this point we want to ‘add terms’ to the newly created Vocabulary. Add the following terms, one at a time: dynamic, feature 1, feature 2. You can leave each Description field blank if you want, and don’t worry about the advanced options.

8. Next we’ll import the Views using a similar method.

Navigate to Administer>Site Building>Views and again click on the Import tab at the top. There’s three Views to import found in the files: views_dynamic_block_export.txt, views_feature_block_1.txt, views_feature_block_2.txt. Import these the same way you imported the CCK content type, by copying and pasting the contents of the file. When importing, leave the name of the view blank.

Each time you import a view, remember to click the ‘Save’ button at the bottom of the view’s setup.

WE’RE ALMOST DONE.

9. Time to set up the Dynamic Display Block. Navigate to Administer>Site Configuration>Dynamic Display Block.

First, click the ‘Settings’ tab at the top. Check the content type ‘Articles’, and under Blocks, check the ‘views – News Item Slideshow’ (it’s probably at the bottom). Save the configuration.

Now we’ll create an instance. Click the ‘Instances’ tab. Name the Instance ‘Dynamic Display Block’. Click ‘Add Instance’.

Click the ‘List’ Tab to go back and you should see your newly created instance listed. Next we’ll want to configure it. Click ‘Configure Block’.

There’s a lot of different options here, so bear with me.

Under Display Method: Choose ‘Cycle Block’, and check the ‘Use Advanced Settings’ box. More options appear!

a. From the dropdown labeled ‘Template’, choose ‘Custom’. A text field called Custom Template will appear. In this field, type the word ‘stingray’.

b. Ignore the Imagecache settings. We won’t be using those.

c. Next we want to look at the Dynamic Display Block Settings. Here you can choose the transition effect you want to use. Note that some look better than others. Speed controls how fast the the animation occurs, Timeout controls the amount of time in between transitions, and the Sort order is…the sort order. Uncheck the box beside ‘Next’, and check the box next to Pager. More options!

d. The pager settings are pretty straightforward, select “Custom Pager” from the first dropdown. You’ll want to place the pager either on the top or bottom. Stingray doesn’t support displaying the pager at the side.

e. Now locate the ‘User jQuery Effects for Text of a Slide slide check box. Check it. These options control the how the text slides in and out of the block.

Once you have everything the way you want it, scroll down and click ‘Submit’.

10. Now it’s a matter of placing the Dynamic Display Block and Feature Blocks into their regions.

Navigate to Administer>Site Building>Blocks, and scroll to the bottom, locate Dynamic Display Block, Features Block 1, and Features Block 2 and place them in the similarly named regions.

And that’s that. When creating your content, use the tags to identify what goes where. To have content appear in the Dynamic Display Block, use the tag ‘dynamic’. Likewise, for Feature Block 1 and Feature Block 2, use ‘feature 1’ and ‘feature 2’. Also, if you’re blocks mysteriously disappear when you log out, make sure you have the right permissions set.

Support hours: 9AM - 5PM EST, Mon - Fri

Follow us on: