Website hosting

Create Drupal 7 Slide Show Using Views Slideshow Modules

  • Posted on: 12 November 2014
  • By: Zhijun Chen

I've been building Drupal websites during my spare time recently. One of the common features in modern sites is a home page slideshow.
There are a few ways to achieve this in Drupal. In this tutorial I will be using Views Slideshow module together with Views module.

  • Install modules and libraries

Download the following modules, install and enable the related modules via admin modules interface.

  1. Views
  2. jQuery Update
  3. Views slideshow
  4. Ctools
  5. Libraries API

Download jQuery Cycle plugin and install it by placing the js file inside jquery.cycle directory under sites/all/libraries.

  • Optional: Apply patch for customized navigation texts

By default the Views slideshow module does not offer customized navigation texts, only "previous" and "next" available for paging.
In my case I would like to use "<" and ">" as navigation buttons and style them afterwards simply because I prefer CSS3 to images. :)
In order to achieve this you need to apply the patch from this thread.
Once the patch is applied, add the following code to theme's template.php file (replace THEME with your theme name):

 function THEME_preprocess_views_slideshow_controls_text_previous(&$vars) {
  $vars['previous_text'] = '<';
}

/**
 * Implements template_preprocess_views_slideshow_controls_text_next().
 */
function THEME_preprocess_views_slideshow_controls_text_next(&$vars) {
  $vars['next_text'] = '>';
}

/**
 * Implements template_preprocess_views_slideshow_controls_text_next().
 */
function THEME_preprocess_views_slideshow_controls_text_pause(&$vars) {
  $vars['start_text'] = '';
}

 

  • Create content type

Next step we need to add a content type for slide pages. Add a content type by navigating to Structure -> Content types -> Add content types.
Here is an example content type I created:

  • Create contents

Once the content type is created, we can create some contents for slideshow by navigating to Content -> Add Content -> [Your content type]

  • Create slideview

After contents are created, we finally reach the last step: create the view.
Navigate to Structure -> Views -> Add new view. Select the display format to be Slideview as shown in the following:

Edit the view to include all the fields in the slideview, for example:

You can configure the Slideview by clicking on the settings link on the right, here you can choose the effect, and add pager:

Host Your Own Site On Your Own Home Server

  • Posted on: 31 January 2013
  • By: Zhijun Chen

Recently I just purchased an HP server and host my own blog site on it. Here are the main steps I went through to achieve a low cost solution.

* Set Up The Server

A quick way to set up your home server to serve a web site is to install Apache HTTP Server.

Under Ubuntu system, you can install the package using the following command:

sudo apt-get install apache2

Using default configuration, when you open http://localhost/, you should be able to see the following page:

 

 

 

 

 

 

 

For more configurations please refer to Apache HTTP Server Documentation

* Choose a Dynamic DNS Service

If you are hosting the site inside your network where the home router acts as gateway, you will need Dynamic DNS Service because your router's external IP address might change over time.

Dynamic DNS or DDNS is a method of updating, in real time, a DNS to point to a changing IP address on the Internet. This is used to provide a persistent domain name for a resource  that may change location on the network.

Refer to Dynamic DNS Service Provider List for available Dynamic DNS Services.

I had to choose Dyndns.org because it is the only DDNS supported by Sky router, which is a bit awkward...If you choose this service, you can try out Dyndns Pro free first and opt out after 14 days. The basic free version will give you one hostname which is enough.

It is quite easy to register, select one of the free hostname and follow the steps. On the hostname page type in your router's current public IP address which can be obtained from your router's configuration site. Of course you can select to host your own domain and pay annual fee.

* Set Up Home Router

For home router, we need to configure DDNS Service and forward port to the server. Again I will use Sky router for illustration.

Navigate to the router home page and select Security tab, you will need to login as administrator (default username and password are admin and sky). Click on Services and add an custom service for port 80 as shown in the following. 

 

 

 

 

 

 

 

 

 

 

Save the service and click on Firewall Rules. Under Inbound rules add new rule for Apache service:

 
 
 
 
 
 
 
 
 
 
 

 

Save the inbound rule, type the router's external IP address in the browser and you should be able to see the apache page.

Navigate to DDNS menu under Advanced, tick use dynamic dns service checkbox, select the ddns service and type in credentials:

 

 

 

 

 

 

 

 

 

 

 

Click on show status and you should see successful message. Type in DDNS hostname in the browser and you should be able to see the apache page.

* Register domain

 Register your domain on your preferred provider. I use Godaddy.com. Follow the registration procedure and you should get an email confirmation from the provider notifying that your domain is registered.

* Set CName of Domain DNS Server

The last step would be editing your CName of DNS Server to point to your DDNS address. For instance, if you register example.co.uk, and you want to use www.example.co.uk as your site address. Under CName you should add host "www" pointing to your DDNS hostname.

After all the configuration you should be able to view your site. It's not a pretty solution but it works if you don't want to pay extra money to use your own domain as DDNS hostname. :)