Basic Drupal 7 website step-by-step: WYSIWYG, News, Menu and Slideshow
So here we go. We are new to Drupal and we want to build our first very simple website. In this tutorial, we assume that you already have Drupal core installed and a basic installation running. You know how to install new modules. We also won't look at how one can theme his website.
Admin menu
First of all, for gain of time during all the project, install the admin menu module. Disable the core Toolbar module. You have now a new drop-down administration menu at the top of your site.
Note that this step is not strictly necessary but just make things easier. Most of the people use this admin menu instead of the normal one.
WYSIWYG
Read moreFlex slider
Flex slider is an image rotator module presenting the advantage of adapting automatically the slides (pictures) size according to the browser window size. You can use the Comparison of Rotator / Slider modules to chose the module that best fits your needs.
Flex slider is not as easy to use as Dynamic display block: Flex slider doesn't provide for a block. Unlike Dynamic display block, Flex slider requires you add a field to the content types you want to add a slide show to, and requires you upload the pictures one by one. Nevertheless, Flex slider provide size adaptation for free, while, as for now (January 2013) one has to pay to get a Dynamic display block theme providing for this functionality. Neither Flex slider nor Dynamic display block provide server-side image adaptation. For this, you can use Views slideshow + Responsive images and styles, as explained there.
The official documentation of Flex slider is a bit cryptic. There are 3 ways to use Flex slider: alone by fields, with the module "Views" or with the module "Views slideshow". We describe here the 1st method.
Read moreSliders (picture rotators)
In this section you'll find documentation for a few sliders (alias "slide show" or "image rotator")
How to actually add in more slideshows image with links
If you want to add in more slideshows into the main page, so rather than the standard 3 slideshow you can add in 4 or 5 this is how you do it.
There are two files you need to alter, by altering these files it will then allow anyone that has access to the Drupal Admin side to freely edit the slideshow without having to go back into the code to alter descriptions etc.
*-------------------------------------------------------------------------*
The first file is located at
theme directory
->business
-->templates
--->page--front.tpl.php
You need to add in another line of code after line 103 (if you are using Windows based system, use something like Notepad++ to view the line of code numbers)
$url4 = theme_get_setting('slide4_url','business');
If you wish to have more than just one extra image just add another after this that follows the same pattern so
$url5 = theme_get_setting('slide5_url','business');
etc
Then after line 111 add:
<a href="<?php print url($url4); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'business') . '/images/slide-image-4.jpg'; ?>"></a>
again if you are wanting to have more than one extra picture just continue the pattern so
:
Field Slideshow
The Field Slideshow module gives the ability to create slideshows from image and media fields.
Requirements
- Libraries API
- Jquery Cycle plugin
- JCarousel
Installing field_slideshow
- Place the entirety of this directory in sites/all/modules/field_slideshow
- Do the same with the Libraries API module
- Create an empty directory at sites/all/libraries
- Download the Jquery Cycle plugin in sites/all/libraries. There should be a file sites/all/libraries/jquery.cycle/jquery.cycle.all.js
- If you want to use the carousel pager download the JCarousel and extract it in libraries like jquery.cycle. Now there should be a file sites/all/libraries/jquery.jcarousel/lib/jquery.jcarousel.js. Note that you should keep all other files that comes from the carousel zip, so the there should be also a jquery.jcarousel/skins/* for instance.
Nivo Slider
The Nivo Slider module provides integration between Drupal and the Nivo Slider jQuery plugin.
Overview
Nivo Slider provides an easy and eye-catching way to showcase featured content. Nivo Slider gives administrators four important tools:
- A simple method of adding slides to the slideshow.
- An administration interface to configure slideshow settings.
- Simple slider positioning using the Drupal block system.
- Integration with the Drupal image system to automatically crop, scale and style slide images.
Module Features
The Nivo Slider module is easy to use and customize. Nivo Slider aims to provide full access to all of the features offered by the Nivo Slider jQuery plugin while integrating the best parts of Drupal, such as Blocks, Image Styles, Permissions and Localization.
Plugin Features
The world's most awesome jQuery slider
The Nivo Slider is world renowned as the most beautiful and easy to use slider on the market. Completely free and totally open source, there literally is no better way to make your website look totally stunning. If you don't believe us, check out the list of features below and you soon will.
Read more