To get the rotating image banner working (image size: 960 x 420px) on the front page after removing the old pictures from /images/banner:

Presteps:

Go to this link: http://drupal.org/node/799680 and download, unzip, and place the attachment (rotate_img.php) into the images/banner folder.
Create your skinr rule for banners by watching this video: http://www.screencast.com/users/eternalistic/folders/Jing/media/8ec2fbbc...

1) In acquia_slate.info under ; Acquia Slate - Banner Styles add this for EACH image you want to upload:

skinr[slate-banner-styles][options][6][label] = Jose Vasconcelos
skinr[slate-banner-styles][options][6][class] = banner-background-josevasconcelos banner-background

the [6] is a reference to what image number it is. Currently I have 6 images so the number there would be between 1-6

the [label] is the name that will show up on the administrator's backend. Mine is obviously Jose Vasconcelos.

You change the word after banner-background to match the [label] but all lowercase with no spaces.

Repeat this for however many images you want to upload. Just remember to keep an eye on the [number]

2) Add this code to the bottom of the acquia_slate.info file:

skinr[slate-banner-styles][options][6][label] = Rotating
skinr[slate-banner-styles][options][6][class] = banner-background-rotating banner-background

3) Upload this file back to /site/all/themes/acquia_slate

4) Under /* Preface top - Banners */ in the fusion-acquia-slate-style.css (located in acquia_slate/css):

Since you've removed the old images that were the default banners, you can simply go in and replace the phrases that were originally in there to match what you put in for step one for however many images you added in:

.banner-background-josevasconcelos #preface-top .preface-top-inner {
background: url(../images/banner/jose_vasconcelos.jpg) no-repeat center center;
}

Notice the josevasconcelos in the .banner-background-josevasconcelos section. That is identical to the name you gave this in step one. So copy and paste in whatever word you wrote in.

Then you change the jose_vasconcelos.jpg to be the name of the JPG that you added in there.

Repeat for all the banner images you uploaded.

5) Add this to the bottom of the fusion-acquia-slate-style.css (located in acquia_slate/css):

.banner-background-rotating #preface-top .preface-top-inner {
background: url(../images/banner/rotate_img.php) no-repeat left top;
}

6) Go to your Drupal dashboard and select Skinr under Site Building.

Go to rules > and select "Banner" (which you already wrote after watching this video: http://www.screencast.com/users/eternalistic/folders/Jing/media/8ec2fbbc...)

Then click edit.

Scroll down to Acquia Slate - Banner Styles and select "Rotating" and save.

7) Go to your front page and refresh and watch the banner rotate!

I hope that by having documented the process all in one place, this will help everyone!

Comments

Hanscraft’s picture

Oh, so my minor question would be: how would I make the image banner smaller? It takes up a lot of reality space on my netbook so I'd like to make it about 300px or so tall. I'd think that I could just adjust the image heights, but I imagine that there is a lot of back end code which is controlling how much space the banner takes up for the preface block too.

asb’s picture

Alternative approach: #799680: Script-based rotating banner

Question: Why do you put modified code into fusion-acquia-slate-style.css and not into <./css/local.css?

Vc Developer’s picture

Your video link is no longer valid. Can you please update the link?

clevelandrachel’s picture

Yes, please update the video link or tell how to create the skinr rule for banners.

jeremycaldwell’s picture

Status: Needs review » Fixed

The video is up for those who want to check it out. It may hit the bandwidth limit soon so view it while you can!

ginc’s picture

I think the drupal way of implementing rotating banner is this way:

use cck and image field to create a new content type to upload banner images

use views and views_slideshow to create a rotating block.

use the rotating block as the background in top preface region using my solution here:
#961588: easy integration with slide show modules

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.