Slideshow Region

This slideshow has been developed and styled specifically for TB Anis.

Info Required Modules: Views, Views Slideshow

A. Add new field to article

The slideshow uses images from articles, but the images for the slideshow have different styles from images for article content. Therefore, a new image field is added to allow you upload properly images for the slideshow.

Step 1 Go to Structure > Content Type.

Step 2 In Article row, click "manage fields" link, Under "Add new field", set following properties:

Step 3 Click "Save" button, then click "Save field settings" button. New window is opened, set following properties:

Step 4 Go to "Manage display" tab, In the field "Slideshow Image", set following properties:

Step 5 Click "Save" button.

B. Create Image style

Step 1 Go to Configuration

Step 2 In MEDIA area > Image styles, click "Add style" link following properties:

Step 3 Click "Create new style" button.

Step 4 Under Effect, Select Crop effect

Step 5 Click Add button > New popup is opened, Set following properties:

Step 6 Click "Add effect" button.

C. Create view

Step 1 Go to Structure > Views > Add new view, Set following properties:

Creat slideshow view

Step 2 Click "Continue & edit" button. Set following properties:

Creat slideshow view

Step 3 In Format area, Set following properties:

Creat slideshow view

Step 4 In Content: Body , set following properties:

Field setting

Step 5 In Content: Slideshow Image, set following properties:

Content: slideshow setting

Step 6 In FIELDS area, click the arrow next to add link and select rearrange. Rearrange fields as following order:

  • Content: Slideshow Image
  • Content: Tile
  • Content: Body

D. Create articles with slideshow images.

Step 1 Go to Content > Click "Add content" link > Choose Article

Step 2 Add an article with slideshow images

Step 3 Repeat steps 1-4 to add several articles

E. Assign Slideshow block

Step 1 Go to Structure > Blocks

Step 2 Find View: Slideshow and click configure link

Step 3 Enter <none> to Block title

Step 4 At REGION SETTINGS, assign this block to Slideshow region

Step 6 Click "Save block" button