Skip to main content
Working from scratch, following simplicity

Slideshow degli ultimi articoli con Views

Per completare la prima pagina del sito ho inserito una vista con la rotazione degli ultimi articoli pubblicati e opportunamente impaginati. Ciò è stato possibile creando un nuovo tipo di contenuto con i soli articoli che volevo far comparire nello slideshow e poi impostando una vista appropriata per il blocco da applicare nella home page.

Ho seguito e leggermente adattato questo fantastico tutorial: HOW TO INSTALL & SETUP VIEWS SLIDESHOW MODULE ON DRUPAL7? trovato nella pagina del modulo Views Slideshow.

Effetto Slideshow

Senza riproporre tutta la guida originale mi limiterò a pubblicare solo le mie personalizzazioni ed impostazioni. In parole povere si tratta di aggiungere un nuovo tipo di contenuto caratterizzato da una immagine, un titolo, un link e una breve descrizione all'articolo originale che si vuole richiamare in prima pagina, a tutto il resto ci pensa poi Views!

Esempio di un contenuro per lo slideshow
Due esempi di come appare lo slideshow
Esempio di un contenuro per lo slideshowDue esempi di come appare lo slideshow

Style CSS

Dal momento che ho inserito il blocco nella regione Featured (da http://mio_sito/admin/structure/block), ho aggiunto questo codice nel file style.css in mio_sito/sites/all/themes/mio_tema/css/ per migliorarne l'impaginazione:

#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;
}

Di seguito ci sono le due immagini con le impostazioni della vista ed il file esportato export_banner_slideshow.txt con tutte le impostazioni (lo si può caricare cliccando sul bottone importa e poi incollandoci il contenuto dentro il box Paste view code here, ma attenzione alle eventuali incompatibilità).




Parte sinistraParte destra

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.

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.
Sponsored Links
Pubblicità

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.