currently it is not easy to use slide show modules in "preface top" region, lets find a generic approach to make it supper easy.

I suggest to add a new block region that would act as background for blocks in "preface top" region. so end users could easily add a slide show block to the new region and then set other blocks on "preface top" region that will appear on top of the slide show block.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ginc’s picture

FileSize
8.97 KB

I implemented it by adding a new block region called "preface top background", a views slideshow can be added to this region and function as rotating background for "preface top" blocks, if there is no "preface top" blocks on the page then no background will be shown, here is the instruction:

Add this line to acquia_slate.info:

regions[preface_top_background] = preface top background

replace page.tpl.php with the attached file,

add this code to the end of fusion-acquia-slate-style.css:

/* By GA to add easy integration with slide show modules */
#preface-top-container {
  position: relative;
}

#preface-top-background {
  position: absolute;
  height: 400px;
  width: 950px;
  top: 0;
  left:0;
}

#preface-top {
  position: relative;
  z-index: 100;
}

replace .dark-transparent-background .inner values inside fusion-acquia-slate-style.css with:

.dark-transparent-background .inner {
  background: url(../images/transparency-dark.png);
  min-height: 400px;
  max-height: 400px;
}

i'll submit patches soon...

ginc’s picture

Status: Active » Needs review
FileSize
1.07 KB
621 bytes
1.26 KB

attached patches, i think we can easily add this new feature without hurting the existing functionality

jeremycaldwell’s picture

Status: Needs review » Fixed

Great addition and write up GA! As cool as this is we don't want to add any support to the default theme files as someone can easily follow your steps here to customize it as needed.

Marking this issue as "fixed" since this is a great solution and I'm sure many people will easily find and use it.

ginc’s picture

Status: Fixed » Needs review
FileSize
652.68 KB

thank you for your quick response, the way banner already implemented in neither aliened with theme's way that gives the end user ability to customize the theme without coding with the help of skinr and options, neither aliened with drupal way of doing things.

currently, to activate and customize the banner you need to upload your pictures to theme's special folder and change the code in fusion-acquia-slate-style.css and acquia_slate.info; things get much more complicated if you want to setup rotating or slide show banner; that involves more changes in code and adding new php file to theme; as a result end user will not have much control over banner pictures.

the drupal way of doing this is to:
1) use cck and image field modules to give the end user ability to upload banner pictures, these modules can handle everything required for uploading images including checking the picture resolution. end user goes to create new content and adds a new banner image node.

2) use views and views slideshow to create a block that shows the banner image node(s), this will also open all the views power on controlling what banner image is shown on specific part of the site.

3) assign the views slideshow block to the block region called "preface top background", you can control where the banner appears by changing the standard block settings.

this way end users will have total control over banner pictures, access to drupal files is not required for uploading banner pictures, no custom coding required that also makes updating the theme easy. theme's banner gets much more advanced as it takes advantage of views power, dedicated and evolving slideshow modules.

what i want is stop the theme from going into the wrong path, to get this solution to official release and then make it the dominate solution for banner implementation. i hope you agree with me that this solution is generic enough to ship with the theme.

i also attached a screen shot of the solution from our test website, you can see slide show on "preface top background" and two blocks on top of it on "preface top"

asb’s picture

+1 for GA's approach from #4

ginc’s picture

live, production site using the solution i'm suggesting on this issue:

http://www.frunut.ru/en

under product catalog you can see that only slides related to current product category show up, views module is filtering the slides:

http://www.frunut.ru/en/catalog/20

http://www.frunut.ru/en/catalog/26

ginc’s picture

if you are not going to have a block with dark-transparent-background on preface-top all the time then
use this code at the end of fusion-acquia-slate-style.css:

/* By GA to add easy integration with slide show modules */
#preface-top-container {
  position: relative;
}

#preface-top-background {
  position: absolute;
  width: 950px;
  top: 0;
  left:0;
}

#preface-top {
  position: relative;
  z-index: 100;
}

#preface-top-inner{
  position: relative;
  min-height: 400px;
}

new patch for fusion-acquia-slate-style.css attached

Poieo’s picture

@GA

I have this working perfectly in everything but IE7. The slideshow is pushed below the preface top block.

Did you make any adjustments for IE7? You can see it here: http://gotocurbappeal.poieosmallbusiness.com

Thanks for the great tip.

ginc’s picture

To make this solution perfect we need to:

1) Make the theme adjust with banner picture height automatically so there will be no need to hard code the picture height in css (i don't know the best way of doing this)

2) Implement a way to round the bottom corners of the picture automatically, so there will be no need for the end user to do it manually (i couldn't understand the way this theme is doing it yet, it seems its using jq)

3) Use imagecache module to resize the original picture so there will be no need for the end user to care about the banner image resolution before uploading it.

@Poieo
no adjustments for IE7 used

Poieo’s picture

1. There is no need to hard code the height as long as you're using image cache to generate the images. Your views slideshow can choose what preset to display. A simple scale and crop of 940px wide X whatever height you want will achieve this.

edit: You DO need to hard code the height of your overlay to match the image cache preset you use. You should not need to set the height of the slideshow in css, however.

2. You can also use image cache together with image cache actions (http://drupal.org/project/imagecache_actions) to automatically round the corners of the images you upload. Slate uses JS to do it, but it won't work on <img> tags which are used in the slideshow, only on background images.

3. Answered by #1 and #2.

Not sure what my IE7 issue is yet...

ginc’s picture

regarding #1: can you come up with a code that could be replaced the code i provided. the goal is to have banners with different heights on different parts of the site

marktheshark’s picture

I have seen that the example site (FRUNUT) does not render the slideshow properly on IE6.

I have a similar problem with one of my sites.

Any CSS workarounds?

Thanks

sheena_d’s picture

Status: Needs review » Fixed

Marking as fixed since we will not be adding this functionality to Acquia Slate, but anyone who wishes to implement this functionality can easily follow the steps provided here.

Thanks!

asb’s picture

Status: Fixed » Closed (won't fix)

This is a "won't fix" if the feature request is denied.

gMaximus’s picture

Hi....

I don't know why but my "Preface Top" block is taller than my "Preface Top Background" block (containing the my views slideshow)...

I've cleared my caches. I've tried using patch 3 and patch 4. My images are all 950x400, although i originally had them at 950x450. Haven't got around to setting up the image cache module.

I'd love any assistance or pointers.... I must be missing something obvious, in the settings i think, as no one else has experienced it :)

Here's a link to see it http://hamiltongibsonevents.co.uk

Many thanks,

Guy

Ps this is an awesome addition to the theme - very nice! :)

gMaximus’s picture

Hi... cancel my request for help....

I had to edit the file css/fusion-acquia-slate-style.css:

I changed this:

.dark-transparent-background .inner {
background: url(../images/transparency-dark.png);
min-height: 400px;
max-height: 400px;
}

To this:

.dark-transparent-background .inner {
background: url(../images/transparency-dark.png);
min-height: 370px;
max-height: 370px;
}

hope this helps others...

Guy

ps thanks again for the patches