Fotis

Fotis

First of all, make sure you always download the latest version of AllVideos (currently version 4.x).
The following documentation applies to AllVideos version 3.1 or newer.

Installation

AllVideos comes in one unified installer for Joomla versions 1.5, 2.5 & 3.0. After you download the zip file from our homepage or the AllVideos product page, upload and install the plugin by using the Joomla installer. Navigate to:
  • Extensions >> Install/Uninstall (for Joomla 1.5) or
  • Extensions >> Extension Manager (for Joomla 2.5 or newer)
...to install the plugin.

Finally, navigate to Extensions >> Plugin Manager (all Joomla versions) and publish the plugin. To edit the plugin parameters, simply click on its name "AllVideos (by JoomlaWorks)".

Upgrading

Follow the same procedure as above. New files will simply override the old ones upon installation of a newer package.

Simple Options

allvideos-params-in-j25.pngThis is a screenshot of the plugin parameters (screenshot taken from the plugin's latest version in Joomla 1.5 - parameters are identical in other Joomla versions of course). The parameters contain tooltips with more info were necessary. Usually the only things you need to change are the video dimensions.

Custom options per video

Easy, descriptive syntax for media embedding. Use: {formatORprovider}filenameORvideoID{/formatORprovider}
You can also use syntax like: {format/provider}filenameORvideoID|width|height|autoplay{/format/provider}

...where "width" and "height" are the media dimensions in pixels and "autoplay" is enabled using 1 (use 0 to disable it).

For example, a YouTube video with 600x450 dimensions that autoplays on page load would be displayed adding this plugin tag in your Joomla article (or K2 item, or Virtuemart product etc.): { youtube}he73js822|600|450|1{/youtube}

Please note that for providers like YouTube, Vimeo, Dailymotion, Blip.tv, Justin.tv, SoundCloud, Twitvid & yFrog you can also use the entire video page URL instead of just the ID.

MVC Templating

The feature trully setting apart all our plugins from any other Joomla plugin are their MVC architecture, currently available in Joomla for components and modules only. That means you can use HTML and CSS template overrides inside your Joomla template and completely change the way the plugin elements display on your website!

So you can either choose to use the versatile base styling of the plugin or simply override it (both the HTML and CSS code) by copying the plugin's folder /plugins/content/jw_allvideos/tmpl/Classic in Joomla 1.5 or the folder /plugins/content/jw_allvideos/jw_allvideos/tmpl/Classic in Joomla 2.5 or newer TO your Joomla template's /templates/YOURJOOMLATEMPLATE/html/jw_allvideos/ folder (create it if it doesn't exist), as you would with components and modules.

Whatever changes you do from now on within this folder, will completely override the plugin's output, exactly as you would with any other MVC component or module.

The good thing about MVC templating is you don't have to worry about future updates breaking your styling.

Available tags in AllVideos

Below are two tables describing what audio/video formats and video providers are supported by AllVideos.

In the audio/video formats table you can see the type, paths and what Joomla tag to enter within your content items/articles. Please note that if for example you divide your video/audio folder into subfolders, then you need to specify the folder path AFTER the master video/audio folder path.

In plain English this means that if your video exists in images/stories/videos/summer/trip_to_paris.flv and your "Local Video Folder" parameter is set to images/stories, you would simply enter { flv}summer/trip_to_paris{/flv}.


[NOTE: To see the table contents in full, use the scrollbar at the bottom of the post to scroll the table left and right.]

In the video providers table below you can see the provider's name, a sample URL to a video page, what video ID to "extract" and what Joomla tag to enter within your content items/articles.


[NOTE: To see the table contents in full, use the scrollbar at the bottom of the post to scroll the table left and right.]

INSTALLATION

After you download the installer for either Joomla 1.5 or for Joomla 2.5+, use the Joomla installer by navigating to:
  • Extensions >> Install/Uninstall (for Joomla 1.5)
  • Extensions >> Extension Manager (for Joomla 2.5+)
...and upload the zip file.

Finally, navigate to Extensions >> Plugin Manager (in both Joomla 1.5 & 2.5+) and enable/publish the plugin. To edit the plugin parameters, simply click on its name "Simple Image Gallery (by JoomlaWorks)".

REQUIREMENTS

In order for Simple Image Gallery to function properly, please make sure that your server has PHP's GD image library installed (common webhosts have GD installed by default). Additionally, your site must meet all requirements as posed by either Joomla 1.5 or 2.5+.

You also have to make sure that Joomla's /cache folder is writable, in other words, check that the permissions for this folder are 755.

HOW DOES IT WORK?

The concept is simple. You want to add image galleries inside your articles (content items)! By default there is a root folder - it's the "images/stories" folder. Now create a new folder anywhere inside this root folder, for example let's say this folder is summer_trip_to_italy and upload there all your images. Go ahead and create a new content item (or open an existing one) and simply insert {igallery}summer_trip_to_italy{/gallery}, where you want your image gallery to appear inside your text. It doesn't have to be at the end of your article, it can be anywhere you insert it inside your content item. That's it! Fire up your favorite browser, navigate to the above content item et voila! An image gallery inside your content item!

If you want to create a gallery from subfolders inside the ROOT folder, simply add them like this: {igallery}folder/subfolder/othersubfolder{/gallery}. In other words, write the path to your target folder without any slashes at the beginning or the end of your path (it's added auto-magically!).

Simple Image Gallery utilizes the jQuery based "fancyBox" modal script by fancyApps, which is a more modern implentation of the famous "Lightbox" script. "fancyBox" generates the nice popups that display the original images in a gallery. Since fancyBox requires jQuery to work, if you don't already load jQuery into your Joomla site, the plugin can load it for you (and you can even select which version of jQuery to use). The plugin will not load a copy of the jQuery library in Joomla 3.x as that is already loaded by default in Joomla.

USING SIMPLE IMAGE GALLERY IN K2

K2 is able to display all "content" plugins that are used in its content boxes (introtext/fulltext). Just like any other plugin, you can Simple Image Gallery's {igallery}...{/gallery} tags within K2's introtext or fulltext blocks. If you wish to fully utilize the K2 Image Gallery options, you need to upgrade to Simple Image Gallery Pro (which offers many more features compared to this free version).

MVC TEMPLATING: THE POWER TO CUSTOMIZE YOUR GALLERY LAYOUT

The feature trully setting apart most JoomlaWorks plugins from other similar Joomla plugins is their MVC architecture, currently available in Joomla for components and modules only. That means you can use HTML and CSS template overrides inside your Joomla template and completely change the way the plugin elements display on your website!

So you can either choose to use the default gallery styling of the plugin (called "Classic") or simply override it (both the HTML and CSS code) by copying the plugin's /plugins/content/jw_sig/jw_sig/tmpl folder within your Joomla template's /templates/YOURJOOMLATEMPLATE/html folder, as you would with components and modules. Then simply rename the folder /templates/YOURJOOMLATEMPLATE/html/tmpl to /templates/YOURJOOMLATEMPLATE/html/jw_sig. Whatever changes you do from now on within this folder and more specifically under the subfolder named "Classic", they will completely override the plugin's output, exactly as you would with any other MVC component or module.

The above instructions use Joomla 2.5 or newer as en example. If you use Joomla 1.5, then the template files are located in the folder: /plugins/content/jw_sig/tmpl

Simple Image Gallery
uses one override template (Classic) only for displaying your galleries. You can override all files or selected files from the template folder, as you would with any other MVC component or module, with the better exception that Simple Image Gallery overrides CSS files as well! That means if you copy just the main template file into your /templates/YOURJOOMLATEMPLATE/html/jw_sig, then the plugin will override that file but not the CSS files!

Below you can see the file structure of the /tmpl folder inside the plugin:
/Classic/
|-- default.php
|-- css
|-- template.css
|-- images
|-- (contains image files currently used in the CSS files or inline)

If you maintain this structure within /templates/YOURJOOMLATEMPLATE/html/jw_sig/Classic you can override the entire plugin output!

The following instructions apply to Frontpage Slideshow versions 3.0.0+ for Joomla 1.5, 2.5 & 3.0 compatible websites only.
(Joomla v1.0 based websites are no longer supported as of version 2.1+ of the Frontpage Slideshow.)

DOWNLOADING

Login to your Member Dashboard and grab the latest release from your "My Subscriptions" page. An active membership is required.

QUICK INSTALLATION

  • Download the file FrontpageSlideshow-v3.X.X_j1.5-2.5-3.0.zip (where X is an incremental version number).
  • Login to the backend of your Joomla 1.5-2.5 website and navigate to Extensions >> Install/Uninstall (Joomla 1.5) or Extensions >> Manage (Joomla 1.6+).
  • Choose to upload the zip file FrontpageSlideshow-v3.X.X_j1.5-2.5-3.0.zip (where X is an incremental version number) and the Frontpage Slideshow package will be installed and ready for your website to use.

UPGRADING

Unfortunately, there is no upgrade path from versions 2.x.x to 3.x.x of the Frontpage Slideshow. because the extension has be re-written from scratch and the database tables are changed. We recommend that you follow this process to setup the latest v3.x.x release:
a) backup your site first (using e.g. Akeeba Backup)
b) note down your slideshows
c) note down your customizations on existing Frontpage Slideshow templates so you can pass them on to the updated ones included in version 3+.

To update from a 3.0.0+ version to a bigger version, all you need to do is just upload the new package over the previous one. There is no need to uninstall it first as you will lose all your slideshows. Just install on top.

JOOM!FISH SUPPORT

Since version 2.1, Frontpage Slideshow bundles all necessary "content elements" for translating slideshow contents to any language using Joom!Fish.

Installing/upgrading Frontpage Slideshow will install/upgrade the Joom!Fish "content elements" as well.

If Joom!Fish was not present when you installed Frontpage Slideshow, the "content elements" did not install as well. If you add Joom!Fish on your site AFTER you installed Frontpage Slideshow, then all you have to do to add Joom!Fish support on your slideshows is to just re-install Frontpage Slideshow. Your slideshows will remain intact and the related "content elements" for Joom!Fish will now be installed.

Frontpage Slideshow cannot install the Joom!Fish "content elements" if Joom!Fish is not present. That's because these "content elements" are inside the Joom!Fish folder structure, so if Joom!Fish is not installed, well, you get the picture...

REQUIREMENTS

Everything Frontpage Slideshow requires to function properly is listed in the "Information" submenu inside the component.

In general:
  • In order for Frontpage Slideshow to function as intended, you need to have Joomla 1.5, 2.5 or 3.0 installed (preferably the latest version in each major release) and working properly on the right server environment as noted in Joomla requirements here.
  • You also have to make sure that the folders /media/com_fpss/ and all its subfolders are writable, in other words, check that the permissions for these folders are 755 (or 777 with some hosting companies). Use the free "Admin Tools" from akeebabackup.com to correct any file permission issues.
  • The GD Image Library for PHP must be installed and enabled on your server. All hosting servers usually have GD installed and enabled - if you're not sure, please ask your hosting provider to enable it. GD is used by Frontpage Slideshow to handle resizing for the images you upload on your slideshows.

DEMOS

You can see Frontpage Slideshow for Joomla running on our demo site at demo.joomlaworks.net.

SETTING UP YOUR FIRST SLIDESHOW

When you install Frontpage Slideshow for the first time, a set of sample data will be installed as well. So it's very easy to understand your way around and create slideshows. Either way, here's some basic instructions to quickly setup your first slideshow:

1. Make sure Frontpage Slideshow is installed.

2. Navigate to Components >> Frontpage Slideshow and then click on the "Options" toolbar button (in the top right). Set your desired settings.

3. Navigate to "Categories" and click on "New" to add a new category (slideshow). As you can see, the options in the category page are self explanatory. Once you're done, hit "Save".

4. Navigate to "Slides" in the component's menu. Click on "New" to add your first slide. Follow the numbered steps to link existing (or custom) content from your Joomla site to a slide. A slide typically consists of a title, tagline, description text and main/thumbnail image. See the "advanced" tab for settings that override your category settings. Image uploads are done using AJAX, so you will see your image in a preview before saving it. The preview is a scaled down version of the actual image so it fits the edit window. If you choose Joomla articles as your slide content source, the title, description text and slide link will be automatically populated from the original content. If you choose K2, Virtuemart, redShop or Tienda as your slide content source, the title, description text, link AND image will also be automatically populated from the original content. You can override any part of this content, except the link. If you want to create a slide that does not fetch content from within your Joomla site, just use the "custom" button.

After you're done with the slide content editing, click SAVE to save the slide and return to the "Slides" page.

Repeat this process to create more slides. All these slides will eventually make your slideshow.

5. Go to Extensions >> Module Manager. Click on "Frontpage Slideshow (by JoomlaWorks)" and open the parameters page of the module. Choose to publish the module, select which "position" you want it to appear and assign the module to some menu item (all or selected menu items). Next, edit the module's parameters. Choose the template you want your slideshow to appear through, along with the width, height and sidebar width values of the slideshow. Explore the rest of the options by reading the tooltip explanation when you hover your mouse over each parameter title. When you are done setting up the module, hit the "Save" button.

6. Go to your site. Navigate to the page (menu item) where you published the module and voila, your Frontpage Slideshow is ready!

7. Additionally, you can create new menu item pointing directly to a new slideshow. Just create a new menu item, select Frontpage Slideshow >> Slideshow as menu type and set your slideshow options. These options are identical to the module's.

CUSTOM SLIDE ORDERING

If you want to arrange a category's slides under a specific order, you need to enable "ordering" in the backend.
To do so, follow these steps:
  • In the "slides" list, filter a certain category from the drop down, located on the top-right, just above the slides list.
  • Now you see the slides for that particular category. Hit the "Order" table header, so manual ordering is enabled.
  • Re-arrange a slide by clicking, holding and moving the 4-directional arrow. You can then place the slide anywhere you want in the list of slides for that category.
(see the 9th screenshot below, in the screenshots area)

MVC TEMPLATING: THE POWER TO CREATE UNIQUE SLIDESHOWS

The feature trully setting apart Frontpage Slideshow from any other Joomla slideshow system is its MVC architecture. It means you can use HTML and CSS template overrides inside your Joomla template and create a unique slideshow for your website!

If you are wondering what MVC is or means, please read this for general information on Joomla MVC template overrides.

If you are comfortable with Joomla templating, here's what you need to know to create unique Frontpage Slideshow templates.
  • Frontpage Slideshow comes with 8 pre-designed templates, which can be used as a starting point to design your own.
  • The 8 pre-packaged templates are located in /modules/mod_fpss/tmpl/
  • To override one of the pre-packaged templates, simply copy its folder to /templates/YOURJOOMLATEMPLATE/html/mod_fpss/. So if you want to override the "Movies" template, copy /modules/mod_fpss/tmpl/Movies inside the folder /templates/YOURJOOMLATEMPLATE/html/mod_fpss/ (you will first have to create the folder mod_fpss inside your /templates/YOURJOOMLATEMPLATE/html/ folder). Then you just edit the default.php and the 2 css files located in the sub-folder /css to modify the resulting slideshow. By doing this, you obviously don't have to worry about Frontpage Slideshow upgrades overriding e.g. your custom CSS settings on a pre-packaged template.
  • To create a new slideshow template, the process is almost identical. In this case, you can copy one of the pre-packaged templates just to get started, but you can name the template's folder differently. The Frontpage Slideshow will "see" this new template even if it doesn't exist on the module's tmpl folder. It's what we call "on the fly" MVC templating and it's a concept we first introduced with our flagship Joomla extension, K2.
Below you can see the file structure of a Frontpage Slideshow template folder, located by default inside the /modules/mod_fpss/tmpl/ folder.

default.php (the main HTML file)
/css
|-- template_css.php (dynamic CSS file)
|-- template_css_ie.css (IE7-and-older CSS file)
/images
|-- (contains image files currently used in the CSS files)

Professionals who design/develop templates for Joomla can now fully support Frontpage Slideshow by offering pre-bundled slideshow templates in a single package.

All new or customized slideshow templates should reside inside the /templates/YOURJOOMLATEMPLATE/html/mod_fpss/ folder.

When you create a menu item linking to a slideshow (using the component view introduced in versions 3.x.x), you are basically re-using the module. That is why all slideshow templates reside in the module folder and all new templates/customizations should reside in the /templates/YOURJOOMLATEMPLATE/html/mod_fpss/ folder.

TROUBLESHOOTING

Issue: Oh no! My slideshow looks broken! Slides display one below the other! What's wrong?
This usually occurs if your hosting company is not "running" PHP as a CGI module. In this case, the dynamic CSS files produced by Frontpage Slideshow are unreachable as the server responds with a "500 Internal Server Error".

Solution: just go into the module parameters (in the backend), select the "Advanced parameters" slider on the right of the screen and then switch the option "CSS inclusion method" to "Embedded (on the output of the page)". This will force the CSS to "embed" onto the output of your slideshow instead of being called as an external dynamic CSS file. Please note that this option was added in Frontpage Slideshow v2.5+.

Issue: My website's drop-down menu expands behind the slideshow!

Solution: This is an issue related to your template and not the Frontpage Slideshow. You can find a detailed explanation of the issue and the solution in our Community Forum at: http://forum.joomlaworks.net/index.php?topic=1126.0

BROWSER COMPATIBILITY

Frontpage Slideshow has been successfully tested in all major browsers. The prebundled slideshow templates are fully compatible with Firefox, Chrome, Safari, Opera and Internet Explorer version 7 and above. They also degrade nicely in Internet Explorer 6.
After you install the latest version of the module, do the following to setup your first set of tabs/sliders of existing modules.

1. If you haven't already, create a new module position in your template or use an existing one. This module position will not be directly displayed on your template. Instead it will be used as a reference by the Tabs & Sliders module to retrieve the set of modules you want displayed as tabs or sliders. Learn how to add a new module position in Joomla here: http://docs.joomla.org/How_do_you_add_a_new_module_position%3F

2. Assign the modules you want to display inside tabs or sliders in reference module position we mentioned. You should already have these modules set, if not, do so now.

3. Now edit the Tabs & Sliders module parameters and make sure you select the reference module position you previously set. The Tabs & Sliders module will simply retrieve that module position and display all the modules in there in tabs or sliders. But you still need to place the Tabs & Sliders module somewhere right?

4. So now publish the Tabs & Sliders module in the ACTUAL module position in your template where you want to display modules in tabs or sliders.

The following instructions apply to version 3.0.0 or newer.
Simple Image Gallery Pro supports only Joomla versions 1.5, 2.5 & 3.x.

DOWNLOADING

Login to your Member Dashboard and grab the latest release from your "My Subscriptions" page. An active membership is required.

INSTALLATION

There is 1 single file you use to install the extension, which is compatible with Joomla 1.5 to 3.x. After you download this zip file, upload and install the plugin by using the Joomla installer. Navigate to:

  • Extensions >> Install/Uninstall (for Joomla 1.5)
  • Extensions >> Extension Manager (for Joomla 2.5 to 3.x)

...to install the extension.

Finally, navigate to Components >> Simple Image Gallery Pro (all Joomla versions) to start editing your image galleries.

For Simple Image Gallery Pro versions prior to 3.5.0, the extension parameters are accessed by clicking the gear icon located inside the left sidebar (triggered by the ☰ icon). The sidebar is visible on all component views.

SIGPro Settings Closed SIGPro Settings Open

 

UPGRADING

Simply upload any newer version on top of the previous one you have installed on your site. The process is the same as installing the extension for the first time (as mentioned above). All your settings will be retained and any new features will be added automatically.

REQUIREMENTS

In order for Simple Image Gallery PRO to function properly, please make sure that you are running at least PHP 4 and that PHP's GD image library is installed on your server (common webhosts have GD installed by default). For the Flickr integration, PHP5 is required.

You also have to make sure that Joomla's /cache folder is writable, in other words, check that the permissions for this folder are 755 or 777. If the plugin cannot generate the thumbnails due to bad permissions, you will see a related notification.

HOW DOES IT WORK?

The concept is simple. You want to add image galleries inside your articles (content items)! First set the "Root folder" of all galleries in the extension's settings. By default it's the "images" folder ("image/stories" for Joomla 1.5 only). Now use the Simple Image Gallery Pro component (in the Joomla backend) to create a new gallery folder and in there start uploading images. You can optionally edit the image captions. Follow the same process to batch create your image galleries.

When you are ready to upload one of your image galleries, simply go into the Joomla article manager (or the K2 item manager, or the Virtuemart/redShop product manager etc.), locate the article/item/product you wish to add an image gallery into, place your mouse cursor where you want the image gallery to appear to inside your content (in the WYSIWYG editor) and then click on the editor plugin that reads "Simple Image Gallery Pro" at the bottom of the Joomla WYSIWYG editor. This button will trigger a lightbox popup which essentially loads the Simple Image Gallery Pro backend component and you can either choose an existing gallery to insert in your content, or you can create a new one.

SIGPro Editor XTD Button

Once you insert an image gallery, you will see a plugin snippet like this: {igallery}summer_trip_to_italy{i/gallery}. This is what instructs Simple Image Gallery Pro to convert to an image gallery in the frontend (in the actual site).

You can have as many galleries as you want inside each content item, since caching takes care of performance. Thumbnails are not generated every time the page with the galleries loads, but after certain intervals, specified in the plugin parameters. The default interval (cache expiration time) is 120 minutes (2 hours). (You can see the thumbnails in your Joomla site's cache manager and you can delete the thumbnails whenever you want so they are instantly re-created upon subsequent page loads by visitors.)

Don't forget to adjust the width and height of the thumbnails. Before inserting an image gallery via the "Simple Image Gallery Pro" editor button, you can adjust these options at the bottom of the lightbox window. Decreasing the width means you are adding more thumbnails in each row of the gallery. So, experiment before going public. Also, set the image quality of the created thumbnails. Low quality means smaller thumbnail sizes and therefore better loading times for your site.

SIGPro Modal

Please note that if you use K2 for your content and more specifically, if you wish to add an image gallery from the related tab in the K2 item form, you can only create, edit and select to use a gallery, but you cannot modify the gallery thumbnails dimensions as you would with galleries inserted from the plugin button. In that case, K2 galleries will inherit the global options configured in the component's settings (in the backend). Of course, you can always still use the plugin button to add galleries within content blocks either in the main content tab in the K2 item form or in WYSIWYG text blocks set in Extra Fields.

For performance issues, prefer not to use over 50 images per content item, otherwise you're just overweighing your pages. The plugin will have no problem handling the conversion, it's just that your users will wait for many thumbnails to load.

Alternatively, you can "switch" to "single thumbnail" display mode and launch your galleries from one thumbnail only! That's right! E.g. you can launch a slideshow of 50 images from a single thumbnail, without overweighing your article page with thumbnail images. The user sees all full-sized images by navigating with the "previous" and "next" buttons within the popup window! This can come handy when you want to display a sequence of images as a presentation.

Flickr Integration: A free API key is required to have Flickr photo set embedding on your site. The process to get an API key is very simple: Sign in to your Flickr account, then visit http://www.flickr.com/services/apps/create/ and choose to get a non-commercial key. Name your app as your website. You can safely use this API key on more than one websites, even on different domains.

Can frontend (registered) users upload image galleries? Frontend registered users are allowed to upload image galleries to their articles (or any other Joomla extension) by using the same process as backend users. When using the editor plugin button, frontend users can upload galleries to an automatically created user gallery folder. This prevents e.g. user "John" from seeing & modifying the galleries upload by user "Jane". Furthermore, they are not allowed to view or modify the image galleries that are uploaded from backend users typically inside the /images folder of a Joomla site. In other words, frontend gallery uploading for registered users is a sandboxed process. They can upload and manage their own galleries only. They cannot manage the galleries created by others. Please note that this "frontend user gallery uploading" feature is different from K2 frontend image gallery uploading (which is already sandboxed as a process too). This feature ONLY applies when using the editor plugin button inside a WYSIWYG editor area to upload a gallery in the frontend.

Old IE browsers and the "Polaroids" gallery layout: It is important to understand that the "Polaroids" gallery layout makes extensive use of CSS3 which is not fully supported by old versions of Internet Explorer (IE). More specifically, for IE version 6 to version 8 we use a graceful degradation approach, so that the gallery is visible and functional. Thus the layout is not identical to how modern browsers like Mozilla Firefox, Google Chrome, Apple Safari, Opera & IE9+ render the gallery. We strongly advise users whose site visitors are mostly coming from old IE versions to possibly use a different gallery layout.

GOING PRO!

Multiple "Popup" Engines

Simple Image Gallery PRO utilizes 10 popup engines for ultimate style and compatibility with various frameworks. Most are based on the jQuery JavaScript library and 2 of them can display the source image in a "responsive" modal box with a touch friendly user interface. Ideal for responsive web sites! 3 popup engines work with "vanilla" JavaScript (they don't require jQuery or any other such library) and most of the popup engines are "slideshow capable". Popup engines utilizing jQuery will download the latest library version minified from the "Google AJAX Libraries API" service, which means faster load times for your website and your gallery. You have full control over how jQuery is loaded. Please note that in Joomla 3.0 or later the extension uses the CMS's built-in copy of jQuery.

Manual Gallery Snippet Setting

"Simple Image Gallery PRO" provides the user the ability to have customized image galleries. For this to happen, you can either use the new user interface (recommended way) or you can directly use the included 6 additional "switches" (additional to the image gallery folder path), which you can use to set different width, height, display mode, caption mode, popup engine and gallery layouut per gallery! That means you can bypass the global settings "Thumbnail viewport width", "Thumbnail viewport height", "Display Mode", "Default caption (label) handling", "Popup engine for image galleries" and "Layout template for image galleries", and have for example image galleries that display thumbnails in different dimensions within the same article.

To do that you need to insert up to 6 (optional) values in the tags used by the plugin. The syntax is the following:

{igallery}folder_path:thumbs_width:thumbs_height:display_mode:caption_mode:popup_engine:gallery_layout{i/gallery}

Watch out for the seperator, which is the character ":".

  • "thumbs_width" is the target width in pixels for all thumbnails.
  • "thumbs_height" is the target height in pixels for all thumbnails.
  • "display_mode" is the mode in which we want our gallery to display. It takes only 2 values, either "0" or "1". "0" means "normal mode" and "1" means "single thumbnail mode".
  • "caption_mode" control how captions (labels) are displayed. It takes only 3 values, either "0" (no captions), "1" (caption with generic messages) or "2" (captions coming from labels.txt files).
  • "popup_engine" overrides the default popup engine (see our demo site). Values are (alphabetically): highslide, jquery_colorbox, jquery_fancybox, jquery_fresco, jquery_lightview, jquery_magnificpopup, jquery_nivolightbox, jquery_prettyphoto, jquery_slimbox, jquery_swipebox, lytebox, simplebox
  • "gallery_layout" overrides the default gallery layout. Values are: Artistic, Classic, Elegant, Galleria, GalleriaWhite, Polaroids, Sleek

The most important ones of course are the first 2 params (after the folder path): width & height

So if for example you want to insert an image gallery in some article with thumbnails displaying in 300px width and 160px height, while keeping the "normal" display mode (showing all thumbs, not just the first one), with caption showing generic messages, you would insert the following tag:

{igallery}folder/some_folder:300:160:0:1{i/gallery}

...which translates to: "create image gallery from the images inside 'folder/some_folder', give them a width of 300px and a height of 160px, do not display them (0) in "single thumbnail" mode and display generic captions (1) for every thumbnail.

If we did want to display the gallery in "single thumbnail" mode, then we would insert:

{igallery}folder/some_folder:300:160:1:1{i/gallery}.

If we wanted to override the popup engine and the gallery layout as well, we could use something like:
{igallery}folder/some_folder:200:80:1:2:jquery_colorbox:Galleria{i/gallery}

Important!
These values are completely optional. This means you can use: {igallery}some_folder:200:160{i/gallery} to adjust dimensions only to thumbs (no change in display mode) or even {igallery}some_folder::160{i/gallery} to adjust just the height (the width value was ommitted). If we wanted to simply switch the gallery to "single thumbnail" mode, then we would just add something like: {igallery}some_folder:::1{i/gallery}. When you don't enter one of the 3 values, it is assumed you are using the global ones. Simple, right?

Flickr Integration
Adding Flickr Sets to Joomla couldn't get any simpler than this. Just the URL of a Flickr set (e.g. http://www.flickr.com/photos/joomlaworks/sets/72157626907305094/) and paste the URL inbetween the plugin's tags like this:

{igallery}http://www.flickr.com/photos/joomlaworks/sets/72157626907305094/{i/gallery}

...and you get probably the simplest and fastest way to embed Flickr Sets in Joomla. Remember to get a Flickr API key first at http://www.flickr.com/services/apps/create/.

For more advanced overrides
, all additional values/params as outlined in the previous section are also present for Flickr Set embedding, with the exception of an extra value for the count of images fetched from Flickr. Check this example:

{igallery}http://www.flickr.com/photos/joomlaworks/sets/72157626907305094/:20:200:80:1:2:jquery_colorbox:Galleria{i/gallery}

Notice one additional parameter compared to regular "uploaded" galleries? There is an image counter right after the Flickr URL. So the above example translates to:

{igallery}flickr_URL:flickr_Image_Count:thumbs_width:thumbs_height:display_mode:
caption_mode:popup_engine:gallery_layout{i/gallery}

Individual captions/labels on thumbnails and popup images

"Simple Image Gallery PRO" gives you the ability to easily set individual captions (labels) on popup images. This is a feature many people have asked for, especially photographers and other such professionals, who want to add some comment in their photos and not just have a generic message appearing. Although using EXIF data from JPEG images originally sounded like a nice idea, it soon became obvious to us the trouble in which users would get to add a few captions to their images, as well as the limitations posed (no support for GIF or PNG images). So we decided that a simple text file would do a better job. So how do you add custom captions/labels to your images?

Simply enable the related option "Default caption (label) handling" in the plugin parameters and the required xx-XX.labels.txt file (where xx-XX is your site's default language locale) for each gallery will be automatically generated with some sample text in.

To edit these captions, you can either use the component's backend interface (recommended way) or you can directly edit the captions files. Simply open and edit the xx-XX.labels.txt file of the gallery for which you want to have captions. You can freely use HTML inside the description, just make sure you have one caption per line. After you edit the xx-XX.labels.txt file for a gallery, you would end up with something like:

filename1.jpg|Trip to Italy|You can see us here in piazza di Roma
other_filename.png|caption title|and this is another caption<br />with some HTML <b>in it</b>!
trip_to_canada.gif|caption title|SIG Pro is pretty cool!


As you can easily understand, each caption is broken down to 3 parts:

  • the filename (autogenerated from Simple Image Gallery PRO)
  • the caption title
  • the caption description

Simple Image Gallery Pro plays nice with Joom!Fish too. If you have multiple languages set in your site with Joom!Fish, the plugin will create different xx-XX.labels.txt files, using the available languages. So if your site has English and French available for example, the plugin auto-generates en-GB.labels.txt and fr-FR.labels.txt files.

In versions prior to 2.5 of the plugin, the caption files where only named labels.txt. If you have already built your caption files, you don't need to worry. The plugin can still read labels.txt files, but any new gallery created will make use of the new naming format.

MVC templates: the power to customize the look of your galleries

The feature trully setting apart all our commercial plugins from any other Joomla plugin are their MVC architecture, currently available in Joomla for components and modules only. That means you can use HTML and CSS template overrides inside your Joomla template and completely change the way the plugin elements display on your website!

So you can either choose to use the versatile base styling of the plugin or simply override it (both the HTML and CSS code) by copying the plugin's folder /plugins/content/jw_sigpro/tmpl/SomeGalleryName in Joomla 1.5 or the folder /plugins/content/jw_sigpro/jw_sigpro/tmpl/SomeGalleryName in Joomla 2.5 or newer TO your Joomla template's /templates/YOURJOOMLATEMPLATE/html/jw_sigpro/ folder (create it if it doesn't exist), as you would with components and modules. Whatever changes you do from now on within this folder, will completely override the plugin's output, exactly as you would with any other MVC component or module.

Simple Image Gallery Pro
uses 6 base layouts (templates) for rendering galleries, with associated CSS, JS and IMAGES folders. You are able to override all files or selected files, as you would with any other MVC component or module, with the better exception that Simple Image Gallery overrides CSS and JS files as well, as long as you maintain the same names (template.css and behaviour.js).

 

Putting it all together

1. This gallery operates using the global plugin parameter settings (thumbnail dimensions set to 200x160, normal mode, generic caption messages). Tag used: {igallery}demos/galleries/abstract{i/gallery}



2. This gallery has thumbs assigned to 180x100, displaying in normal mode, no caption messages. Tag used: {igallery}demos/galleries/movies2012:180:100:0:0{i/gallery}


3. This gallery has thumbs assigned to 200x260, displaying in single-thumbnail mode, no caption messages. Tag used: {igallery}demos/galleries/casino_royale:200:260:1:0{i/gallery}

As you can see here, nearby text nicely wraps around the thumbnail.

 

4. This gallery has thumbs assigned to 240x140, displaying in normal mode, with custom captions on (using a labels.txt file). {igallery}demos/galleries/travel:240:140:0:2{i/gallery}



Full demos can be found on our official demo site at: http://demo.joomlaworks.net/simple-image-gallery-pro

That's all there is to it! Please submit any comments to the related board for Simple Image Gallery PRO in our Community Forum.

Creating a new responsive layout based on Foundation's block grid.

If you are not aware of ZURB’s Foundation framework it is considered the most advanced front-end framework. You can download it or learn more about it from here although for this tutorial you are not required to download the entire framework, nor do you need to add any JavaScript scripts.

Overriding the extension

To create a new template or override an edit and existing one please refer to the “MVC templates: the power to customize the look of your galleries”.
Once you have the created or renamed the folder in templates/YOURJOOMLATEMPLATE/html/jw_sigpro/ we are ready to start.

Adding the Block grid in the CSS file

Using your favourite editor open the template’s CSS file. It is located in the /css folder. Once you have opened it, you need to add the Block Grid on top of the template file.

You can use this gist as a reference so you don not really have to download anything.

Hint: Be careful not to accidentally download and paste the entire framework. Only this small part is needed.

Explaining the block grid

The block grid has three breakpoints (stages): one for small viewports (phones),  one for medium viewports (tablets),  one for larger viewports (laptop and desktop computers) and 12 columns .
For smaller viewports the class small-block-grid- is used followed by the number of colums we want the layout to have.  
For showing two columns the class would be small-block-grid-2 . For the medium and large viewports simply replace "small-" with "medium-" and "large-" respectively.

Example. Let’s say we wish our gallery to display 2 columns on phones, 3 columns on a tablet and 5 columns on larger devices. The classes you will need to use are:

small-block-grid-2 medium-block-grid-3 large-block-grid-5

Hint: Always start from the small- class and build up.

The HTML/PHP part (putting it together)

No significant changes are needed to the default.php file. What you need to do is:

a) Add the grid’s classes to your <ulul>element.

 

Example

<ul id="sigProId<?php echo $gal_id; ?>" class="sigProContainer sigProResponsive small-block-grid-2 medium-block-grid-3 large-block-grid-5<?php echo $singleThumbClass.$extraWrapperClass; ?>">

 

b) Remove any inline widths and replace them with a percentage based on the size you specified in the extension’s settings.
We need to add some inline styling to the <mg alt="" /> element as the example bellow:

style="background-image:url(); background-repeat: no-repeat; background-size: cover;” ..

and a padding bottom to the <a> element.

a href="/" class="sigProLink" style="width: 100%; padding-bottom:%;” ..

 

The code that renders the thumbnail should look like this in the end.

<a href="/<?php echo $photo->sourceImageFilePath; ?>" class="sigProLink<?php echo $extraClass; ?>" style="width: 100%; padding-bottom:<?php echo ($photo->height / $photo->width * 100); ?>%;" rel="<?php echo $relName; ?>[gallery<?php echo $gal_id; ?>]" title="<?php echo $photo->captionDescription.$photo->downloadLink.$modulePosition; ?>" data-fresco-caption="<?php echo $photo->captionDescription.$photo->downloadLink.$modulePosition; ?>" target="_blank"<?php echo $customLinkAttributes; ?>>
	<?php if(($gal_singlethumbmode && $count==0) || !$gal_singlethumbmode): ?>
	<img class="sigProImg" src="/<?php echo $transparent; ?>" alt="<?php echo JText::_('JW_SIGP_LABELS_08').' '.$photo->filename; ?>" title="<?php echo JText::_('JW_SIGP_LABELS_08').' '.$photo->filename; ?>" style="background-image: url(/<?php echo $photo->thumbImageFilePath; ?>); background-repeat: no-repeat; background-size: cover;" />
	<?php endif; ?>

	<?php if($gal_captions): ?>
	<span class="sigProPseudoCaption"><b><?php echo $photo->captionTitle; ?></b></span>
	<span class="sigProCaption" title="<?php echo $photo->captionTitle; ?>"><?php echo $photo->captionTitle; ?></span>
	<?php endif; ?>
</a>

 

You can find the complete file with all the edits here.

Final Note

This method uses percentages instead of fixed widths. The size of the thumbnails is calculated from the extension’s settings but due to the fact that the column width is not fixed, the actual size will vary from viewport to viewport. The aspect ratio will always be correct but the actual size in pixels might vary a little from your settings.

If you wish to display a fixed width thumbnail you should use another template, e.g. Elegant.

Both of the files can be found here.

 

3rd party contributions

The following list are contributions from Simple Image Gallery Pro users:

 

The following documentation applies to K2mart version 2.0 (released March 29th, 2012) and later.

DOWNLOADING

Login to your Member Dashboard and grab the latest release from your "My Subscriptions" page. An active membership is required.

REQUIREMENTS

  • Joomla 2.5.x latest stable version is highly recommended. K2mart should also work with no problems under Joomla 1.7 but since this is not a LTS version it is not officially supported. If you are under Joomla 1.7, you are highly encouraged to upgrade to Joomla 2.5. K2mart v.2.x will NOT work with Joomla 1.5.
  • K2 v2.6.3 or later.
  • Virtuemart v2.0.16 or later is highly recommended. K2mart was tested with Virtuemart 2.0.16 and it should work with no problems with next versions of Virtuemart in the same 2.x.x series. K2mart is designed to work with the Virtuemart cart module (mod_virtuemart_cart), so it is recommened that you also enable this module on product pages. K2mart makes sure that when a user clicks on a product in that cart module, the user is properly redirected to the related K2 product page. K2mart v.2.x will NOT work with Virtuemart 1.x.

INSTALLATION & UPDATING

After you download the zip file, use the Joomla installer by navigating to Extensions->Extension Manager->Install/Uninstall and then choose to upload the zip file.

If you are updating from an older version of K2mart in the 2.x series, do not uninstall the old version. Simply head over to Extensions >> Install/Uninstall and choose to upload the new file. All K2mart files will now be updated maintaining your settings.

UPGRADE

Upgrading from K2mart 1.x to K2mart 2.x is NOT supported. K2mart is based on two other extensions K2 and Virtuemart. Upgrading K2mart means that you should also upgrade them. Although K2 can be upgraded using the jUpgrade extension, there is no easy way to upgrade Virtuemart from version 1.x to version 2.x.

POST INSTALLATION CHECKS

After installing K2mart, in order to ensure that everything is fine, you should check that K2mart plugins are installed and enabled. K2mart comes with one system and one k2 plugin. Both of them should be enabled.

SETUP

After installing K2mart you have to select a K2 category as your catalog root through K2mart system settings. This is a required step in order to tell K2mart what’s the category that’s holding your catalog and your products. You can read more on this below on the settings section of this document.

HOW DOES IT WORK?

K2mart is a powerful extension adding cart functionality to K2 items using Virtuemart, the most popular e-commerce solution for Joomla.

K2mart integrates most of Virtuemart's product features to K2 items by mapping and syncronizing Virtuemart products with K2 items. This way each K2 item inherits all of Virtuemart's product properties, including manufacturer, vendor, price, discounts, tax rates, currencies, stock, custom fields, dimensions and so on. Every time you save an item through K2, K2mart sends the product information to Virtuemart and keeps a reference between the product and the K2 item. When rendering K2 on the frontend, K2mart attaches the information from Virtuemart to the corresponding K2 item in the form of a block with product information and the required "add to cart" button.

This block output by K2mart comes in four bundled templates with three different layout files (for the K2 item view, K2 item listing view and K2 items fetched within K2 modules) and configuration parameters for each of them to make theming much more easier. These theming options are set into the "Settings" page within K2mart.

K2mart consists of an admin only component, two plugins and an admin module. For greater simplicity all the parameters of the extension can be found on the component along with the migrator. Read on for a complete explanation of each parameter found in K2mart.

WHAT'S SYNCED

In this version, K2mart apart from using Virtuemart’s database tables to store the additional product data, is also performing a sync of some basic fields. The reason for this is to allow basic integration with some Virtuemart modules. The fields that are synced are the following:

K2 item field Virtuemart product field
Title Product Name
Published Published
Featured On Featured
Introtext Short Description
Fulltext Product Description
Image Product Image
Note that the syncing of those fields is one-way only. This means that if you edit any of the above fields through K2 then the Virtuemart fields will also be updated, but if you edit the product through Virtuemart, K2 fields will remain unchanged.

CREATING PRODUCTS

Once K2mart is installed and setup you can begin adding products. The process is exactly the same as creating a K2 item. The only difference is that you have to fill in some extra information regarding the product. In order to do this use the form provided by K2mart. The fields that are required is the SKU and the price. Once you complete them and hit save you have created your first product.

USING THE MIGRATOR

If you have already set up your online shop with Virtuemart and you want to import your products to K2 you can use the K2mart migrator. K2mart migrator will build the corresponding K2 categories for your catalog based on Virtuemart category structure. It will also create a K2 item for every Virtuemart product it finds. Note that if migrator finds a Virtuemart product that is already assigned to a K2 item (has already been imported in the past), this product will be skipped. Also note that Virtuemart's multiple categorization is NOT supported. When the migrator finds a Virtuemart product that belongs to more than one Virtuemart categories it will map the generated K2 item to the corresponding K2 category with the deepest level among them. K2mart migrator will also create tags for Virtuemart categories and will tag each new generated item with them. K2mart migrator comes with three quick settings to customize the migration. These are:

 

K2mart 2 migrator settings
 

K2mart migrator settings


- Catalog root category: All imported categories from Virtuemart will be placed under this category and they will inherit it's settings. Select one of the existing K2 categories or type a category name and let K2mart create this category for you using the default category settings. It is highly recommend that you first create a K2 category through K2, set the desired settings for this category and then use the migrator to import products to K2mart under this category (selecting this category from the list as the catalog root category). This will save you from a lot of work later, especially if you have a lot of products and categories.


- Ignore unpublished Virtuemart products and categories: If you check this the migrator will not import Virtuemart unpublished products and categories. This may be useful if you have a lot of unpublished products or categories in Virtuemart and you do not wish to import them.


- Process product images: Uncheck this if you want the migrator to not import the product images into the K2 items. This may also help if you face performance issues but it will lead to products without images.

Regarding the migration process you should note that:

- It may take a lot of time, depending on the Virtuemart products you have already and the setting about image processing. In any case do not interrupt the operation once you started it. Just wait to complete.

- K2mart migrator should normally be used one time. After the migration each new created product through K2 will auto saved to Virtuemart. If you run the migrator again you may produce uneeded duplicated K2 items and categories.

- The migration process requires that your system is NOT running PHP in safe mode. Otherwise it is very possible that you will get a max execution time error from PHP when you try to use the migrator.

- The K2mart migrator may require a lot of resources especially if you have a lot of products and you also want to process their images. PHP memory limit to 64M or greater is recommended if you want the migrator to also import the product images from Virtuemart to K2. This is an average value. Depending on your current number of products a greater value than this may be needed.

MANAGING PRODUCTS

In this version of K2mart product managing is more easy and simple. While you are viewing the K2 items administration list try to filter the items by category using the corresponding filter provided by K2. If you choose one category that’s inside your catalog ( your catalog is defined by the “Catalog root category ” setting ) then K2mart will enhance K2 items list with some extra columns and filters. The columns that will be added are the following:
  • Price
  • SKU
  • Manufacturer

K2 items list can be sorted using these columns. Additionally K2mart will add two extra filters. These are:
  • Manufacturer filter. Allows to filter K2 items based on the manufacturer.
  • Relation filter. Allows to filter K2 items to children and parents.

Those enhancements combined with K2 can give you a powerful managing interface for your shop. Operations like publish/unpublish , flag as featured are also applied to Virtuemart database. Finally, note that when you delete an Item through K2 all its mapped information is also deleted. This means that if a K2 item which is assigned to a Virtuemart product is deleted, the product is also deleted from the Virtuemart database. Note that those operations are applied to Virtuemart only when the K2 item being edited is under the K2mart catalog root category.

 

K2mart 2 products management
 

 

SETTINGS

The parameters are divided into the following areas:
- Layout/view settings. These settings control which elements (data from Virtuemart) are shown or hidden in the product info block that is output on K2 items. Each view has it's own settings: one for the K2 item view, one for the K2 item listings and one for K2 items displayed through K2 modules like mod_k2_content.
- System settings. These settings control global K2mart behaviour.
- Permissions. Provides basic integration with Joomla 2.5 permissions system. You can set the user groups which can configure or access administration interface.

Let's examine all the settings in detail:

K2mart 2 layout settingsK2mart layout settings

Layout settings include the following group of parameters

- Product name: This controls if the product name should be shown in the product info block. In most cases you need to set this to "Hide" as the K2 item title ( already displayed before the product info block ) will be the same.

- Product SKU: Show or hide the product SKU.

- Product URL: Show or hide the product URL.

- Product vendor: Show or hide the product vendor.

- Product manufacturer: Show or hide the product manufacturer ( along with a link opening a modal with manufacturer info ).

- Product price (If applicable): Show or hide the product price. Almost always you want to set this to "Show". Note that this requires that the product does have a price and that Virtuemart is also configured to show prices ( "Show prices" setting found under Virtuemart's configuration).

- Product packaging: Show or hide product packaging information.

- Product box info: Show or hide product boxing information.

- Product dimensions: Show or hide product dimensions.

- Product weight: Show or hide product weight.

- Product availability (If applicable): Show or hide product availability.

- Product shipping info: Show or hide product shipping info.

- Product rating : Show or hide product rating. Note that this requires that rating must be enabled through Virtuemart’s configuration.

- Product reviews (only for item view) : Show or hide product reviews. Note that this requires that reviews must be enabled through Virtuemart’s configuration.

- Product fields: Show or hide product fields. This refers to Virtuemart custom fields.

- Add to cart button (If applicable): Show or hide add to cart button. Note that this requires that Virtuemart is not configured to be used as a catalog only. You can find this under Virtuemart's configuration ("Use only as catalogue" setting).

- Cart product fields (only if add to cart button is enabled) : Show or hide cart product fields. This refers to Virtuemart’s custom fields that affect the product price.

- Quantity box (Only if add to cart button is enabled): Show or hide the quantity box for the add to cart form. This also requires that "Add to cart button" is set to "Show". If you set this to "Hide" the user will not be able to select the quantity of the product to add to the cart and the quantity will always be 1.

- 'Ask question' button: Show or hide the ‘Ask question’ link.

- Disable this layout: Set this to Yes if you want to globally disable K2mart for the specific view.

Note that the layout settings are identical on each of the first 3 tabs in "Settings". You obviously set them differently to reflect how you want your K2 catalog/shop to look like in the frontend.

K2mart 2 system settingsK2mart system settings

System settings include the following group of parameters

- Catalog root category: Select the K2 category you want to redirect the user when they request Virtuemart's default page (called shop.browse or shop.index). Usually you will need to set this to your root category, meaning the category which contains all of your K2 items/products in your catalog.

- Template: Select which template will be used in K2mart rendering in the front-end. Templates are located in /plugins/k2/k2mart/tmpl/site directory. Overrides of the templates need to be placed under /templates/YOUR_JOOMLA_TEMPLATE/html/k2mart directory. Note that in order to create a new template it is not necessary to place it under /plugins/k2/k2mart/tmpl/site directory. You can place it directly under /templates/YOUR_JOOMLA_TEMPLATE/html/k2mart directory and K2mart will detect it.

- Cart only for registered users: Set this to yes if you want to hide the add to cart button for non-registered users.

- Show categories filter: Choose whether you want to display the category filter in front-end. This will allow the user to filter the products based on one or more categories.

- Show manufacturers filter: Choose whether you want to display the manufacturer filter in front-end. This will allow the user to filter the products based on one or more manufacturers.

- Show sorting filter: Choose whether you want to display the sorting filter in front-end. This will allow the user to sort the products by some common used criteria. NOTE: Virtuemart 2.0.2 removed the code that was counting the product sales. This means that the product sales sorting provided by K2mart won't be accurate until Virtuemart restores this issue.


- Enable AJAX: Choose wheter you want to enable AJAX functionality for the K2mart filters and the pagination in front-end.

- Show Virtuemart categories list on K2mart form. Setting this to "Yes" will provide K2mart product form with a select list of Virtuemart product categories. This way, when user creates a new product can also select the Virtuemart product categories that the product will be assigned. Note that this does not affect K2 categorization. This is added just for data manipulation. Advanced users can use this to apply batch operations to some products ( tax rate for specific Virtuemart categories for example).

- Show 'Advanced' tab on K2mart form. Setting this to "Yes" will display an extra tab in K2mart product form providing some advanced operations. Through this tab user can assign/unassign an existing Virtuemart product to a K2 item. Other operations provided by the advanced tab are a link for editing the product in Virtuemart and an option to completely remove the product from Virtuemart.

MVC TEMPLATING: THE POWER TO CUSTOMIZE YOUR LAYOUT

You can use HTML and CSS template overrides inside your Joomla template and completely change the way K2mart elements display on your website! So you can either choose to use the versatile base styling of the bundled K2mart templates or simply override them (both the HTML and CSS code) by copying the K2mart plugin's /tmpl/site/TEMPLATE folder within your Joomla template's /html folder. Each K2mart template uses 4 layout files (item listings, item view, item in module and filters) and one CSS file. Of course you are able to override all files or selected files, as you would with any other MVC component or module, with the better exception that K2mart overrides CSS files as well!

In order to override the built in templates you can simple copy /plugins/k2/k2mart/tmpl/site/TEMPLATE folder within your Joomla template's /templates/YOUR_JOOMLA_TEMPLATE/html/k2mart folder, as you would with components and modules. Whatever changes yo do from now on within this folder, will completely override the K2mart output, exactly as you would with any other MVC component or module.

Alternatively you can create your own template by placing your template folder to /templates/YOUR_JOOMLA_TEMPLATE/html/k2mart. There is no need to place your template to the plugin templates directory.

K2mart uses 4 layouts for listing, listing in modules, item pages and filters, with 1 associated CSS file. You are able to override all files or selected files, as you would with any other MVC component or module, with the better exception that K2mart overrides CSS files as well!

Below you can see the file structure of a K2mart template folder inside the plugin:

/item.php
/listing.php
/module.php
/filters.php
/images
|-- (includes images used in the .php or .css files)
/css
|-- style.css


If you maintain this structure within /templates/YOUR_JOOMLA_TEMPLATE/html/k2mart/TEMPLATE you can override the entire plugin output!

FETCHING PRODUCT INFORMATION INTO K2 LAYOUTS

Some of the product information that is available in K2mart layouts is now also available in K2 layouts to support more complex designs. In order to retrieve a K2mart variable when you are in the context of a K2 layout you can request the variable on the item object. For example if you want to fetch the product SKU inside the K2 item.php layout you can use the following code:
<?php echo $this->item->product->sku; ?> 
You can do the same for the most of the variables that are available in K2mart layouts. Note that in the example above $this->item variable is used. Depending on the context $item may be the item object.
The following documentation applies to SuperBlogger version 1.5 (released November 4th, 2009).

DOWNLOADING

Login to your Member Dashboard and grab the latest release from your "My Subscriptions" page. An active membership is required.

INSTALLATION

After you download the zip file, use the Joomla 1.5 installer by navigating to Extensions >> Install/Uninstall and then choose to upload the zip file.

You also need to enable the plugin, so navigate to Extensions >> Plugin Manager, locate "SuperBlogger" and choose to enable it. To set the various parameters of the plugin, just click on its name to access it's parameters page.

If you are upgrading from an older version of SuperBlogger, you do not need to uninstall the old version first. Simply head over to Extensions >> Install/Uninstall and choose to upload the new file. All plugin files will now be updated maintaining your settings.

REQUIREMENTS

  • In order for SuperBlogger to function as intended, you need to have Joomla 1.5 installed (preferably the latest version) and working properly. Mootools should not be cut off in any way as it's required by both Joomla and the plugin.
  • You also have to make sure that Joomla's /cache folder is writable, in other words, check that the permissions for this folder are 755 or 777.
  • A Disqus.com account (and subdomain) which you can register for free at http://disqus.com, so comments are enabled on the plugin. SEF URLs in Joomla should be enabled for the comments counter feature to properly work, as Disqus utilizes the URL of each post to identify the number of comments for a specified article.
  • A Twitter account (username) if you wish to enable the Twitter tools provided by the plugin. If you don't have one, you can sign up for free at http://twitter.com
  • Optionally you can grab a code snippet from ShareThis.com or AddThis.com (for the social media button option) or get an ID from Outbrain.com (for the rating system). These are not needed as SuperBlogger already provides similar functionality, including a built-in ajax based rating system, using Joomla's article database. For the author avatar images, SuperBlogger uses the popular Gravatar.com service. If you enable the related setting in SuperBlogger, the plugin will ping Gravatar.com for an avatar assigned to the author's email address, if it exists, otherwise display a default avatar image (fully configurable via MVC templating).

HOW DOES IT WORK?

SuperBlogger is a powerful plugin adding blogging functionality -the easy way- to Joomla 1.5 articles. The plugin integrates popular services like Disqus.com (for comments) and Twitter, along with commonly used blogging tools like tagging, rating, bookmarking and social media sharing. Add to that MVC template overrides and the ability to process images server-side and you got a real Wordpress contender, if not better in some areas!

SuperBlogger grabs the text of the article before output and processes it, adding the aforementioned blogging functionalities (and more). These functionalities can easily be set in the plugin's parameters, so you can choose which elements you want to make use of in your Joomla website and which not. Below we explained the plugin parameters one by one, while providing a screenshot on the right of the actual page in Joomla.

superblogger_v1.2_plugin_params.png

PLUGIN PARAMETERS (SETTINGS)

IMPORTANT: The first time you go into the plugin parameters, hit "Apply" once so that the parameter area titles are refreshed and displayed properly (this is a known bug in Joomla, not the plugin).

The parameters are divided into the following areas:
  • Select where to render the plugin: Choose where to "render" (enable) the plugin. This involves selecting specific or all categories (even the "Uncategorized" category) and/or selecting specific or all menu items, in which you want the plugin to render.
  • Common settings: this is where we set the settings available across the entire plugin functionality, like our Disqus.com subdomain, our Twitter username etc.
  • Listing Options: here we define the display of elements in listing pages like blogcategory for example. These options are limited compared to the Article Options because of the less space provided by default in listings.
  • Article Options: here we define the display of elements in article pages.

Let's see now in detail what each parameter does:
The first area "Select where to render the plugin" features 2 multiple-selection boxes for choosing where to have the plugin enabled. You can select individual categories and/or menu items by pressing the Control button (Command button for Mac) and clicking on specific entries.

In "Common settings" we have the most options to set, but these are options we set only once.
  • Enable Tags: if you use the Meta Keywords box inside the Joomla article form and enable this option, you can actually use these keywords as tags. When the user clicks on a tag in the frontend of your site, they are redirected to the "search" component display directly search results for this specific work or phrase.
  • Enable Disqus comments: enable this option to turn commenting on. Requires a valid Disqus.com account and subdomain. Sign up for free at: http://disqus.com - If you want to use an existing comments system installed on your Joomla site like JomComment, simply disable this option.
  • Your Disqus subdomain: After you signup with Disqus, you can link Disqus with your website. Disqus will ask you to "add a website", this is where you provide your site details. At the end it will produce a subdomain like mycoolblog.disqus.com. In this page you can see all your comments gathered and do all sorts of things, like adjust styling settings, moderate comments and more. The "mycoolblog" part is what you copy and paste in this option. Learn why Disqus is the best comment system worldwide at http://disqus.com
  • Enable rating: Choose if you want to enable the rating widget or not. If you do, you can choose between SuperBlogger's built in ajax based rating (using Joomla's article database natively) or the free online Outbrain.com rating widget service (currently the most popular service of its kind). You can easily obtain your free code there without registering. Visit http://www.outbrain.com/get/ratings/Other and generate your outbrain.com snippet. Then just copy this code snippet in the textarea next to "Your Outbrain.com code". PLEASE NOTE that users of older version who used an ID for Outbrain.com can continue using their ID or grab a new code snippet to their preferred language. The ratings will not be lost.
  • Social button code: Grab your social button code snippet from services like ShareThis.com or AddThis.com and paste it here.
  • Twitter username: Enter here your Twitter username if you want to enable the Twitter tools provided by SuperBlogger (see technical requirements above). Enter nothing to disable Twitter tools. Avoid using a fake or non-existent Twitter username, otherwise the plugin will return an error (Twitter cannot provide a related warning when looking up a non-existent username, thus we cannot know the response).
  • Enable TinyURL integration?: Enable this option to have URLs used in Twitter tools shortened, using the TinyURL.com service. Recommended.
  • Twitter cache: This option defines the cache expiration time in minutes for your Twitter Status (feed) used in the "Latest Tweets" feature (set below). Prefer not to use less than 2 mins for performance reasons.
  • Enable article image processing: This option enables image processing for the first image found in the article introtext. You can choose to enable image processing on listing pages, article pages or both. If you enable this option, you can set additional parameters in the options following.
  • Image width on listing pages (px): The width in pixels for the processed first image in listing pages.
  • Image width on article pages (px): The width in pixels for the processed first image in article pages.
  • Image processing quality (%): The JPEG quality for the processed first image in listing and article pages. The less this value is, the lower the quality of the processed image gets. A value between 70 to 90 is ideal in most cases, mainting low image file size.
  • Cache time for processed images (in mins): Set here the cache expiration time for processed images. When this time is reached, processed images are re-created. SuperBlogger uses caching for the generated images to minimize server load and improve site performance overall.
Depending on the options we've set in the "Common Settings" area, we can now define if we want to show or hide specific elements in listing and article pages.

In "Listing Options" we have the following parameters:
  • Rating widget: show or hide the chosen rating widget if enabled.
  • Tweetmeme button: show or hide the TweetMeme badge for displaying re-tweets and an easy "tweet" this button
  • Article tags: show or hide meta keywords presented as tags.
  • Comments counter/anchor link: show or hide the comments counter (acting as anchor link to the comments form as well) if Disqus comments are enabled.
In "Article Options" we have the following parameters:
  • Social button: show or hide a social button from online services like ShareThis.com or AddThis.com if set in "Common Settings".
  • Font resizer: show or hide the font resizer widget for the main article text.
  • 'Bookmark this' button: show or hide the link used for bookmarking a page in all browsers.
  • Rating widget (with anchor link at the top): show or hide the rating widget along with an anchor link at the top of the article for easier user navigation.
  • Comments counter/anchor link: show or hide the comments counter (acting as anchor link to the comments form as well) if Disqus comments are enabled.
  • Related web content (provided by Sphere.com): if you enable this option, SuperBlogger will use Sphere.com for fetching related (to your article) content from across the web.
  • Introtext drop cap: show or hide a drop cap derived from the first letter in the introtext. IMPORTANT: This option will only work if "image processing" is enabled. It will also perform some necessary HTML cleanup (code formatting) in the article's introtext.
  • Custom HTML: in this textarea you can write some custom HTML code which will get displayed on all pages where SuperBlogger is enabled. Useful for copyright or other notices. Uses 2 variables [url] and [title] which are translated to the current article's url and title respectively.
  • Author avatar (via Gravatar.com): If you enable this parameter, the plugin will look for the current author's email and request an avatar to Gravatar.com based on that email address. If it exists, it will fetch the appropriate image, otherwise it displays a default image.
  • Article details: Show or hide article details like author name, date written, hits.
  • Article section and category with links and associated RSS feed links: Show or hide the related article section and category (linked) with associated RSS feeds.
  • Article tags: show or hide meta keywords presented as tags.
  • Social links: show or hide buttons from services like Delicious, Digg, Technorati and more so users can share/bookmark your articles into these popular services.
  • Latest author articles: fetch the latest articles from current author.
  • Latest author articles limit: enter how many latest author articles to retrieve.
  • Introtext for latest author articles: Show the introtext of the latest author articles
  • Introtext word limit for latest author articles: Number of words to limit the introtext of the latest author articles.
  • Latest tweets: fetch the latest tweets from the Twitter account set in "Common Settings" above.
  • Latest tweets limit: enter how many tweets to fetch for the above parameter.
  • Load a module position after the article text/before or after the comments: choose some module position to display in these places as stated by the options. Useful for displaying e.g. banners or the "related articles" module.
One more parameter area follows, the "Advanced" one, where we set if we will be testing SuperBlogger onto a local server before going live. We also have the option to enable debugging, if requested by the JoomlaWorks support team.

IMPORTANT Please note that if you have other "content" plugins installed in your Joomla website (e.g. AllVideos, Simple Image Gallery Free/Pro etc.), you can define the order in which they execute and process/modify Joomla article content by simply re-ordering them in the Plugin Manager. Plugins are executed in Joomla from top to bottom, exactly as you see them listed in the Plugin Manager. In order for SuperBlogger and other "content" plugins to work properly, make sure that SuperBlogger is re-ordered at the top of the "content" plugins stack (order number 0 or negative, e,g, -1). There is just ONE exception: if you are using the "page break" functionality in Joomla then you must re-order the "Content - Pagebreak" plugin first and have SuperBlogger as second.

MVC TEMPLATING: THE POWER TO CUSTOMIZE YOUR BLOG LAYOUT

The feature trully setting apart SuperBlogger from any other Joomla plugin is its MVC architecture, currently available in Joomla for components and modules only. That means you can use HTML and CSS template overrides inside your Joomla template and completely change the way the plugin elements display on your website!

So you can either choose to use the versatile base styling of the plugin or simply override it (both the HTML and CSS code) by copying the plugin's /plugins/content/jw_superblogger/tmpl folder within your Joomla template's /templates/YOURJOOMLATEMPLATE/html folder, as you would with components and modules. Then simply rename the folder /templates/YOURJOOMLATEMPLATE/html/tmpl to /templates/YOURJOOMLATEMPLATE/html/jw_superblogger. Whatever changes you do from now on within this folder, will completely override the plugin's output, exactly as you would with any other MVC component or module.

SuperBlogger uses 2 templates for listing and article pages, with 4 associated CSS files (one common, one for Disqus comments, one for IE6 and one for IE7 - just in case). You are able to override all files or selected files, as you would with any other MVC component or module, with the better exception that SuperBlogger overrides CSS files as well! That means if you copy just the main template file into your /templates/YOURJOOMLATEMPLATE/html/jw_superblogger, then the plugin will override that file, but not the other CSS files!

Below you can see the file structure of the /tmpl folder inside the plugin:
article.php
/css
  |-- disqus.css
  |-- template_ie6.css
  |-- template_ie7.css
  |-- template.css
/images
  |-- (contains image files currently used in the CSS files or inline)
listing.php

If you maintain this structure within /templates/YOURJOOMLATEMPLATE/html/jw_superblogger you can override the entire plugin output!

SEE THE DEMOS

See a live demo of the plugin in action here: http://demo.joomlaworks.net/superblogger
See the plugin running across the "latest news" category in the above website at: http://demo.joomlaworks.net/superblogger/superblogger-running-in-a-category

If you navigate in the above demo website you'll be able to see Joomla articles with SuperBlogger enabled or disabled, so you can see first hand what features the plugin adds to the Joomla website.

JoomlaWorks has developed a non-Joomla distribution of Frontpage Slideshow to work on every website that supports PHP as a minimum requirement. We call this distribution Frontpage Slideshow "standalone". It's ideal for usage on non Joomla websites, like for example your corporate php website or your Wordpress blog or Drupal website! You can obviously use this version on any CMS that is based on PHP!

The following instructions apply to the all versions released after Sept. 29th, 2010 (v2.x).

DOWNLOADING

Login to your Member Dashboard and grab the latest release from your "My Subscriptions" page. An active membership is required.

INSTALLATION

Locate (or download from your purchase email) the file FrontpageSlideshow-vX.X.X_STANDALONE.zip (where X.X.X is an incremental version number), extract it and upload its contents (a folder called "fpss" and the example page called example.php) on the root of your website. So if were uploading this to joomlaworks.net, I should see the example.php page by requesting joomlaworks.net/example.php.

Let's quickly setup the demo slideshow included within:

1. After you upload the files to your server, you need to edit the example.php to alter the php snippet which will bring up the slideshow. Use an FTP client to open/edit the file directly from your server (or do it locally and upload again)...

2. Inside the example.php file you will see this PHP code block (snippet):

<?php
  /* Frontpage Slideshow: Setup Steps */
  /* Please refer first to the online documentation here:
https://www.joomlaworks.net/support/docs/frontpage-slideshow-standalone */

// 1. Enter the name of your slideshow $slideshow = "demo"; // 2. Enter your site's URL (without trailing slash) $siteURL = ""; // e.g. http://www.site.com or http://www.site.com/folder if your site is in a subfolder // 3. Enter the absolute path of your site on the server (without trailing slash) $sitePath = ""; // e.g. /home/user/public_html or /home/user/public_html/folder if your site is located in a subfolder
// Include the slideshow include_once($sitePath."/fpss/fpss.php"); // DO NO EDIT THIS LINE ?>

 

3. You need to fill in the right paths for $siteURL and $sitePath. $siteUrl represents the actual URL of your site. If I were uploading the Frontpage Slideshow package to http://www.mysite.com (at the "root" of the site), the this full URL is what you should write in: $siteUrl = "http://www.mysite.com"

If you were uploading to a subfolder inside your site, you would write something like: $siteUrl = "http://www.mysite.com/somefolder"
You also need to specify the $sitePath value. This is the actual folder path on the server for your site. On servers using the popular cPanel webserver software, this path is usually something like: /home/yourUserName/public_html

If you use mutliple (add-on) domains on your cPanel powered hosting account, then the above path would be something like: /home/yourUserName/public_html/mysite.com

If you use Plesk or any other similar to cPanel software, then configurations are similar. If you ask your hosting company, they will be able to provide you with the "absolute path of your site on the server".

4. Once you fill in those values and provided they are correct, open up your browser and request the example.php page - so you should see something like this: http://www.frontpageslideshow.net/demos/standalone/example.php

Now let's see how to actually create a new slideshow and publish it on your site:

1. Slideshows in the standalone edition of Frontpage Slideshow are basically folders within /fpss/slideshows/ that contain a parameters file, a data file and a folder with the associated slideshow images.

2. Navigate inside the folder "fpss", then "slideshows", copy the folder "demo" (inside the same directory) and rename the copy to something descriptive, e.g. "frontnews". This will act as the folder for your new slideshow. Inside there you will find 2 files and 1 folder as we already mentioned. It is important that you maintain this structure of the slideshow folders. That means you ALWAYS put your slide images inside the "images" folder, your parameters are on the parameters.php file and the slideshow data (contents) are on the data.php file. See a sample structure below:

/fpss
   |-- /slideshows
            |-- /yourSlideshowFolder
                      |-- /images
                      |-- data.php
                      |-- parameters.php

You can obviously change "yourSlideshowFolder" to whatever you want and of course have multiple such folders inside /fpss/slideshows/.

3. Assuming you copied the "demo" folder slideshow and renamed it to "frontnews", let's now edit the contents of the slideshow. First you edit the parameters.php file to adjust the slideshow language (English/French - you can add more languages on your own), the slideshow engine, the template and so on. There are detailed instructions on each parameter specified in the parameters.php file. Then you need to edit the data.php file and replace the existing arrays of data with your own. Again the variables on the left side of the arrays are self-explanatory: title, category, link etc. See how the demo data were used to better understand what each variable represents. Once you finish editing these files, you need to upload your own images inside the /fpss/slideshows/frontnews/images/ folder. Assuming you have added the image filenames properly inside data.php, you can go back to the example.php file and replace the $slideshow variable inside the PHP snippet to "frontnews".

Request again the example.php page and you can see your new slideshow in action.

4. If you want to add this slideshow you created on some actual page on your site (or inside the template of your WordPress, Drupal or other CMS), you only need to copy that PHP snippet as mentioned earlier (when setting up the demo slideshow). The page you will be pasting this PHP snippet must be a PHP page. See some examples below for setting up the slideshow on WordPress and Drupal.

INSTRUCTIONS FOR WORDPRESS, DRUPAL and other CMS users...

When using a CMS like Drupal or WordPress (or any other PHP based CMS), the steps to add Frontpage Slideshow in your template/theme are exactly the same as the above.

  • For Drupal users, add the Frontpage Slideshow PHP snippet inside the page.tpl.php file of your theme, located in /themes/yourtheme/
  • For WordPress users add the Frontpage Slideshow PHP snippet inside the index.php file of your theme, located in /wp-content/themes/yourtheme/
  • In a similar manner you can add Frontpage Slideshow on other popular CMSs like Textpattern, e107, CMS Made Simple, XOOPS, Magento (e-commerce), Zen Cart (e-commerce), osCommerce (e-commerce), Simple Machines Forum (SMF) (forum), phpBB (forum) and many more.

TEMPLATING

From version 2.0 and after, Frontpage Slideshow "standalone" features a cleaner, easier, Joomla-like way of editing existing slideshow templates or creating your own.

All slideshow templates are represented as folders and located inside /fpss/templates/. For example, the files for the slideshow template called "Movies", which is used on the above demos, are located inside: /fpss/templates/Movies/

There you will generally find:

  • a "css" folder containing the template_css.php dynamic CSS file (and other CSS files for IE) controlling the looks of a slideshow template
  • an "images" folder with the images used to create the specified template
  • a default.php file which is used for the HTML output of the slideshow, containing several PHP variables used to display the elements of slide.
  • other files or folders that compliment the slideshow template (e.g. "psd" provides Photoshop versions of graphics used in a slideshow template).

We generally do not recommend editing the default slideshow templates, which are valuable as a reference for your own. It's best to just duplicate the folder of a slideshow template, then edit its contents to create your own, custom template.

To see your new template, you just have to specify the name of its folder inside the parameters.php file of your slideshow.

LOCALISATION

Frontpage Slideshow "standalone" comes bundled with 2 language files for English and French. The messages contained in those files are used by the slideshow templates to output stuff like "Naviage to...", "Play/Pause slideshow" etc. If you want to add your own language or edit those messages, just duplicate the english.php language file, rename it to your language (e.g. italian.php) and then edit the messages contained in there.

Once you're done, you have to edit the parameters.php file of your slideshow to specify your new language. If the language file was italian.php, we would input "italian" inside the related option in the parameters.php file.

23 01 2013
SocialConnect allows your visitors to easily connect to your Joomla site using their favorite social network. But it's not just that - it brings a whole new meaning to the word "community" for Joomla and it's a perfect companion to e-shops and forums.

K2 is the popular powerful content extension for Joomla with CCK-like features. It provides an out-of-the box integrated solution featuring rich content forms for items (think of Joomla articles with additional fields for article images, videos, image galleries and attachments), nested-level categories, tags, comments, a system to extend the item base form with additional fields, a powerful plugin API to extend item, category and user forms, ACL, frontend editing, sub-templates and a lot more!