How-to: How to create a beautiful and functional banner rotator with Drupal 7 tools
Usually I do not write articles on how to use certain ready-made modules to implement some functionality. Much more I am interested in directly creating modules, interacting with the kernel, working with various APIs, etc. "Programmer" and architectural things.
But, this time, due to numerous requests from the workers, I still decided to write one How-to.
So, the talk in this article will go about how to use a ready-made means of Drupal 7 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:
')
I think it is not necessary for a long time to go into the details of why we need banner rotators. They are used most often on the main pages of websites, they serve to draw the user's attention to some information, be it special offers, goods with skids or hot news. Most often they are active and provide the user with the opportunity to follow a certain link for more detailed information.
When I thought about the architecture of the future rotator, I had two options:
It is clear that the advantage of the first option is convenience. Marked a tick material and now he is already in the rotator.
However, the second option seemed to me more logical and more flexible. First of all, it is not necessary to load all 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 in the form of 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 stopped at the second option.
It is assumed that Drupal 7 is installed as standard and all the basic modules of the type Field UI are included.
You also need to download and install the following modules:
You will also need to download and install all dependencies of the above modules, which Drupal will tell you about.
For the banner on the admin / structure / types page we create a new type of material. Each material of this type will be a separate banner.
Next, go to the field management page and create the following fields:
Well, it is assumed that the "Header" field module node added automatically.
Now let's move on to creating a view that will display all of this.
Go here admin / structure / views and add a new view. I called it "Front Rotator" (front_rotator).
Further:
It should end up with something like this:
Now let's move on to setting the format of the Slideshow (the Format panel, the Slideshow item, the Settings link).
Vitoge should have something like this:
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 theme of the site, having found this solution more flexible, fast and convenient.
Two patterns were added to the topic:
view-slideshow.tpl.php - responsible for the general view of the rotator and the display of zones. Was edited as follows:
In this case, the upper zone, in general, you can throw it out. nothing will be displayed in it.
Also, if you plan to do different rotators within the same site, it does 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:
As you can see, each banner displays an image, a description and a link.
In this case, the order of the output fields in my case does not play a big role because “Divas” with the fields “Description” and “Link” are positioned absolutely and “hang” above the image.
Correspondingly, a CSS file was created in the subject for the design of all of the above:
Of the features of CSS, I’ll just note that the background under the description does not use a transparent color specified via rgba or a similar method, but a translucent picture 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 in general also fits in well with the design concept.
Well, the principle and all. Now you can place a block with a rotator in the desired region of the page and add new banners through the standard interface of materials. Sorting will occur in the weight field available when editing the 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 :). Because of this, or because of their obviousness to me, I could accidentally omit certain steps. If something does not work or seems incomprehensible, I am waiting for your questions in the comments to the article.
But, this time, due to numerous requests from the workers, I still decided to write one How-to.
So, the talk in this article will go about how to use a ready-made means of Drupal 7 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 it is not necessary for a long time to go into the details of why we need banner rotators. They are used most often on the main pages of websites, they serve to draw the user's attention to some information, be it special offers, goods with skids or hot news. Most often they are active and provide the user with the opportunity to follow a certain link for more detailed information.
When I thought about the architecture of the future rotator, I had two options:
- The site has a set of materials. It would be possible to assign the required fields for each type of materials, some Boolean field with the name “Put into rotation” and then carry out, through Views, the output of materials marked with this checkmark in the rotator.
- Create a separate type of materials "Banner for the rotator" and display it in the rotator.
It is clear that the advantage of the first option is convenience. Marked a tick material and now he is already in the rotator.
However, the second option seemed to me more logical and more flexible. First of all, it is not necessary to load all 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 in the form of 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 stopped at the second option.
Implementation
Step 1. Modules.
It is assumed that Drupal 7 is installed as standard and all the basic modules of the type Field UI are included.
You also need to download and install the following modules:
- Image. Included as standard, you just need to turn it on.
- Link - drupal.org/project/link
- Weight - drupal.org/project/weight
- Views - drupal.org/project/views . Also do not forget to include the Views UI.
- Views Slideshow - drupal.org/project/views_slideshow
- Views Slideshow: Cycle. Included in the delivery of Views Slideshow, you just need to turn it on.
You will also need to download and install all dependencies of the above modules, which Drupal will tell you about.
Step 2. Create a material type for the banner.
For the banner on the admin / structure / types page we create a new type of material. 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 picture of our banner, so it makes sense to make it mandatory to fill.
- Link (field_link) - type field "Link". Will store a link to go through the banner.
- Description (field_description) is a text field type field. It will store a short annotation for the banner, which will allow you to avoid putting it on the banner in the graphic editor.
Well, it is assumed that the "Header" field module node added automatically.
Step 3. Create a view.
Now let's move on to creating a view that will display all of this.
Go here admin / structure / views and add a new view. I called it "Front Rotator" (front_rotator).
Further:
- Add a block type display.
- Change the format to Slideshow.
- In the column "show" choose Fields.
- In the field column add: Title, Description, Image, Link, Weight.
- We choose as filters: the material should be published (in order to be able to take the banner out of rotation), type of material - choose our type of material for banners.
- As a sort, we specify the sort by the weight of the material.
It should end up with something like this:
Now let's move on to setting the format of the Slideshow (the Format panel, the Slideshow item, the Settings link).
- As “Slideshow Type” choose “Cycle”.
- The Slideshow format provides 2 zones for the placement of navigation elements. Formally, they are called "bottom" and "top." However, this is just a formality. In my case, for example, the lower zone is actually located on the left. So it’s really important to know and take into account only that by planning a template for a rotator, we can operate with two different zones to place navigation elements and manage them through the settings of the view format.
- For our rotator, tick the “Navigator” item in the lower zone, select “Fields” as the “Pager Type” and check the “Header” field in the “Pager fields”.
Vitoge should have 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 theme of the site, having found this solution more flexible, fast and convenient.
Two patterns were added to the topic:
view-slideshow.tpl.php - responsible for the general view of the rotator and the display of zones. Was edited as follows:
<div class="skin-labridge"> <?php if (!empty($top_widget_rendered)): ?> <div class="views-slideshow-controls-top clearfix"> <?php print $top_widget_rendered; ?> </div> <?php endif; ?> <?php print $slideshow; ?> <?php if (!empty($bottom_widget_rendered)): ?> <div class="views-slideshow-controls-bottom clearfix"> <?php print $bottom_widget_rendered; ?> </div> <?php endif; ?> <div class="clearfix"></div> <div class="clear"></div> </div> In this case, the upper zone, in general, you can throw it out. nothing will be displayed in it.
Also, if you plan to do different rotators within the same site, it does 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> <?php if(isset($fields['field_link']) && !empty($fields['field_link']->content)): ?><div class="title"><?php print $fields['field_link']->content ?></div><?php endif; ?> <?php if(isset($fields['field_description']) && !empty($fields['field_description']->content)): ?><div class="description"><?php print $fields['field_description']->content ?></div><?php endif; ?> <?php print $fields['field_image']->content ?> </div> As you can see, each banner displays an image, a description and a link.
In this case, the order of the output fields in my case does not play a big role because “Divas” with the fields “Description” and “Link” are positioned absolutely and “hang” above the image.
Correspondingly, a CSS file was created in the subject for the design of 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 .title A{ 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: 0 10px; 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 .description P:last-child{ padding-bottom: 0; margin-bottom: 0; } .view-front-rotator .description H2{ margin-bottom: 0; color: #ff3b3b; } .view-front-rotator .description P{ margin-top: 5px; } Of the features of CSS, I’ll just note that the background under the description does not use a transparent color specified via rgba or a similar method, but a translucent picture 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 in general also fits in well with the design concept.
Well, the principle and all. Now you can place a block with a rotator in the desired region of the page and add new banners through the standard interface of materials. Sorting will occur in the weight field available when editing the 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 :). Because of this, or because of their obviousness to me, I could accidentally omit certain steps. If something does not work or seems incomprehensible, I am waiting for your questions in the comments to the article.
Source: https://habr.com/ru/post/136377/
All Articles