Child pages
  • Images Slider
Skip to end of metadata
Go to start of metadata

 

Extension page: http://ecommerce.aheadworks.com/magento-extensions/image-slider.html


With the Image Slider extension, you don't need to edit your Magento website template for each new image, banner, or advertisement anymore. You get a highly-professional and easy-customizable image rotator which will improve your banner advertising experience. 

 

Installation

1. Backup your web directory and store database.

 Click to view details

You can make backup copies with any tool you find appropriate

If you are going to use the native Magento backup function, navigate to System -> Tools -> Backups and perform System and Database backups

 2. Log in to the Magento backend

 3. Disable compilation

 Click to view details

Navigate to System -> Tools -> Compilation.

If Compiler status is Disabled, you can skip to the next step

If Compiler is enabled, disable it.

IMPORTANT: after the extension is installed, you can enable the compilation again; IT IS CRUCIAL that you use "Run Compilation Process" function, not just "Enable button"

Icon

Installing an extension with the Compilation enabled will result in store downtime.

 4. Flush store cache

 Click to view details

You can flush the store cache in 2 ways:

  • via the backend:

Navigate to System -> Cache Management menu, and click Flush Magento Cache button

  • via filesystem:

On your server, navigate to Magento root folder, then proceed to /var/cache/; delete all the content there.

 5. Download the extension package from your account and extract the downloaded archive

 6. Copy the content of /Step_1/ folder to your store's root directory

If you are using a custom theme,

Icon
 read the instructions here.

The extension comes with 2 design packages: /base/default/ and /rwd/default/ .

In case you are using a custom theme, it is recommended to copy the design files to your current theme's folders. In case there are several themes in use at the same store, the design files must be copied to each of them.

  • Find this folder in the package: /step_1/app/design/frontend/base/default/ ; copy its content to /app/design/frontend/[your_package]/[your_theme]/
  • Find this folder in the package: /step_1/skin/frontend/base/default/ ; copy its content to /skin/frontend/[your_package]/[your_theme]/

 7. Copy the content of /Step_2/ folder to your store's root directory

 8. Flush store cache again; log out from the backend and log in again.

Updating from Image Slider 1.x

If you have any previous version of the Image Slider extension installed, make sure to follow the below instructions before installing Image Slider 2.

  1. Switch off your current Image Slider module via .xml config file
  2. Remove this file from your server: /app/design/frontend/default/default/layout/aw_islider.xml
  3. Remove this folder (with all sub-folders and files) from your server: /app/design/frontend/default/default/template/aw_islider/
  4. Proceed with installing the Image Slider 2




Configuration

Extension Configuration

The extension's general settings screen is located at System -> Configuration -> aheadWorks Extensions -> Image Slider + Video backend page.

General Options section:

  • Enable Click Statistics - enables / disables collecting slides clicks stats.
Icon

If the Click Statistics is enabled, the image URL will be automatically converted to the following format: http://domain.com/awislider/link/out/sid/1/ ; the extension will be able to count the clicks in this case.

Note: the internal stats are only collected for image-type slides. The Video-type slides are not counted.

 

 

Managing Image Sliders

You can manage slider blocks trough CMS -> Manage Image and Video Sliders backend grid. You can add any number of sliders here, each one may have its own settings and content. 

 

Creating / Editing a Slider instance

General tab:

General section:

  • Name - defines the block name
  • Block ID - defines the block internal identifier
  • Status - enables / disables the block
  • Automatic Layout Position - place where block will be automatically located
    • None - if this value is selected, the block must be inserted to the necessary positions manually, as described here.
    • Left Column
    • Right Column
    • Before Content
     
  • Store View - defines the storeview(s) the slider will be displayed at

 

 

Representation section:

  • Auto hide navigation - enables or disables the mode of hiding the navigation elements of the slider;
  • Switch Effect - sets the images switch effect 

    • Icon
       Click to see the list of available representations
      • Simple Slider
      • Fade\Appear
      • Blind up \ Blind down
      • Slide up \ Slide down
      • Jalousie
      • Slide and Blink
      • Random effect for each slider

      Icon

      Jalousie switching effect does not work with the video slides


  • Representation - defines how the slider instance will behave. 2 modes are provided:
    • Responsive - the slider box will be dynamically resized;

      Icon
       How does image resizing work?

      In the Responsive representation mode, the slider box dimensions will be adjusted in accordance with the current size of the parent element. The actual slides will be resized proportionally.

      The slider box width will be inherited from the parent block; the height will be equal to the height of the largest slide.

      Note:

      • The dynamic re-sizing will only work if the parent block the slider is displayed in allows dynamic dimension changes (i.e., the store theme is responsive).
      • A slide (image / video) will never exceed its original dimensions while re-sizing;
      • If a slide size is less than the current slider box dimensions, the element will be centered without any re-sizing.
    • Fixed - the slider box will have the fixed size.

      Icon
       How do I specify the block size?

      In the Fixed representation mode, 2 new options will appear:

      • Width - block width in pixels
      • Height - block height in pixels

  • Animation speed, seconds - defines the period between the slides switches (i.e., the slide display duration);
  • Transition speed, seconds - defines the duration of the slide-to-slide transitions; increase the value for smoother animation;
  • First frame timeout, seconds - sets the delay of the first image switch in seconds;
  • Display Images in Random Order - enables / disables random slides ordering for the current slider instance.

 

 

Google Analytics section:

  • Category - sets the link Category in case GA is in use for clicks tracking; find more details on configuring GA tracking here.
Icon

Only Universal Analytics type is supported (Magento 1.9.1.0+).

 

 

Content tab:

In this tab, you can check all the slides currently assigned to the slider instance.

  • Add Image or VIdeo button allows adding a new slide
  • Total Clicks and Unique Clicks columns show the banner clicks stats collected by the extension; more details can be found here

 

 

Inserting an image

 

Icon
  1. Click Add Image or Video button in the top;
  2. Set the Content Type option to Image;
  3. Specify the necessary options as described below.

 

General Information section:

  • Image Type - define the image source (File Upload / Remote URL);
  • Image - file selector / image URL input field (depending on the Image Type value above);
  • Image Title - sets the title of the image;
  • Status - enables / disables the slide;
  • Date From / To - allow setting the slide displaying period;
  • Sort Order - sets the slide order within the current slider box.
Icon

Notes:

  • Use only images with the same size for best displaying results
  • It's not recommended to use images with transparent areas

 

URL Settings section:

Here you can set the target link a customer will be redirected to after clicking an image.

  • URL - defines the destination URL;
  • Open URL in new window - defines whether a link will open in the current window or in a dedicated window / tab (adds target="_blank" parameter into a link);
  • Add 'No Follow' to URL - prevents the search engine crawlers from indexing the assigned URL (adds rel="nofollow" parameter into a link).

 

Google Analytics section:

  • Value - sets the link Value in case GA is in use for clicks tracking; find more details on configuring GA tracking here.

 

 

 

Inserting a video

Since version 2.0, the Image Slider extension allows embedding videos in the slides (via iframe). The extension can only handle the embedding code from a number of streaming services (listed below), it does not offer any other playback options.

Supported streaming services:

  • Youtube
  • Vimeo
  • Yahoo! Screen
  • DailyMotion
  • vk
Icon
  1. Click Add Image or Video button in the top;
  2. Set the Content Type option to Video;
  3. Specify the necessary options as described below.

 

General Information section:

  • Video URL - requires the embedding link to the video;
  • Status - enables / disables the slide;
  • Date From-To - allow setting the slide displaying period;
  • Sort Order - sets the slide order within the current slider box.


Icon
 Where do I get the video URL from?

You can typically find the embedding code on the streaming service side. Note, the extension only needs the video link, so make sure to strip the html parameters (if there are any) from the URL.

Below, you can find the examples of how the embedding URL look like for each of the supported services:

  • Youtube - http://www.youtube.com/embed/(video code)*
  • Vimeo - http://player.vimeo.com/video/(video code)*
  • Yahoo! Screen - https://screen.yahoo.com/(video code)*.html?format=embed
  • DailyMotion - http://www.dailymotion.com/embed/video/(video code)*
  • vk - https://vk.com/video_ext.php?(video code)*

*Where (video code) should be provided in the format corresponding to the source service


 

 


 

Block showing

 

Block is automatically shown at the defined position if you select some value except none in the Automatic layout position field. If none is selected, the IS block will not be shown automatically. In this case you can insert it into any CMS page or CMS block. Since Magento 1.4, you can do it using the Insert widget button in the WYSIWYG editor. Also you can use one of the constructions listed below to show the IS block.

For inserting block by its ID:

 

 

For inserting block by its increment ID:

 

 

Also the IS block can be inserted via Magento layouts. See examples at the chapter below.

 

Use cases

 

First of all you should create the block in the backend. For example, we have the IS block where Block ID = testblock, Increment ID = 7. Now open the /app/design/frontend/default/default/layout/aw_islider.xml file in editor.

 

Showing IS block at all category pages

 

Insert the following code before enclosing </layout> tag:

 

 

 

Showing the IS block at the Shopping cart page

 

Insert the following code before enclosing </layout> tag:

 

 

 

Showing the IS block at the product page

 

To display the IS block before the content, insert the following code before enclosing </layout> tag:

 

 

To display the IS block in the right column, insert the following code before enclosing </layout> tag:

 


Collecting statistics 

The extension supports 2 methods for counting banner clicks.

  • Internal Click Statistics counters collect the info regarding Total Clicks (the overall number of banner clicks) and the Unique Clicks (the number of clicks from unique visitor).
    To use this function, you just need to enable the correspondent option in the extension settings.The statistics will then be represented in the CMS -> Manage Image and Video Sliders -> Edit Slider -> Content backend tab.

    The Click Statistics can only be collected for Image-type slides. 

 

  • The extension also allows using Google Analytics. To use this option, follow the steps below.
  1. Make sure that Google Analytics is enabled and configured for your store in general. You can enable the analytics in System -> Configuration -> Sales -> Google API -> Google Analytics backend tab.
  2. Specify the Category parameter for the desired slider 
  3. Specify the Value parameter for an image .

 

Icon

NOTE:

  • The statistics are only collected for the Image-type slides. Video slides are not tracked.
  • In the tracking URL, the 'Action' will always be 'click', 'Label' is omitted.
  • There is a certain delay (usually about half an hour) between the actual event (banner click) and the moment the statistics are updated on the Google side.

 

 

Uninstallation

 

If you just need to temporary disable the extension, you can just do the steps 1-5, without deleting the files of the extension.

  • Disable compilation, in case it is enabled.
  • Login to your FTP, navigate to app/etc/modules/
  • Open the file AW_Islider.xml and change the following line:

    to

    Now your Magento is unaware of the existence of this module.

  • Clear the cache under var/cache
  • Make sure that the site is working properly, otherwise roll back the changes and apply to our technical support.
  • If everything works fine, it is safe to delete the files of the extension.
  • To delete the image files, clear /media/aw_islider/ folder at your store.
  • In case you need to clean the database, backup your database and then run the following queries in MySQL: 

     

    Note, if you are using the table with prefixes, you must specify them in all table names. 

    If you are not sure how to do that or expect any troubles with it, please contact your server administrator regarding the matter.
    If you remove the tables as it is described above, you will need to set up all sliders again after the extension is reinstalled.

 

 

Troubleshooting

 

After the extension installation the store gives an error, or blank page, or suggests to start Magento installation procedure. 

Change the owner of the extracted extension files to the web server user and set 775 permissions on them. Clear the store cache and try again.

 There is no aheadWorks extensions under my configuration section, or having the extension tab clicked I get a blank page, or Access Denied error.

Clear the store cache, browser cookies, logout and login again.

I've set up everything correctly, inserted the HTML code but there is nothing on that page.

Clear the store cache, clear your browser cache and domain cookies and refresh the page. 

My configuration changes do not appear on the store.

Clear the store cache, clear your browser cache and domain cookies and refresh the page.

 


You can always find the latest version of the software, full documentation, demos, screenshots and reviews at http://ecommerce.aheadworks.com
License agreement: http://ecommerce.aheadworks.com/LICENSE-M1.txt
Contact us: http://ecommerce.aheadworks.com/contacts/
Copyright © 2015 aheadWorks http://www.aheadworks.com

 

  • No labels