Cloud Platform
Responsive Full-Width Banners
As a front-end developer for acquia.com, I've had lots of fun and challenging design requests come my way. Most recently I was tasked with swapping out the static homepage graphic with a full-width, responsive slideshow banner that can also be tested and personalized using Acquia Lift. Requirements were: content managers must be able to upload graphics, edit text and create translated versions using the user interface, must include two link-able buttons for calls to action, must have functional controls, must be full-width and fully responsive. Additionally, in order for this slideshow to be personalized and tested using Acquia Lift, it must be generated as a block.
Before:
After:
acquia.com setup at time of slideshow launch:
Drupal 7.27
Base Theme: Omega 3
PHP 5.5.1
JQuery 1.8.4 and JQuery UI 1.8.7
Views 7.x-3.7
Views Slideshow: Cycle 7.x-3.1
Acquia Lift 7.x-1.0-beta5
Behind the Scenes of the Acquia.com Responsive Slideshow
If you work with Drupal, you know there is always more than one way to do something; there are multiple modules and configuration setups that often yield similar results. After exploring a variety of options, this is what worked best for acquia.com.
Step One: Content and Config
On acquia.com we have a relatively simple, custom content type we use for slideshows. There is a text area field which accepts full HTML, an image field, a language selector field, and a term reference field that enables the content manager to choose a slideshow in which to include each slideshow node.
*Note: While it would be ideal to use .svg files for slideshow images for super-crisp resolution, acquia.com currently uses jpgs. The reason for this is that we needed to be able to upload image files using an image field in the content type. At present, image field cannot accept .svg format. You can read more about it here: http://drupal.stackexchange.com/questions/98216/adding-svg-file-extensio...
In future iterations we may explore alternatives to image field thus allowing us to swap the jpgs for svgs. So for now, it's jpgs.
As you can see in the screenshot below, the description text field is where all of the text and call-to-action buttons live. This field provides ultimate flexibility for content managers. It's easy to add custom classes, change out links and text, add Google analytics tracking, switch icons and rearrange components if needed per slide.
Step Two: Building the View
Once the content was in, it was time to build the view.
*Tip: To save ourselves some potential pain from images being different sizes, a new image style was created; we used the scale property and set width to 1024 and height to 350.
Now onto the view, selecting Create block.
Format: For type, we chose slideshow (in order for this to be an option you must have Views Slideshow module installed and enabled). Then for settings, in the widgets section under Bottom Widgets, we selected Pager.
Fields: We added the image field and the description text field from the slider content type. The image field is configured to 1) exclude from display, 2) formatter is image, 3) image style - we chose the image style created earlier, 4) link image to nothing. No other configuration is needed for this field. The descriptive text field is configured to 1) not have a label, 2) Rewrite results to include both the image and text field: [field_basic_slider_image][field_description_text]
Filters: Because acquia.com uses a generic content type for this slideshow and because we have to filter on language, four filters are used to display the correct content. 1) Content: Published (Yes), 2) Content: Type (= Basic Slider), 3) Content: Slider content type (= Homepage) (this is the taxonomy list managers use to choose a slideshow per node), 4) Content: Language (in Current user's language or no language).
In the Advanced settings, in the Other section, we give the view block a class of fluid-banner.
Step Three: Placing the Slideshow Block
For acquia.com, Omega is the base theme upon which we have a custom theme. We created a new zone and region for the full-width banner in the .info file of the custom theme by adding the following: regions[banner] = Banner and zones[banner] = Banner Zone.
The new zone and region were configured in the Appearance section of the custom theme; this is done by navigating to admin > appearance, and then clicking on settings next to the custom theme. Click zone and configuration settings. The new zone and region will likely show at the bottom of the list in the unassigned section. Configure the zone first. The settings for the new zone on acquia.com are as follows:
Save the settings. Once zone settings are saved, you can configure the settings for the region. Region settings for acquia.com are as follows:
Once the zone and region are configured, a cache clear may be required.
Blocks can be placed using block admin, block insert module, context, panels, etc. We use various methods on acquia.com to place blocks. In order to utilize this new region and add this block to an existing node, Context module is used to place the block. For Context conditions, we use Path set to
Step Four: Make it Pretty and Make in Responsive
Once the view block with content was showing, it needed some CSS and JS love.
Using the solutions outlined in this drupal.org issue as a guide, https://drupal.org/node/1510526, the following JS was added to an existing .js file.
(function ($) {
$(document).ready(function() {
/**
* Help the homepage banner height resize responsively
*/
var responsiveness = function () {
var slideheight = 0;
$('.fluid-banner .views-slideshow-cycle-main-frame-row').each(function() {
slideheight = $(this).find('.banner-image img').innerHeight();
if (slideheight !== 0) {
$('.fluid-banner .views-slideshow-cycle-main-frame').css('height', slideheight + 'px'); return false;
};
});
};
$(window).resize(responsiveness);
$(window).load(responsiveness);
});
})(jQuery);Acquia.com utilizes multiple style sheets to accomodate different screen sizes. For the banners and corresponding content there is a good amount of css. At the basic level, the following was added to our main style sheet.
/* Banner region fluid settings */
.zone-banner-wrapper.fluid,
.fluid.container-24,
.fluid.container-24 .grid-24 {
width: 100%;
}
.fluid.grid-24 {
margin-left: 0;
}
.front .section-content .zone-wrapper {
padding-top: 0px;
}
/* Fluid Banners */
.fluid-banner .views_slideshow_cycle_main {
width: 100%;
margin-bottom: -20px;
}
.fluid-banner .views_slideshow_cycle_main .views-slideshow-cycle-main-frame {
width: 100% !important;
}
.fluid-banner .views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row {
width: 100% !important;
height: auto !important;
}
.fluid-banner .views_slideshow_cycle_main .field-content {
max-width: 100%;
width: 100%;
}
/* Center the image */
.fluid-banner .views_slideshow_cycle_main .field-content .banner-image img {
display: block;
margin:auto; /*Center the image*/
max-width: 100%;
width: 100%;
position: absolute;
}
.fluid-banner .views-slideshow-controls-bottom {
text-align:center;
width:99%;
margin:auto; /*Center the control bottom*/
z-index: 4;
position: relative;
padding-left: 0;
bottom: -10px;
visibility: hidden;
}
.fluid-banner .views-slideshow-controls-bottom .views-slideshow-pager-field-item {
display: inline-block;
margin: 0 10px;
padding: 3px;
background: #fff;
width: 5px;
height: 5px;
border-radius: 10px;
border: 1px solid #888;
}
.fluid-banner .views-slideshow-controls-bottom .views-slideshow-pager-field-item.active,
.fluid-banner .views-slideshow-controls-bottom .views-slideshow-pager-field-item:hover {
background: #222;
border: 1px solid #222;
}To target tablets, mid-size screens and beyond, we add the following to the corresponding style sheet:
/* Fluid Banners */
/* Banner region fluid settings */
.front .section-content .zone-wrapper {
padding-top: 20px;
}
.fluid-banner .views-slideshow-controls-bottom {
width:720px;
margin-left: auto;
margin-right: auto;
top: -10px;
visibility: visible;
}*Note: Additional CSS targeting the selectors for the text and buttons was also added to each style sheet to get the desired final product.
Step Five: It Works - Now Let's Personalize It
Once the slideshow banner was up and running, the last requirement was to test and personalize it using Acquia Lift. In our case we wanted to see if engagement level on the homepage increased or decreased when this new slideshow banner was shown compared to the old static graphic image. We also wanted Lift to display more frequently whichever element performed better. What's great about Acquia Lift is that we were able to use the interface of our own site as well as content that had already been created. To set this up we created a new personalization campaign, chose a control block that displayed the old static graphic image and chose a variation that displayed the new view slideshow block. We set a goal of clicks on the homepage. This process of creating a campaign generates a new personalized block. I simply replaced the original views slideshow block with this new personalized block. That was it. Setting up Acquia Lift was really easy and data started flowing quickly.
Cloud Platform