How-to: How to create a beautiful and functional banner rotator using Drupal 7

    Usually I do not write articles on the topic of how to use certain ready-made modules to implement some functionality. I am much more interested in directly creating modules, interacting with the kernel, working with various APIs, etc. "Programmer" and architectural things.
    But, this time, by the numerous requests of the working people, I still decided to write one How-to.

    So, this article will discuss how to use the Drupal 7 tools and a couple of templates to implement a banner rotator like what is built into one of my resources ( http://labridge.ru ).

    The end result should look something like this:



    The big idea


    I think you don’t need to go into details for a long time why banner rotators are needed. They are used most often on the main pages of sites, serve to draw the user's attention to some information, whether it be special offers, products with skids or hot news. Most often they are active and provide the user with the opportunity to follow some link for a more detailed review.

    When I thought about the architecture of the future rotator, I had two options:
    1. The site has a set of materials. It would be possible to assign the required fields for each type of material, some Boolean field with the name "Put in rotation" and then through the Views output the materials marked with this checkmark to the rotator.
    2. Create a separate type of material “Banner for the rotator” and display it in the rotator.

    It is clear that the advantage of the first option is convenience. Marked the material with a tick and now it is already in the rotator.
    However, the second option seemed to me more logical and more flexible. Firstly, it is not necessary to load all the materials without exception with additional fields for the rotator (which of course in Drupal 7 with its field system is not too painful, but still). Secondly, if you make each banner as a separate material, then you can refer it not only to the material inside the site but also to some external resource.

    In general, following a brief reflection, I settled on the second option.

    Implementation


    Step 1. Modules.

    It is assumed that Drupal 7 is installed as standard and all basic modules of type Field UI are included.
    You also need to download and install the following modules:

    It will also be necessary to download and install all the dependencies of the above modules, which Drupal will inform you about.

    Step 2. Create a material type for the banner.

    For the banner on the admin / structure / types page, create a new material type. Each material of this type will be a separate banner.
    Next, go to the field management page and create the following fields:
    • Image (field_image) - field of type "Image". It will store the actual image of our banner, so it makes sense to make it mandatory.
    • Link (field_link) - field of type "Link". Will store a link to go through the banner.
    • Description (field_description) - field of type "Text area". It will store a short annotation for the banner, which will avoid applying it to the banner in a graphical editor.

    Well, it is also assumed that the “Title” field was automatically added by the node module.

    Step 3. Creating a view.

    Now let's move on to creating a view that will display all this.
    We go here admin / structure / views and add a new view. I called it “Front Rotator” (front_rotator).

    Further:
    1. Add a block type display.
    2. Change the format to Slideshow.
    3. In the “show” column, select Fields.
    4. In the field column, add: Title, Description, Image, Link, Weight.
    5. As filters we choose: the material must be published (in order to be able to display the banner from rotation), the type of material - we choose our type of material for banners.
    6. As sorting, indicate sorting by the weight of the material.

    The result should be something like this:


    Now let's move on to setting the Slideshow format (Format panel, Slideshow item, Settings link).
    1. As “Slideshow Type” we select “Cycle”.
    2. The Slideshow format has 2 zones for placing navigation elements. Formally, they are called “bottom” and “top”. However, this is just a formality. For example, my lower zone is actually located on the left. So it’s really important to know and take into account only that when planning a template for a rotator we can operate with two different zones for placing navigation elements and manage them through the settings of the view format.
    3. For our rotator, check the box “Navigator” in the lower zone, select “Fields” as “Pager Type” and mark the “Title” field in “Pager fields”.

    Vitogue should get something like this:


    Step 4. Theming.

    Now it's time to figure out how to change the display style of our rotator.
    Formally, Views Slideshow has a style system, but I decided to just add a couple of templates to the site’s theme, finding this solution more flexible, faster and more convenient.

    Two templates were added to the topic:
    view-slideshow.tpl.php - responsible for the general view of the rotator and the display of zones. It has been edited as follows:
    <div class="skin-labridge">
      <?phpif (!empty($top_widget_rendered)): ?>
        <divclass="views-slideshow-controls-topclearfix">
          <?phpprint $top_widget_rendered; ?>
        </div>
      <?phpendif; ?>
      <?phpprint $slideshow; ?>
      <?phpif (!empty($bottom_widget_rendered)): ?>
        <divclass="views-slideshow-controls-bottomclearfix">
          <?phpprint $bottom_widget_rendered; ?>
        </div>
      <?phpendif; ?>
      <divclass="clearfix"></div>
      <divclass="clear"></div>
    </div>
    

    At the same time, the upper zone can actually be thrown out. nothing will be displayed in it.
    Also, if you plan to make different rotators inside one site, it will not hurt to create a template with a specific name for each.

    The second template views-view-fields - front-rotator.tpl.php is responsible for displaying each individual banner inside the rotator. It looks like this for me:
    <div>
    <?phpif(isset($fields['field_link']) && !empty($fields['field_link']->content)): ?><div class="title"><?phpprint $fields['field_link']->content ?></div><?phpendif; ?>
    <?phpif(isset($fields['field_description']) && !empty($fields['field_description']->content)): ?><divclass="description"><?phpprint $fields['field_description']->content ?></div><?phpendif; ?>
    <?phpprint $fields['field_image']->content ?>
    </div>
    

    As you can see, each banner displays an image, description and link.
    At the same time, the order in which the fields are displayed does not play a big role in my case. "Divas" with the fields "Description" and "Link" are positioned absolutely and "hang" over the image.

    Correspondingly, a CSS file was created in the subject to design all of the above:
    #block-views-front-rotator-block{
      background-color: rgb(40, 40, 40);
      width: 1000px;
      height: 307px;
    }
    #views_slideshow_cycle_main_front_rotator-block{
      position: absolute;
      margin-left: 261px;
    }
    .view-front-rotator{
      border: 4px solid rgb(50, 50, 50);
      border-left:none;
      background-color: rgb(40, 40, 40);
    }
    .view-front-rotator.title{
      position:absolute;
      margin-top: 245px;
      margin-left: 565px;
      padding: 12px;
      background-color: #A61D31;
      border: 5px solid #65111d;
      white-space: nowrap;
    }
    .view-front-rotator.titleA{
      text-decoration:none;
      font-size:1.2em;
      color: white;
    }
    .views_slideshow_main{
      float:right;
      margin-bottom: -3px;
    }
    .views-slideshow-controls-bottom{
      background-color: rgb(40, 40, 40);
      height: 300px;
      position: absolute;
    }
    .views_slideshow_pager_field_item{
      width: 241px;
      padding: 010px;
      line-height: 45px;
      cursor:hand;
      cursor:pointer;
      color: #FFFFFF;
      font-size: 1.1em;
      font-weight: bold;
    }
    .views_slideshow_pager_field_item.active{
      background-color: #A61D31;
      color: white;
    }
    .view-front-rotator.description{
      position:absolute;
      width: 705px;
      background-image: url('images/bt_black_70.png');
      color: white;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 10px;
      font-family: Tahoma;
      font-size: 14px;
    }
    .view-front-rotator.descriptionP:last-child{
      padding-bottom: 0;
      margin-bottom: 0;
    }
    .view-front-rotator.descriptionH2{
      margin-bottom: 0;
      color: #ff3b3b;
    }
    .view-front-rotator.descriptionP{
      margin-top: 5px;
    }
    


    Of the features of CSS-ki, I note only that the background under the description is not a transparent color specified through rgba or a similar method, but a translucent image in png format.
    The bottom line is that this method is the most cross-browser and is supported by IE since version 7. In IE 6 and below, the background under the description will be black, which actually also fits into the design concept.

    Well, that’s the principle. Now you can place the block with the rotator in the desired region of the page and add new banners through the standard materials interface. Sorting will occur according to the weight field available when editing material. You can disable this or that banner simply by removing it from the publication.

    PS The article was written in retrospective style, i.e. having already made a rotator, I remembered how I did it :). In connection with this, or because of the evidence of them for me, I could accidentally omit certain steps. If something does not work out or seems incomprehensible, I am waiting for your questions in the comments to the article.

    Also popular now: