Easy Image Overlay Documentation

The documentation is for Easy Image Overy version 1.0 and above.

How to install the extension?

After downloading the EasyImageOverlay_UNZIP.zip file, UNZIP it. You will be able to see a Documentation folder and Joomla 3.x version of the extension. Choose the correct file to install. Installtion of incorrect file may give you errors.

Go to Extensions > Extension Manager and click on the Upload Package File Tab.

Click on browse to choose the correct installtion file and click on "Upload and Install"

After sucessful installtion of the plugin you will get a the following message.

How to Setup?

After installtion go to Extensions > Plugin Manager.

On the Search Bar type System - Easy Image Overlay. You will be able to see something like the following screenshot.

Now click on the System - Easy Image to configure the plugin. Upon clicking you will be able to see the following with default "Plugin" Tab opened.

Plugin Tab

In the plugin tab set status to "Enabled" and do the settings for other tabs

General Settings Tab

Upon clicking on the General Setttings tab you can see the following parameters.

Plugin Shortcodes

You can add the plugin shortcode inside any joomla article, modules or components depending upon your requirements. Using the plugin you can create overlay on an image.

General Options

Options
Example
Description
URL
URL="http://www.infyways.com"
You can enter the URL for the image.

Option for Image and Overlay

Options
Example
Description
Image
image="images/corporate/small/1.jpg"
The image you would like to click for the overlay to appear.
Alt Tags
alt="Image Alt Tag"
The alternative text for the image. Add it for best SEO results.
Overlay Text
overlaytext="Sandra Clarke"
The text you would like to show for image overlay.
Overlay Color
overlaybgcolor="#333333"
The background color you would like to have for image overlay.
Overlay Opacity
overlayopacity="0.7"
The background color opacity you would like to have for image overlay.Ranges from (0.1 to 0.9)
Overlay Text Color
overlaytextcolor="#ffffff"
The color of overlay text. The default is #fffff (white)
Overlay Text Font Size
overlayfontsize="18px"
The font size of overlay text.
Overlay True
overlay="true"
If you want to show the overlay without hovering then you can set overlay to true

Other Options

Options
Example
Description
Icons
icon="fa-info-circle"
The icon you would like to show inside the button or image overlay. Font Awesome Icons Click Here
Class
class="imgmargin-10" You can assign your own class or any of our predefined class.

Predefined Classes

Type Class Name
Align Image to Right imgright
Align Image to Left imgleft
5 pixels Margin Around Image imgmargin-5
10 pixels Margin Around Image imgmargin-10
15 pixels Margin Around Image imgmargin-15
20 pixels Margin Around Image imgmargin-20
25 pixels Margin Around Image imgmargin-25
30 pixels Margin Around Image imgmargin-30
35 pixels Margin Around Image imgmargin-35
40 pixels Margin Around Image imgmargin-40

Examples

Text Image Overlay on Hover

Shortcode

{imageoverlay class="imgmargin-10"  alt="Image Alt Text" overlaytext="You can add a few lines of text with HTML" overlaybgcolor="#333333"  overlaytextcolor="#fff" overlayopacity="0.7" image="images/lb/lp1.jpg" url="http://www.infyways.com" }{/imageoverlay}
{imageoverlay  class="imgmargin-10" alt="Image Alt Text 2" overlaytext="You can have different overlay colors for different images" overlaybgcolor="#ff5555" overlaytextcolor="#fff" overlayopacity="0.7" image="images/lb/lp2.jpg" url="http://www.bing.com" }{/imageoverlay}
{imageoverlay  class="imgmargin-10" alt="Alt Text"  icon="fa-user" overlaytext="You can add alt text for the images, but better SEO" overlaybgcolor="#2BBD68"  overlaytextcolor="#fff" overlayopacity="0.7" image="images/lb/lp3.jpg" url="http://www.facebook.com"}{/imageoverlay}
{imageoverlay  class="imgmargin-10" alt="Alt Text 4" icon="fa-comment" overlayfontsize="60px" overlaybgcolor="#fff"  overlaytextcolor="#000" overlayopacity="0.7" image="images/lb/lp4.jpg" url="http://www.google.com" }{/imageoverlay}
Text Image Overlay

Shortcode

{imageoverlay  overlay="true" class="imgmargin-10" icon="fa-info-circle" overlaybgcolor="#000" overlaytext="You can manage the font size and color"  overlaytextcolor="#fff" overlayfontsize="20px" overlayopacity="0.7" image="images/lb/lp5.jpg" url="http://www.infyways.com" }{/imageoverlay}
{imageoverlay  overlay="true" class="imgmargin-10" alt="Alt Text 6" overlaytext="The background color opacity can be changed" overlaybgcolor="#F2C922" overlaytextcolor="#fff" overlayopacity="0.9" image="images/lb/lp6.jpg"  }{/imageoverlay}
{imageoverlay overlay="true"  class="imgmargin-10"  alt="Alt Text 7" overlaytext="You may or may not link the image to an URL" overlaybgcolor="#2BBD68"  overlaytextcolor="#fff" overlayopacity="0.7" image="images/lb/lp8.jpg" }{/imageoverlay}
{imageoverlay  overlay="true" class="imgmargin-10" icon="fa-plus" alt="Alt text 8" overlaytext="You can set the overlay to show on an image without hover"  overlaybgcolor="#ff5555" overlaytextcolor="#fff" overlayopacity="0.8" image="images/lb/lp9.jpg" url="http://www.wikipedia.com" }{/imageoverlay}{clearfix}

HOW TO?

How to add font awesome icons to buttons and images?

Go to the font awesome website (Font Awesome) and choose the icon you would like to display. For example if you are looking for a info icon, then get the class for it by clicking on it. icon="fa-info" has to be added into the plugin syntax to show info icon.

How to write shortcode faster?

Copy the shortcode directly that you wish to add into your website from the examples above and set the values as per your requirements. We added all the examples above. Other than the above examples not other requirements can be fulfilled by the plugin.

 

Troubleshooting

 


If you face any issues with the setup or writing the shortcode , then please open a Support Ticket at http://support.infyways.com
Go to Top