Pop any Article Documentation

The documentation is for Pop any Article version 2.0 and above.

How to install the extension?

After downloading the PopAnyArticle_UNZIP.zip file, UNZIP it. You will be able to see a Documentation folder and two different version of the extensions, one is for Joomla 2.5.x and the other for 3.x. 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 - Pop Any Article. You will be able to see something like the following screenshot.

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.

Plugin Tab

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

Library Settings Tab

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

Plugin Settings

In the plugin settings you can control the different types of closing and opening with the popup speed

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.

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"}{/popart}
Text Button to Article Popup

Shortcode

{popart class="ibtn ibtn-yellow"  text="Button 1" article="284"  popwidth="800px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-red"  text="Button 2" article="283"  popwidth="800px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-green"  text="Button 3" article="285"  popwidth="800px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-orange"  text="Button 4" article="283"  popwidth="800px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-blue"  text="Button 5" article="284"  popwidth="800px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-grey"  text="Button 6" article="285"  popwidth="800px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-violet"  text="Button 7" article="285"  popwidth="800px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-dark-blue"  text="Button 8" article="285"  popwidth="800px" popheight="300px"}{/popart}
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}
{popart class="ibtn ibtn-yellow"  icon="fa-comment" text="Button with Icon 2" article="284"  popwidth="600px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-green"  icon="fa-map-marker" text="Button with Icon 3" article="283"  popwidth="500px" popheight="300px"}{/popart}

Button with Icons to Article Popup

Shortcode

{popart class="ibtn ibtn-blue"  icon="fa-facebook"  article="285"  popwidth="1100px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-red"  icon="fa-home"  article="285"  popwidth="1000px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-grey"  icon="fa-cog"  article="285"  popwidth="900px" popheight="300px"}{/popart}
{popart class="ibtn ibtn-green"  icon="fa-pencil"  article="285"  popwidth="900px" popheight="300px"}{/popart}
Icons to Article Popup

Shortcode

{popart icon="fa-search"  article="285"  popwidth="1100px" popheight="300px"}{/popart}
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}
{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}
{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}
{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"}{/popart}
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}
{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}
{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}
{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"}{/popart}
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"}{/popart}

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.

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