Creating a Responsive Image Slideshow

In this video, we will create some Featured Content, and we'll also setup a slideshow to cycle through our images, while at the same time responding to the window size.

Create some content

Go to "Add content => Featured Content"
Title: Fire Truck!
Featured Image: (choose a picture)

Now, theoretically, if we scale down the window, the image should resize its self at our specified breakpoints. And sure enough, it does.
One thing you'll notice, though, is that my theme isn't responding correctly, for some reason, in Corolla, you actually need to save the theme settings before everything works as expected. So, I'll jump over to the theme settings tab, and just click "Save" at the bottom. Now we can go back to our content and refresh… And now everything works exactly as we expect it to!

Create the Featured Content View

Ok, so, like I said in an earlier video, I actually want to put this image in the sidebar, and I'm going to create a slideshow that will automatically cycle through a few of these images.

Download and enable modules

So, first, I'm going to install and enable Views and Views Slideshow. And because I'm going to use the Views Slideshow Cycle module that comes with Views Slideshow, I also need to download the Libraries module. Then we'll enable: Views, Views UI, Views Slideshow, Views Slideshow Cycle, Libraries.

Create the view

Ok, let's create the view!

Go to "Structure => Views => Add new view"
View name: Featured Content
Description: Featured Content will be displayed in a "Featured Content" block.
Show: Content
Of type: Featured Content
Create a block
Display format: Slideshow of fields
(Continue and edit)
Remove field: Title
Add field: Content: Featured Image
(Don't create a label)
Image style: featured_content_smartport

Click on the Format "Settings"
(You'll notice that in order to use the "Cycle" slideshow type, we need to download the javascript library.)
- Open the link in a new window
- Click "Download the Cycle Plugin
- Right click on "Cycle Plugin" and choose "Save link as" (or whatever it says for your browser)
- Navigate to sites/all and create a folder "libraries", then, inside the libraries folder, create another one called jquery.cycle
- Save the file into the jquery.cycle folder (so, the file you downloaded is at "sites/all/libraries/jquery.cycle/jquery.cycle.all.js")
Now, if we go back, click cancel, and then click on "Settings" again.
The error message is gone, and we can configure things here as we please.

I'm actually going to leave everything at the defaults.
And that's all I'm going to do for now, so I'll just save the view.

Add block to sidebar

Now, we'll add the block to the sidebar.

Go to "Structure => Blocks"
Add the block "View: Featured Content" to "Sidebar first" (and I'm going to move it to the top of the list, so that it shows up at the top of the sidebar.)

Now, when we go home, we see our image in the "Featured Content" Block in the sidebar. And as we scale the page, our image adjusts at our breakpoints. And just to demonstrate what it looks like with two sidebars, I'm going to move the User login, Search form and Navigation blocks to "Sidebar second".

So you can see on a tablet in portrait mode, and a smartphone in landscape the sidebars are side-by-side below the content. And on a smartphone in portrait mode, the sidebars are stacked.

Create some more content

Ok, now to see a responsive slideshow in action, we need to add at least one more photo.

Go to "Add content => Featured Content"
Title: Boat Ride!
Featured Image: (choose a picture)

Now when we go home and refresh, we see our slideshow in action. If we scale the window, the slideshow scales too. And even on a tablet or smartphone, the images are scaled to the correct sizes!