Insert Carousels into your drupal homepage

Forums: 

Welcome to the Slideshow Tutorial!

Here we are going to go through creating slide show content types and effectively displaying them on the frontage of your Drupal Website.

Screenshot of a completed Slide Show

Overview of major steps

  1. Create content type called image_slide
  2. Create media image style
  3. Create the view
  4. Set visible header in <front>
  5. Inject CSS

Modules to enable

  • CSS injector
  • Fields ui
  • Views ui
  • (maybe more if you have them disabled)

Screenshot of an enabled module

Create content type

Lets Create a content type that stores the Image, title and the caption of the slideshow. Goto Structure>Content types>Add content type

Screenshot of the structure menu

Set the following value as the title: 'image_slide'

Screenshot of Name field

next click on save and add fields:

Screenshot of save buttons

Add a new field that will store our image as an image type

Note: if you dont see these options, please go to the modules page and enable the Fields UI module.

Screenshot of image field

Before you save, make sure to click on the Edit after the Machine name and change it to 'field_image_slide'

Screenshot of machine name field

For Accessibility requirements,click on Enable Alt field

Screenshot of image options

Hit Save! Once the image is listed on the list, click on edit

Screenshot of image field

Modify the Body field of the content type and rename it as 'Image Caption', as it will be used as the caption for your slideshows

Screenshot of image_slide settings

Screenshot of image_slide settings

Add Image Style

Goto Media>Image Styles>Add style

Screenshot of configuration menu

Set the name as '1180x600' then click on Create new style.

Screenshot of media style name

Add a new Scale and crop effect and click on Add

Screenshot of scale and crop effect

Set the values as per the image below(Width:'1180' , Height:'600')

Screenshot of width annd height entered

Click on add effect and then click on update style to save your changes

Create View

Goto Structure>Views>Add new view

Note: if you dont see these options, please go to the modules page and enable the Views UI module.

Screenshot of Structure Menu

Set the view name as 'image_slideshow'

Screenshot of view name

And then create a block as per the image below:

with the following values,

Show:'content'

of type: 'image_slide'

sorted by: 'Unsorted'

Uncheck Create a page

Check Create a block

Block title: 'iamr_slideshow'

Display format: 'Bootstrap Carousel' of 'fields'

items per page: '5'

click on Continue & edit 

Screenshot of view settings

Make sure to always save your changes after every modification.

Screenshot of save buttons

Once the view has been created, click on the title and delete any existing title to make it set to none

Screenshot of title field

After that, set the format as Bootstrap Carousal

Screenshot of format fields

and then enter the following inside its settings.

Interval: 'false'

uncheck 'Show navigation'

check 'Show indicators'

click on Apply

Screenshot of block options

Add in the following fields

Content: Title

Content: Image

Content: Body

Screenshot of fields options

Inside the title field, uncheck the Link checkbox

Screenshot of link checkbox

inside the image field set the image style as 1180x600(created by us earlier in this tutorial)

Screenshot of image style list

Screenshot of Carousal settings button

Now go ahead and click on settings for the bootstrap carousel:

Set the following values:

Image: 'image'

Title: 'Content: Title'

Description: 'Body'

Screenshot of Carousal settings

and set the following for Filter Criteria :

Content: Published (Yes)

Content: Type (= image_slide)

Content: Promoted to front page(Yes)

Screenshot of Filter Criteria

Save your view. Now your view is ready to display the slideshow on your website. Lets setup the block settings to make the slideshow display itself on the Front-page of the website:

Block settings:

Goto Structure>blocks

Screenshot of Structure Dropdown

Find the entry, view:image_slideshow

Screenshot of view image_slideshow

and set it to be displayed at the header

Screenshot of dropdown

Go ahead and click on configure, Enter the following class inside CSS classes: (container)

Screenshot of CSS textbox

And set the show block settings as per the image below:

Check 'Only the listed pages'

and enter <front> inside the text area

Screenshot of Options

Now your Slide show should be displaying itself on the Frontpage. now its time to fix the background and the header image visibility.

Adding Custom CSS

Goto Configuration>Development>Css injector>Add

Note: if you dont see this option, please go to the modules page and enable the CSS injector module.

Screenshot of Css injector dropdown

Set the following values:

Friendlt name: 'home_page'

Description: 'home_page'

CSS code in text:

.front .region-navigation { background-color: #fff; } #imagebar { display: none; } 

Screenshot of Css injector options

Set the tracking options as per the image below:

Check 'The listed pages only'

Enter '<front>' inside the text area

Screenshot of Css injector options2

Great! Now your Slideshow should be displayed on the Hompage.