Skip to main content

How to add a slider to your Drupal Website/ Blog

Views Slideshow module is very handy to display any images you want. In this tutorial, we are going to create a slideshow of all my articles.

Installation

We start by downloading the Views Slideshow module by copying the link of the tar.gz file and then downloading it from our terminal.
wget https://ftp.drupal.org/files/projects/views_slideshow-8.x-4.6.tar.gz

Extract the contents of the file.

tar -xvzf views_slideshow-8.x-4.6.tar.gz

-x Extracts to disk from the archive.
-v Produces verbose output i.e. show progress and file names while extracting files.
-z Uncompresses the resulting archive with gzip command.
-f Read the archive from the mentioned file

Next, for Drupal to recognise the module so that we are able to download it, we move the module to the module subdirectory of Drupal.

mv views_slideshow /var/www/html/drupal/modules

We can now install the module so that we are able to use from our local website. Heading over to localhost/drupal/admin/modules, we should then be able to select the module and then click on "Install new module."


Configuration

From localhost/drupal/admin/structure/views, we add a new view.


Name the view and the block whatever name you wish but it is important that the block configuration looks like this: Slideshow of fields.




Next, edit the Slideshow view you just created.



Click Add next to Fields section and add an Image field.



We should now have more options such as the image size, but we will leave it like that.

Adding the Slideshow block to our website

In localhost/drupal/admin/structure/block, we can add the block anywhere. I decided to add it to my Sidebar.


Not yet done... let's not forget Jquery ;)


Go to http://malsup.com/jquery/cycle/  and then click on Cycle Plugin.


Click on Download the Cycle Plugin



A text file should appear, we should then copy all of the text to our clipboard.


We should now paste all this code to /var/www/html/drupal/libraries/jquery.cycle/jquery.cycle.all.js. To do this, run

sudo nano /var/www/html/drupal/libraries/jquery.cycle/jquery.cycle.all.js

and paste the code.

Last step, we should now clean Drupal caches:



Here our slideshow module go. 😆


Comments

Popular posts from this blog

How i installed Drupal 8 on Ubuntu 16.04

Drupal 7 or Drupal 8? With some research, I had an idea on which Drupal version to opt for. I got to know that D7 is more documented and actually has more modules than D8 whereas D8 is more user-friendly with improved editing flexibility but with some modules not ported yet. Finally, I decided to give a chance to the latest Drupal version. As a beginner, I do not think I will need to work with advanced modules. Therefore in this step by step document, we will be installing Drupal 8!
Step 1: Make sure everything is up to date First, I made sure all of my system packages are up to date by running the following commands. Using sudo su was very useful for not to waste time entering the same password again and again.
sudo su
sudo apt-get update
sudo apt-get upgrade
Step 2: Install LAMP(Linux, Apache, Mysql, Php) Using Tasksel allowed me to install all packages LAMP server contain. During the process, I had to enter a password for Mysql. This password was found to be needed later on. Commands:
su…

IETF 102 - Implementing TLSv1.3 to Nagios Remote Plugin Executor (NRPE)

Hey there, welcome back to another blog post. In this one, I will document my experience in implementing TLSv1.3 to Nagios Remote Plugin Executor (NRPE) for the IETF 102 Hackathon. Rahul and I paired up for this task. In the last hackathon, he implemented TLS 1.3 in the check_http Nagios plugin (PR#368) and was quite familiar with Nagios already.
What are Nagios and NRPE? In short, Nagios monitors systems, networks and infrastructure. It alerts users when things go wrong and warn them again when the problem has been resolved. NRPE, as the name tells, allows the user to be able to execute Nagios Plugins remotely.


The encryption part between check_nrpe and NRPE security protocol could only support up to TLSv1.2.
How we made it? On the first day, we quickly set up our virtual machines, cloning the NRPE repo and going through the code. Everything went fine. The testing part was a little bit more tricky but at the end, we made it through even if Rahul was pretty sick.



Then... we finally go…

Write 3-paragraph essay to explain what is Drupal to grandpa/grandma.

Drupal is surely unknown to the elders. When asking “What is Drupal?” nothing would come to their mind. As grandpa and grandma are not into the tech world, it would be hard for them to understand what Drupal is right away. Let's take this short scenario as an example: Grandpa is a philosopher. He is pretty fed up with all the procedures and investment needed before getting his work published. Instead, grandpa now wants to create a personal blog online. Yet, he thinks that it is out of his reach and gets discouraged. That is when Drupal pops in to tackle grandpa's query.  With Drupal, he can create a website online without much technical knowledge. Basically, Drupal is just like a simple Microsoft word office. The main difference, it gets your content further by publishing your 'document' on the net. Likewise, Drupal allows grandpa to edit, manage and publish his writings. All this, only by accessing the internet. Thus, grandpa can also add pictures, increase text sizes …

Set up Drupal with Docker

In short, Docker is an open source tool that allows the use of containers. Containers consist of predefined lines of code built by the community. Anyone can push his docker file for other people to use. Of course, Docker has a lot more functionality that I just mentioned: mounting volumes, linking containers and so on. In this blog, I will document my little experience on setting up a full Drupal Development Environment!

As usual, Google search engine was my hero. I came up with many tutorials which helped me to get started with Docker.
Step 0: Install Docker At first, this step was confusing... docker commands were known for its long commands. Mainly due to flags. But hopefully, I only had to follow the steps command by command!
Step 1: Set up Drupal Development Environment1.1. To start with, a database was needed for local development. In this command, I run a database from the MariaDB image, put 'drupal' as database password and named the container 'drupaldock'
docker…

Finish Entire Drupal Ladder [Git Basics]

Getting Started with Git At first, Drupal ladder introduced a little Git introduction and the benefits of its usage. It was fascinating. I knew it would help me in the future. There were three links: http://try.github.com/levels/1/challenges/1, http://pcottle.github.com/learnGitBranching, and http://git-scm.com/book. Both three were useful to understand Gits tree structure.
Install Git Coming to Git installation, I had to put some git commands into practice: git show, git log, git branch, git status among others. As it was something new to me, I took some time to grasp all the commands. Its installation was pretty easy; I only had to follow Drupal Ladder's steps.
Write a patch Before starting, I had to learn two of the prerequisites: getting used with the issue queue and Drupal sandbox. I had no problem hosting Drupal sandbox and creating an issue. Coming to the main step, I had to generate and submit a patch. Here are the proposed patch and screenshot. It was fantastic seeing how th…