Easy Image Overlay

Installation

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. Installation of the incorrect file may give you errors.

• For Joomla 3.x.x install: plg_sys_imageoverlay3.x_vX.x.zip

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

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

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.

Plugin Settings

• Include jQuery File : Incase you see that the link and the image for the overlay shows up on the frontend but when you click on it the overlay doesn't appear, then try to change it to body instead of head.
• Open URL In : Set it to New Tab if you want to open it in new tab, else set it to Same Window.
• Load FontAwesome Icons: Set it to Yes if you want to use icons for text and images for the buttons or image overlay. You can also set it to No if font awesome is already loading into your website though your template or any other extension that you are using. You can check it by going to the source code in browser and searching for the word "font-awesome".
• Extra CSS Style: You can add extra CSS styles and classs directly into the plugin parameters. The class can then be used into image overlay tags

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

Option for Image and Overlay

Other Options

Predefined Classes

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.

Troubeshooting

• If the overlay doesn't open appear, the go to General Settings of the plugin parameters and set the jQuery file to body instead of head.
• Check throughly that you have Enabled the plugin.
• If any cache plugin is activated try to clear it once after you make the changes to the plugin parameter settings or shortcode