Complete Image Styles v.2.1.5

Full collection of styles for images. Make your images more attractive.
Compatible with Joomla 2.5.x & 3.x.

Joomla 2.5.x Compatible Joomla 3.x Compatible

Plugin Documentation

Joomla Installation

  1. Download Complete Image Styles.
  2. In the Joomla control panel select: "Extensions" > "Extension Manager" for Joomla 2.5.x and 3.x.
  3. In the Upload Package File section click Browse and locate the plugin.
  4. Then click Upload File & Install to upload the file and complete the installation.

How To Use

Below you can read the steps for applying a style (theme) to an image of an article.

  1. Go to the "Plug-in Manager" and click "System - Complete Image Styles" to open it.
  2. Make the following changes to the plugin.
    1. Enable the plugin.
    2. Open and enable "Style 1" (second parameter of the style).
    3. Go below to the "Theme" parameter and select the theme you like. Below the list you can see some live samples. Put the mouse over the images to see the motion effects where available.
    4. Go above to the "Class (Simple User)" parameter and copy the word "cis-style-1".
    5. Save the changes and quit the plug-in administration.
  3. Go to an article that contains an image. Click on the image and press the correct icon in the toolbar of the editor to edit the image.
  4. In the pop-up window go the "Advanced" tab and write "cis-style-1" in the "Classes" field. Delete any other styles that you may have applied to the image. Save the article.
  5. Go to the front-end website and refresh the page with the specific article. (Make sure the cache is not enabled. If yes, then clear it.)

Video Tutorials

Maximize the videos and select high quality to watch them better.

Part 1: Styling the image of an article

Part 2: Modifying a theme

In this example we will see how to add an internal caption to the "Crazy" theme.

Part 3: Creating an image style from scratch

In this example we will see how to create a custom style from scratch.

Important notes:

Configuration

In order to configure Complete Image Styles go to the Joomla control panel and select: Extensions > Plugin Manager. Locate "System - Complete Image Styles" in the list and click it. You can see the parameters of the plugin as below:

Joomla Parameters

Joomla Parameters

Parameters

Complete Image Styles has the following parameters for each style:

Add the Styles as Predefined Choices to JCK Editor

Follow the steps below in order to add the styles of Complete Image Styles as predefined choices in the "Styles" list of JCK Editor.

  1. Assuming that JCK Editor is already installed, go to the Joomla administration and select "Components" > "JCK Manager" > "JCK Editor".
  2. Select the "Advanced" tab and go to the "Edit JCK typography" parameter.
  3. Scroll down the text till you find the line: "/* Images Styles ------*/".
  4. After that line add "img.cis-style-1 { }" without the double quotes (") and save. You can to the same for all the styles that you are using e.g. cis-style-2, cis-style-3 etc.
  5. Go the article, select the image and click to the "Styles" dropdown list. Find and select the option "cis-style-1". Save the article.

Useful Notes

  1. Some styles make look different depending on the size and colors of the image and the web page background.
  2. This plugin requires jQuery 1.7 or newer. It includes option to enable it in case jQuery is not already loaded to your website.
  3. The "Scuttle" theme will look better if the image has same width and height. But there is no need the image to be square. Simply, set the same width and height for the image through the editor. The style will hide some parts of the image in order to keep the natural proportion of the image.

Change Log