Slideshow of the last articles with Views

Submitted by Nicola Rainiero on 2013-01-01 (last updated on 2013-01-02)

I completed my home page with a slideshow of the last articles, creating a new type of content for this goal and putting inside only the ones I want to do appear in that rotating box. Next I put them in a Views.

In this case I followed this tutorial: HOW TO INSTALL & SETUP VIEWS SLIDESHOW MODULE ON DRUPAL7? found in the Views Slideshow module.

Slideshow effect

The original tutorial doesn't require any explaination, so I only posted my personalizations and settings. In a few word you have to define a new type of content, described by an image, a link and a short description at the original article, Views will think to the rest!

Content for the slideshowTwo example of the slideshow
Content for the slideshow
Two example of the slideshow

CSS Style

I put the View's block in the Featured region (from http://my_site/admin/structure/block), then I added the following code in style.css (my_site/sites/all/themes/my_theme/css/):

#featured {
position: relative;
top: 0px;
height: 250px;
text-align: justify;
font-size: 1.15em;
font-weight: normal;
padding: 0px;
margin: 0px;
/* background: #ffffff; */ /* #8ac6ea; */ /* #f0f0f0; */
/* background: url(../images/cloud_sfondo.png) no-repeat center transparent; */
/* background: rgba(30, 50, 10, 0.08); */
/* border-top: 1px solid #e7e7e7;
border-bottom: 1px solid #e7e7e7; */
/* text-shadow: -2px -2px #ffc332; */
}

#featured img {
float: left; /* LTR */
margin: 0px;
padding: 5px 5px 5px 5px;
border:1px solid #FFF;
background-color:#FFF;
-moz-box-shadow:0 0 7px #FFF;
-webkit-box-shadow:0 0 7px #FFF;
}

#featured .field-content img:hover {
float: left; /* LTR */
margin: 0px;
padding: 5px 5px 5px 5px;
border:1px solid #FFF;
background-color:#FFF;
-moz-box-shadow:0 0 7px #FFF;
-webkit-box-shadow:0 0 7px #FFF;
}

#featured img:hover {
border:1px solid #0b3d5b;
background-color:#0b3d5b;
-moz-box-shadow:0 0 7px #333;
-webkit-box-shadow:0 0 7px #333;
}

#featured a {
font-size: 1.5em;
padding: 10px 0px 10px 10px;
}

#featured p {
padding: 0px 0px 0px 10px;
}

.titolone {
margin-top: 50px;
}

I put below two useful pictures to show you my settings, and the export_banner_slideshow.txt that contains my settings (you can import in your Drupal site, it is sufficient to click in the import button in the Views menu page and to Paste view code here, but check the incompatibilities!).




Left side
Right side



Related Content:

Nicola Rainiero

A civil geotechnical engineer with the ambition to facilitate own work with free software for a knowledge and collective sharing. Also, I deal with green energy and in particular shallow geothermal energy. I have always been involved in web design and 3D modelling.

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.