Mass Top Region

This section will guide you to build a mass top region like the demo site. You will learn how to create and config image styles.

Info Required Modules: Views

Create image style

Step 1 Go to Configuration

Step 2 In MEDIA area, click Image styles link

Step 3 Click Add style

Step 4 Enter into Style name textbox value: img_490_294

Step 5 Click Create new style button

Step 6 Under Effect, Select Scale and Crop effect

Step 7 Click Add button > New popup is opened

Step 8 Set following properties:

  • Width: 490
  • Height: 294

Step 9 Add effect

Create Views

Step 1 Go to Structure > Views > Add new view

Step 2 Set following properties:

  • View name: Fashion today
  • Show: Content
  • Of type: article

Step 3 Uncheck Create a page

Step 4 Check Create a block and set following properties:

  • Display format: Grid
  • Items per page: 3

Step 5 Click Continue & edit button

Step 6 At Format line, click Settings link

Step 7 Set Number of Column to 3

Step 8 Apply

Step 9 At FIELDS area, add following fields:

  • Content: Body
  • Content: Title
  • Content: Image (Appear in node: article)
  • Content: Link

Info Content: Title is added by default.

Step 10 Apply

Step 11 At configuration popup of Content: Body, uncheck Create a label

Step 12 At Review Results, Check "Trim this field to a maximum length" with following settings:

  • Maximum length: 100
  • Check "Field can contain HTML"

Step 13 Apply

Step 14 At configuration popup of Content: Image, uncheck Create a label

Step 15 Set following properties:

  • Formatter: Image
  • Image style: img_490_294
  • Link image to: Content

Step 16 At configuration popup of Content: Link, uncheck Create a label

Step 17 Set Text to display : read more

Step 18 Save

Step 19 Ar FIELDS area, rearrange fields with following orders:

  • Content: Image
  • Content: Title
  • Content: Body
  • Content: Link

Step 20 At FILTER CRITERIA, add following criteria:

  • Content: Publish (Yes)
  • Content: Type (= Article)
  • Content: Image:fid (not empty)

Step 21 Go to Structure > Blocks > Find and assign the block Views: Fashion today to Mass Top region