Skip to main content
Working from scratch, following simplicity

Contents in blocks and pages with Views

While I was thinking on how to put a list of my contents in this site and how to change their pagination and style between home and the other pages, I was in trouble because I didn't know a handy method for Drupal! Views is the solution! I will show you the operations to create a new view and to distribuite contents in blocks and pages.

In my case I want obtain the following result for two different content types (articolo and articolo del blog):

  1. block in home page with last 6 published articles (title and teaser trimmed at 120)
  2. internal page with the last 10 published articles (image with a CSS class, title, teaser trimmed at 400 and link)

These are my choices, but everybody can make their own! Views can offer many possibilities.

Views settings

You can enable the two existent views as I explained in the previous article, but if you want to create a new view, you have to link your browser here: http://my_site/admin/structure/views, and click on Add new view and then select Create a page and Create a block. In this way:

Screen taken by http://mio_sito/admin/structure/views/add
Settings for a new View

Well, at this point you can fix the default settings, select the region where you want to put the new block created, it is sufficient to link here: http://my_site/admin/structure/block.

Giving CSS Style

If you have to assign specific graphic effect in some fields, an easy solution is to apply CSS classes. In my case I put a little image in every article and blog page: on the left in the first and on the right in the second list of contents. In this way:

click on field you want to modify select item called STYLE SETTINGS insert the name of CSS class and save all

Then you have to define the new CSS class in the style sheet of your default theme (in Drupal you find it here: http://my_site/sites/all/themes/mio_tema/css/style.css). I have added the following code for Articoli view:

.immagine_sx { 
float: left;
padding: 15px 15px 20px 0px;

For Blog:

.immagine_dx { 
float: right;
padding: 15px 0px 20px 15px;

I put below two useful pictures to show you my settings, and my export view code here: export_articoli_view.txt (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!)

My settings for Articoli View

Display: Page Display: Block

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.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Sponsored Links

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.