Pop any Article
Version: 2.9
Installation
After downloading the PopAnyArticle_UNZIP.zip file, UNZIP it. You can find two files. One is the ReadMe.txt file and other is the system plugin file . Choose the file to install. Installation of incorrect file will give you errors.
- For Joomla 3.x and 4.x install : plg_sys_popanyarticle_X.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 installation go to Extensions > Plugin Manager. On the Search Bar type System - Pop Any Article.Now click on the System - Pop any Article to configure the plugin. Upon clicking you will be able to see the following with default "Plugin" Tab opened.
In the plugin tab set status to "Enabled" and do the settings for other tabs
Plugin Settings
In the plugin settings you can control the different types of closing and opening with the popup speed
- Article Title Inside Popup : Set it to Show if you would like to show the title on the top of the Joomla article inside the popup.
- Opening Effect : The effect in which the popup will appear/open/show when the image or text is clicked. We have 3 effects : None, Fade and Elastic.
- Closing Effect : The effect in which the popup will disappear/close/hide when the image or text is clicked. We have 3 effects : None, Fade and Elastic.
- Opening Speed The time in milliseconds which will take the popup to show.
- Closing Speed The time in milliseconds which will take the popup to hide.
- Fit to View When set to ON the popup will be responsive and fit to tablets and mobile devices.
- Font Awesome : 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".
Styling Settings
The popup styling will remain same for all the pop any article popups that you will have in the website. You can't have different popup styling in a single website.
- Background Color : Select the background color of the popup using the color picker. If you don't want any background color then set Background Color Opactiy to 0.
- Background Color Opacity : The opacity ranges from 0 to 1. 1 is opaque and 0 is transparent.
- Background Pattern Style : Choose a pattern from a list of 10 predefined pattern styles. Set to none if you don't want any background patterns.
- Popup Background Color: Option to choose the background color of the popup using color picker.
- Popup Text Color: Choose the color of the text inside the popup.
- Close button Style: Choose close button style from the list of 10 predefined styles.
- Extra CSS Styles: Define the extra CSS styles you would like to add for the plugin.
Plugin Shortcodes
You can add the plugin shortcode inside any joomla article, modules or components depending upon your requirements. Using the plugin you can popup a joomla article upon clicking a text or an image.
General Options
|
Options
|
Example
|
Description
|
|
Text
|
text="Click Here"
|
The text you would like to click for the popup to appear.
|
|
Article
|
article="285"
|
This is a mandatory option which has to be added into the shortcode. 285 is the Joomla artcile which will popup when text or image is clicked.How to know joomla article Id?
|
|
Popup Width
|
popwidth="400px"
|
The maximum width for the popup. The default width will be set to 500px if you don't add the option into the shortcode.
|
|
Popup Height
|
popheight="300px"
|
The maximum height for the popup. The default height will be set to 500px if you don't add the option into the shortcode.
|
Option for Image and Overlay
|
Options
|
Example
|
Description
|
|
Image
|
image="images/corporate/small/1.jpg"
|
The image you would like to click for the popup 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 Text Border
|
overlaytextborder="2"
|
The thickness of border you would like to have around the overlay text. The default it 0.
|
|
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 |
| Red Button | ibtn ibtn-red |
| Orange Button | ibtn ibtn-orange |
| Blue Button | ibtn ibtn-blue |
| Grey Button | ibtn ibtn-grey |
| Green Button | ibtn ibtn-green |
| Yellow Button | ibtn ibtn-yellow |
| Violet Button | ibtn ibtn-violet |
| Dark Blue Button | ibtn ibtn-dark-blue |
| 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
Simple Text to Joomla Article Popup
Shortcode
{popart text="Click Here" article="285"}
Text Button to Article Popup
Shortcode
{popart class="ibtn ibtn-yellow" text="Button 1" article="284" popwidth="800px" popheight="300px"}
{popart class="ibtn ibtn-red" text="Button 2" article="283" popwidth="800px" popheight="300px"}
{popart class="ibtn ibtn-green" text="Button 3" article="285" popwidth="800px" popheight="300px"}
{popart class="ibtn ibtn-orange" text="Button 4" article="283" popwidth="800px" popheight="300px"}
{popart class="ibtn ibtn-blue" text="Button 5" article="284" popwidth="800px" popheight="300px"}
{popart class="ibtn ibtn-grey" text="Button 6" article="285" popwidth="800px" popheight="300px"}
{popart class="ibtn ibtn-violet" text="Button 7" article="285" popwidth="800px" popheight="300px"}
{popart class="ibtn ibtn-dark-blue" text="Button 8" article="285" popwidth="800px" popheight="300px"}
Text Button with Icons to Article Popup
Shortcode
{popart class="ibtn ibtn-red" icon="fa-plus" text="Button with Icon 1" article="285" popwidth="700px" popheight="300px"}
{popart class="ibtn ibtn-yellow" icon="fa-comment" text="Button with Icon 2" article="284" popwidth="600px" popheight="300px"}
{popart class="ibtn ibtn-green" icon="fa-map-marker" text="Button with Icon 3" article="283" popwidth="500px" popheight="300px"}
Button with Icons to Article Popup
Shortcode
{popart class="ibtn ibtn-blue" icon="fa-facebook" article="285" popwidth="1100px" popheight="300px"}
{popart class="ibtn ibtn-red" icon="fa-home" article="285" popwidth="1000px" popheight="300px"}
{popart class="ibtn ibtn-grey" icon="fa-cog" article="285" popwidth="900px" popheight="300px"}
{popart class="ibtn ibtn-green" icon="fa-pencil" article="285" popwidth="900px" popheight="300px"}
Icons to Article Popup
Shortcode
{popart icon="fa-search" article="285" popwidth="1100px" popheight="300px"}
Text Image Overlay on Hover to Article Popup
Shortcode
{popart class="imgmargin-10" alt="Sandra Clarke" overlaytext="Sandra Clarke" overlaybgcolor="#333333" overlaytextborder="2" overlaytextcolor="#fff" overlayopacity="0.7" image="images/corporate/small/1.jpg" article="243" popwidth="500px" popheight="300px"}
{popart class="imgmargin-10" alt="Richard Moore" overlaytext="Richard Moore" overlaybgcolor="#ff5555" overlaytextcolor="#fff" overlayopacity="0.7" image="images/corporate/small/2.jpg" article="242" popwidth="500px" popheight="300px"}
{popart class="imgmargin-10" alt="Stephane Bernard" icon="fa-user" overlaytext="Stephane" overlaybgcolor="#2BBD68" overlaytextborder="2" overlaytextcolor="#fff" overlayopacity="0.7" image="images/corporate/small/3.jpg" article="244" popwidth="500px" popheight="300px"}
{popart class="imgmargin-10" alt="Steve Martin"icon="fa-comment" overlayfontsize="18px" overlaybgcolor="#F2C922" overlaytextborder="2" overlaytextcolor="#fff" overlayopacity="0.7" image="images/corporate/small/4.jpg" article="245" popwidth="500px" popheight="300px"}
Icon Overlay to Article Popup
Shortcode
{popart overlay="true" class="imgmargin-10" icon="fa-info-circle" overlaybgcolor="#000" overlaytextborder="2" overlaytextcolor="#fff" overlayfontsize="16px" overlayopacity="0.7" image="images/corporate/small/3.jpg" article="244" popwidth="500px" popheight="300px"}
{popart overlay="true" class="imgmargin-10" alt="Steve Martin" overlaytext="Steve Martin" overlaybgcolor="#F2C922" overlaytextborder="2" overlaytextcolor="#fff" overlayopacity="0.7" image="images/corporate/small/4.jpg" article="245" popwidth="500px" popheight="300px"}
{popart overlay="true" class="imgmargin-10" alt="Sandra Clarke" overlaytext="Sandra Clarke" overlaybgcolor="#2BBD68" overlaytextcolor="#fff" overlayopacity="0.7" image="images/corporate/small/1.jpg" article="243" popwidth="500px" popheight="300px"}
{popart overlay="true" class="imgmargin-10" icon="fa-plus" alt="Richard Moore" overlaytext="Read More" overlaytextborder="2" overlaybgcolor="#ff5555" overlaytextcolor="#fff" overlayopacity="0.8" image="images/corporate/small/2.jpg" article="242" popwidth="500px" popheight="300px"}
Simple Image to Article Popup
Shortcode
{popart class="imgmargin-10" alt="Sandra Clarke" image="images/corporate/small/1.jpg" article="243" popwidth="500px" popheight="300px"}{/
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.
How to get article id of a joomla article?
Go to the menu Content > Article Manager where you will find the article listed. The right most column is the article id for a joomla article.