Joomla Extensions, Components, Modules, Plugins

Documentation of Complete Image Styles

Joomla Installation

  1. Download Complete Image Styles.
  2. In the Joomla control panel select: "Extensions" > "Extension Manager".
  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.)

 

Joomla 5

In case of using Complete Image Styles in Joomla 5, please enable the plugin first and then you will be able to open the panels for the styles.

 

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:
  • If you change theme then any customization you have done will be lost and the next time you select the same theme you have to customize it again.
  • Some styles can't work together. It is better to add them one by one and check if you like the result.

 

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:

Plugin Parameters

Plugin Parameters

 

Parameters

Complete Image Styles has the following parameters for each style:

  • Comment: Write a comment for the style (for example where you apply it).
  • Enabled: Set if the specific style is enabled or not.
  • Class (Simple User): The default class name for this style.
  • CSS Selectors (Advanced User): The css selectors (type selectors, attribute selectors, ID selectors or pseudo-classes) to apply this style seperated by commas (,). Example: div#gallery img, img.news
  • Border
    • Normal: Enable or disable the border style. [The style will be visible all the time.]
      • Size: The size of the border in pixels.
      • Color: The color of the border. Default value: #000000
      • Opacity: The opacity of the shadow. Allowed values: All decimal values from 0 to 1. Default value: 0.7
      • Style: The style of the border.
    • Hover: Enable or disable the border style. [The style will be visible when mouse is over the image.]
      • Size: The size of the border in pixels.
      • Color: The color of the border. Default value: #000000
      • Opacity: The opacity of the shadow. Allowed values: All decimal values from 0 to 1. Default value: 0.7
      • Style: The style of the border.
  • Cutout
    • Normal: Enable or disable the cutout style. [The style will be visible all the time.]
      • Size: The size of the cutout in pixels. Default value: 5
    • Hover: Enable or disable the cutout style. [The style will be visible when mouse is over the image.]
      • Size: The size of the cutout in pixels. Default value: 5
  • Curled Corners
    • Normal: Enable or disable the curled corners style. [The style will be visible all the time.]
  • Double Outlined
    • Normal: Enable or disable the double outlined style. [The style will be visible all the time.]
      • Inner Color: The color of the inner outline. Example: #FFFFFF
      • Inner Size: The size of the inner outline in pixels. Example: 5
      • Inner Opacity: The opacity of the inner outline. Values: 0 - 1. Example: 0.5
      • Outer Color: The color of the outer outline. Example: #000000
      • Outer Size: The size of the outer outline in pixels. Example: 1
      • Outer Opacity: The opacity of the inner outline. Values: 0 - 1. Example: 0.5
    • Hover: Enable or disable the double outlined style. [The style will be visible when mouse is over the image.]
      • Inner Color: The color of the inner outline. Example: #FFFFFF
      • Inner Size: The size of the inner outline in pixels. Example: 5
      • Inner Opacity: The opacity of the inner outline. Values: 0 - 1. Example: 0.5
      • Outer Color: The color of the outer outline. Example: #000000
      • Outer Size: The size of the outer outline in pixels. Example: 1
      • Outer Opacity: The opacity of the inner outline. Values: 0 - 1. Example: 0.5
  • Embossed
    • Normal: Enable or disable the embossed style. [The style will be visible all the time.]
      • Size: The size of the emboss in pixels. Default value: 5
    • Hover: Enable or disable the embossed style. [The style will be visible when mouse is over the image.]
      • Size: The size of the emboss in pixels. Default value: 10
  • External Caption
    • Normal: Enable or disable the external caption style. [The style will be visible all the time.]
      • Background Color: The background color. Example: #F6F6F6
      • Font Color: The font color of the caption. Example: #333333
      • Font Size: The font size of the caption in pixels. Example: 12
      • Space: The space arounf the image and the text. Example: 10
  • Float
    • Normal: Enable or disable the float style. [The style will be visible all the time.]
      • Direction: The direction image will float.
  • Glowing
    • Normal: Enable or disable the glowing style. [The style will be visible all the time.]
      • Size: The size of the glow in pixels. Default value: 20. Looks better on dark background.
    • Hover: Enable or disable the glowing style. [The style will be visible when mouse is over the image.]
      • Size: The size of the glow in pixels. Default value: 30. Looks better on dark background.
  • Grayscale
    • Normal: Enable or disable the grayscale style. [The style will be visible only when mouse is not over the image.]
    • Hover: Enable or disable the grayscale style. [The style will be visible only when mouse is over the image.]
  • Horizontal Curve
    • Normal: Enable or disable the horizontal curve style. [The style will be visible all the time.]
      • Size: The size of the shadow in pixels. Default value: 15
  • Internal Caption
    • Normal: Enable or disable the internal caption style. [The style will be visible all the time.]
      • Background Color: The background color. Example: #000000
      • Font Color: The font color of the caption. Example: #FFFFFF
      • Font Size: The font size of the caption in pixels. Example: 10
      • Position: The position of the text according to the image. Values: Top, Bottom
  • Lifted Corners
    • Normal: Enable or disable the lifted corners style. [The style will be visible all the time.]
  • Margin Style
    • Normal: Enable or disable the margin style. [The style will be visible all the time.]
      • Top Size: The size of the top margin in pixels. (This will override the image margin defined in the editor.)
      • Right Size: The size of the right margin in pixels. (This will override the image margin defined in the editor.)
      • Bottom Size: The size of the bottom margin in pixels. (This will override the image margin defined in the editor.)
      • Left Size: The size of the left margin in pixels. (This will override the image margin defined in the editor.)
    • Hover: Enable or disable the margin style. [The style will be visible when mouse is over the image.]
      • Top Size: The size of the top margin in pixels. (This will override the image margin defined in the editor.)
      • Right Size: The size of the right margin in pixels. (This will override the image margin defined in the editor.)
      • Bottom Size: The size of the bottom margin in pixels. (This will override the image margin defined in the editor.)
      • Left Size: The size of the left margin in pixels. (This will override the image margin defined in the editor.)
  • Opacity
    • Normal: Enable or disable the opacity style. [The style will be visible all the time.]
      • Size: The amount of the opacity. Decimal 0 - 1. Default value: 0.7
    • Hover: Enable or disable the opacity style. [The style will be visible when mouse is over the image.]
      • Size: The amount of the opacity. Decimal 0 - 1. Default value: 1
  • Perspective
    • Normal: Enable or disable the perspective style. [The style will be visible all the time.]
      • Direction: The direction of the perspective.
  • Pop
    • Normal: Enable or disable the pop style. [The style will be visible all the time.]
      • Size: The size of the pop in pixels. Default value: 8
  • Raised Box
    • Normal: Enable or disable the raised box style. [The style will be visible all the time.]
      • Size: The size of the shadow in pixels. Default value: 15
    • Hover: Enable or disable the raised box style. [The style will be visible when mouse is over the image.]
      • Size: The size of the shadow in pixels. Default value: 25
  • Reflection
    • Normal: Enable or disable the reflection style. [The style will be visible all the time.]
      • Size: The size of the reflection in pixels. Default value: 30.
      • Color: This color must be the same with the color of the background behind the image. Default value: #FFFFFF
  • Rotation
    • Normal: Enable or disable the rotation style. [The style will be visible all the time.]
      • Size: The size of the rotation in degrees. Positive integer for right direction, negative integer for left direction. Default value: -3
      • On Hover: Apply style when cursor is over the image.
    • Hover: Enable or disable the rotation style. [The style will be visible when mouse is over the image.]
      • Size: The size of the rotation in degrees. Positive integer for right direction, negative integer for left direction. Default value: 3
      • On Hover: Apply style when cursor is over the image.
  • Rounded Corners
    • Normal: Enable or disable the rounded corners style. [The style will be visible all the time.]
      • Size: The size in pixels of the rounded corners. Set it to zero (0) for square corners. Default value: 20
    • Hover: Enable or disable the rounded corners style. [The style will be visible when mouse is over the image.]
      • Size: The size in pixels of the rounded corners. Set it to zero (0) for square corners. Default value: 30
  • Round Image
    • Normal: Enable or disable the round image style. [The style will be visible all the time.] Images must have equal width and height to become circle and not oval.
    • Hover: Enable or disable the round image style. [The style will be visible when mouse is over the image.] Images must have equal width and height to become circle and not oval.
  • Scale
    • Normal: Enable or disable the scale style. [The style will be visible all the time.]
      • Size: The size of the scale. 1 is like 100% of the actual size. 0.5 is like 50% smaller. 1.5 is like 50% bigger. Default value: 1
    • Hover: Enable or disable the scale style. [The style will be visible when mouse is over the image.]
      • Size: The size of the scale. 1 is like 100% of the actual size. 0.5 is like 50% smaller. 1.5 is like 50% bigger. Default value: 1.05
  • Shadow
    • Normal: Enable or disable the shadow style. [The style will be visible all the time.]
      • Size: The size of the shadow in pixels. Set it to zero (0) for no shadow. Default value: 10
      • Color: The color of the shadow. Default value: #333333
      • Opacity: The opacity of the shadow. Allowed values: All decimal values from 0 to 1. Default value: 1
    • Hover: Enable or disable the shadow style. [The style will be visible when mouse is over the image.]
      • Size: The size of the shadow in pixels. Set it to zero (0) for no shadow. Default value: 10
      • Color: The color of the shadow. Default value: #333333
      • Opacity: The opacity of the shadow. Allowed values: All decimal values from 0 to 1. Default value: 1
  • Shake
    • Normal: Enable or disable the shake style. [The style will be visible all the time.]
    • Hover: Enable or disable the shake style. [The style will be visible when mouse is over the image.]
  • Size
    • Normal: Enable or disable the size style. [The style will be visible all the time.]
      • Width: The width of the image in pixels. (It will override the value defined in the editor.)
      • Height: The height of the image in pixels. (It will override the value defined in the editor.)
    • Hover: Enable or disable the shadow style. [The style will be visible when mouse is over the image.]
      • Width: The width of the image in pixels. (It will override the value defined in the editor.)
      • Height: The height of the image in pixels. (It will override the value defined in the editor.)
  • Sliding Caption
    • Normal: Enable or disable the sliding caption style. [The style will be visible all the time.]
      • Font Size: The size of the text in pixels. Default value: 11
  • Stretch
    • Enabled: Enable or disable the stretch style. If not enabled then some part of the image may be hidden in order to retain the proportion of the natural width and height. Default value: true
  • SVG
    • Normal: Enable or disable the SVG style. [The style will be visible all the time.]
      • Image: Select the image you like more as part of the style.
  • Tape
    • Enabled: Enable or disable the tape style.
  • Tooltip
    • Hover: Enable or disable the tooltip style. [The style will be visible when mouse is over the image.]
      • Font Size: The size of the text in pixels. Default value: 11
  • Vertical Curve
    • Normal: Enable or disable the vertical curve style. [The style will be visible all the time.]
      • Size: The size of the shadow in pixels. Default value: 15
  • Transition
    • Duration: The duration of the transition in seconds. Default value: 0.5

Automatic Update

In order to be able to easily update the extension through the update system of Joomla, you need:

  • Your membership ID. This can be found in the email you received with the subscription information of this extension or in your profile in this website.
  • An active subscription of this extension. You can see your subscriptions in your profile as well.

Having the above fullfilled, do the following:

  1. Select "Extensions > Plugins".
  2. Locate in the list the line with name "Installer - Complete Image Styles" where the column 'Type' is equal to 'Installer' and click to it.
  3. Fill in your membership id in the parameters, enable the plugin and save.

Now you will be able to update the extension through the Joomla update system. But if you want, you can do it manually by downloading the latest version from this website.

 

Uninstall from Joomla

  1. Select "Extensions > Manage > Manage".
  2. Locate in the list the line with name "Complete Image Styles" where the column 'Type' is equal to 'Package'.
  3. Check the line and click "Uninstall". This will uninstall completely the extension.

 

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.