Highlighter GK5 is news rotator for Joomla! which allows to present chosen articles headers in an attractive way, using different effect like fading, scrolling and many more. Thanks to multiple options, users may adjust it to their needs. Additionally, Highlighter GK5 can be integrated with any source of information.

Version GK5 is updated and recoded version of GK4, and now it have more features then had before. Highlighter GK5 is available for both Joomla! 2.5 and 3.x version and can be downloaded from our website.

Main new features of new version:

• Bult-in Configuration Manager (load & save configuration),
• JSON and XML support as the external data sources,
• Option to show K2 items or Joomla! articles created in last X days,
• Responsive structure and styles
• New animation types:
  • Slides (top and bottom variant),
  • Reveal (top and bottom variant),
  • Flip by X axis (using CSS3 transform),
  • Fade from left side (using CSS3 transform),
  • Opacity animation,
  • 3D rotation bar (using CSS3 transform),
  • Linear infinite scroller
• Mootools & jQuery support,
• Cleaned HTML code,
• Joomla! Update System support,
• English and polish language file included.

Those used to our Highlighter GK4 release will notice that the administration panel of module has been redesigned. Especially evident in the case of Joomla 3.x, where we matched his appearance to Bootstrap framework. Although the main options group has not changed, just new options and parameters have been added.

The Basic settings tab

One of the most useful new features of Basic Settings is the option to save and load module configuration. This makes it possible to save your module configuration and, if needed, to load and restore settings. Of course you can still add suffix or module ID to change to change the appearance of the module.

The Data Source tab

Parameters connected with the choice of type of data source used for generating module content and its filtering.

The Layout tab

Those options are used to set the module’s layout parameters, border radius and colors of interface. As you can see you don’t have to change CSS styles to make a little change of used colors for background or/and intro text.

The Animation tab

There you will find option connected with Animation effects.

The Additional settings tab

This tab allows additional module functionality to be activated via module settings. Mootools and jQuery are two very popular JavaScript frameworks but if you try to call both at the same time, there will be a crash between them. That’s why we allows you to choose which JavaScript library will be used to avoid such a conflicts. Joomla 3.x includes these libraries so that module and webmasters can avoid this problem using only one library. It is our opinion the jQuery is a lot better suited to a lot of tasks in Joomla! 3.x.

More about main option you can read here.

The post Highlighter GK5 Joomla module appeared first on GavickPro Documentation.

The new Grid GK5 module for Joomla 2.5/3.x is composed of a set of modules and their spatial relationship with each other. With the Grid GK5 module, you can implement space-saving grid-based layout on websites and incorporate a variety of content types via different modules. It works by placing elements in optimal position based on your settings, sort of like a mason fitting stones in a wall.

You’ve probably seen it in use all over the Internet. It provides a fluid solution and makes moving elements a joy! With built-in support for module embedding, the possibilities for implementing this release are unlimited! Grid layout can be used to intelligently reflow elements within a webpage. Module offers horizontal & vertical grid layouts. Just few clicks to create attractive portfolio, news wall or gallery with photos & movies with social links etc.

Like tables, the Grid GK5 enables to align elements into columns and rows, but unlike tables, the Grid doesn’t have content structure, and thus enables a wide variety of layouts not possible with tables. Modules can utilize that organization through various properties. By separating the layout structure from the content it will be easier to modify layouts for multiple (desktop, tablet and mobile) devices. The grid is fluid and flexible, because the module is fully responsive (RWD) – especially if all included into the Grid modules will be also responsive.

The way that Grid displays blocks has been changed from v1.2 in order to reduce the risk of a 1-pixel space appearing between the blocks. We have used the minimum scaling of blocks combined with an increase in the values of the z-index.

Module configuration

The Grid is a module, this means that you have more scope than if it was a component. Thanks to the amazing grid management system we’ve integrated into the module, it remains easy, intuitive and quick to configure. Nevertheless, we wanted to bring its use by writing this documentation.

Basic Settings – “BASIC” tab

Basic settings

The “Module ID” option allows you to specify your own static module ID. If this option will be blank then the automatic module ID will be created.

The “Module Suffix” is used to set a suffix representing a custom style.

The “Grid margin” option allows you to specify a margin for wrapper with the grid items. Useful if you need to hide edge borders with negative margins.

The “Grid border” are the horizontal and vertical dividing lines of the grid. And this option allows you to specify a border around the grid items. Default value is zero (no borders). To get gray thin border use this short CSS style:

1px solid #ccc

GRID SETUP tab

Here you will find simple Grid creator which allows you to add modules. The most important change in module since 1.2 version heralds the end of restrictions to the proportions of Grid blocks. With these new options, you may easily specify the proportions of blocks between the height and width units – ‘1’ means that one height unit is equal to one width unit. This value is rounded up to 2 decimal places — independently for different types of devices. This way the blocks may have different proportions on tablets, smartphones and on other desktop browsers.

You can specify the proportions for desktop, mobile and tablet view

This new feature for the Grid GK5 module significantly increases its usage possibilities and make it a viable option in even more situations.

Grid setup – no defined blocks

Grid – adding new module

Each block is defined by the following parameters:

• Name of module positions
• Size desktop
• Size tablet
• Size mobile

Sizes are given in blocks and width can be no greater than 6 on the desktop, 4 for tablet view and 2 on mobile view.

Four modules on the Grid layout – an arrangement suitable for landscape orientation

The position of the module can be given simply as: mygrid, myposition or even user1.

Seven modules in Grid layout

Grid GK5 – configuration II

Grid GK5 – configuration II – setup

Then system will load the first module from this module position list. But you can also use the following syntax: myposition [3]. Then Grid system will use a third module only from this position modules list. With this mechanism, you can use only a few module positions with a number of modules inside. But we suggest to use custom module position names not used by template framework, this allows you to keep order in Module Manager. Because you will know which ones you use in the Grid and which one are published like standard modules.

Custom module position for Grid GK5 purposes

The most important facts:

• The smallest grid element is 1×1 square, where “1” means 16.666666% in the desktop layout, 25% in the tablet layout and 50% in the mobile layout.
• The width will be fluid, because the biggest width for the desktop layout is in example 1200px and the smallest is 840px, so one unit is in range “140-200px”.

Of course elements (modules) in the list can be sorted using drag and drop feature. It means when you “grab” an object you can drag it to a different location (up or down).

ANIMATION tab

Settings on this tab are used to determine the module’s animation style.

The “Animation” option allows you to enable or disable animation of the grid.

The “Random animation” option allows you to enable or disable random animation of the grid blocks.

The “Animation speed” is used to choose animation speed (fast = 250ms, normal = 500ms, slow = 750ms).

The “Animation interval” option allows you to specify animation interval in miliseconds.”

The”Animation type” option is used to select the animation type from popular effects: opacity, scale, rotate and slide.

ADVANCED SETTINGS tab

In this section you can change Tablet and Mobile width for the grid – used in the media-queries. Also enable/disable JavaScript libraries or default CSS for this module.

Honestly, not many big Joomla! developers have gone truly Grid system module like we did. But of course, if you have any thoughts or questions please do not hesitate to write your opinion/ideas on our support forum.

Messages

Since version 1.2, we’ve also added a new important element as well – from now on after each change in the grid settings, a prompt reminding you of the need to save the module settings appears. It has been created to prevent situations where someone modifies the module and forgets to save the changes.

Errors and warnings

If one day you will see this message “Error: Specified module position doesn’t exist or is blank!” – it means that you probably made a small mistake. For example you forgot to assign module to this same menu position as The Grid or you made a spelling mistake in the name of the module position.

The post Grid GK5 Joomla module appeared first on GavickPro Documentation.

Tabs GK5 Module code and notes regarding styling

Our primary objective in producing the Tabs GK5 module was to simplify the HTML and JavaScript code. The use of HTML5 has opened up new possibilities for us.

A key difference between the new Tabs module and the previous version (Tabs GK4) has to do with the introduction of data-* attributes versus the use of global Javascript variables.

Schematically, Tabs GK5 module code with a basic configuration appears as follows:

<div id="[TAB ID]" data-config="[TAB CONFIG]">
<div>
<ol>
<li data-animation="[TAB ANIMATION]">[TAB NAME]</li>
<li data-animation="[TAB ANIMATION]">[TAB NAME]</li>
<li data-animation="[TAB ANIMATION]">[TAB NAME]</li>
</ol> 

<div>
<div>[TAB CONTENT]</div>
<div>[TAB CONTENT]</div>
<div>[TAB CONTENT]</div>
</div>
</div>

<div>next</div>
<div>prev</div>
</div>

Following is an explanation of the code elements:

[TAB ID] – module ID
[TAB CONFIG] – object in JSON format which defines a module’s configuration as per the following example:

{
'activator':'click',
'animation':'0',
'animation_speed':'250',
'animation_interval':'5000',
'animation_type':'slide_vertical',
'animation_function':'Fx.Transitions.linear',
'active_tab':1,
'cookie_save':'0',
'auto_height':'1',
'module_height':'300'
}

To ensure compatibility with HTML5, quotation marks (sometimes called “inverted commas”) have been replaced with apostrophes. However, these are automatically converted back to quotation marks for the purpose of JSON object parsing because the JSON notation requires the use of quotation marks.

[vertical|horizontal] – the selection of class to add – vertical or horizontal class – is dependent upon the position of the tabs. A vertical class is added where the tabs are located in the left or right position, whereas a horizontal class is added for those in the top or bottom position. These classes are used to differentiate styling for the layout of the current tabs instance.

To distinguish between vertical tab element styling and horizontal tab element styling, a selector must be defined in code as follows:

.gkTabsWrap.vertical

or

.gkTabsWrap.horizontal

[active] – refers to a class added to an active tab and a container including its content, and is used for styling active elements.

[TAB ANIMATION] – the name used to refer to an animation in a given tab, e.g. default

[TAB NAME] – a tab’s name as set by a user. When the “Use additional spans” option is switched on, a tab name is incorporated with a element and the code as follows:

<li data-animation="[TAB ANIMATION]">[TAB NAME]</li>

Changes to:

<li data-animation="[TAB ANIMATION]"><span>[TAB NAME]</span></li>

[TAB CONTENT] – a tab’s content as defined by a user as HTML code or a module.

It’s worth understanding that the fragment:

<div>next</div>

<div>prev</div>

is optional and will be shown when switching on prev/next buttons and using tabs in the Top or Bottom position.

In the case of setting tabs positioned in the Left or Right position, the code:

 <ol>
<li data-animation="[TAB ANIMATION]">[TAB NAME]</li>
<li data-animation="[TAB ANIMATION]">[TAB NAME]</li>
<li data-animation="[TAB ANIMATION]">[TAB NAME]</li>
</ol>

<div>
<div>[TAB CONTENT]</div>
<div>[TAB CONTENT]</div>
<div>[TAB CONTENT]</div>
</div>

will change to:

<div>
<div>[TAB CONTENT]</div>
<div>[TAB CONTENT]</div>
<div>[TAB CONTENT]</div>
</div> 

<ol>
<li data-animation="[TAB ANIMATION]">[TAB NAME]</li>
<li data-animation="[TAB ANIMATION]">[TAB NAME]</li>
<li data-animation="[TAB ANIMATION]">[TAB NAME]</li>
</ol>

As not all styles are the same for tabs in the Top/Bottom and Left/Right positions, use of the following selectors for styling of tabs in the Left and Right positions is recommended:

.gkTabsWrap.vertical .gkTabsContainer + ol
.gkTabsWrap.vertical .gkTabsContainer + ol li

JavaScript Code

In the module’s JavaScript code, there is one important fragment common to both the MooTools and jQuery frameworks:

if(typeof gkTabEventTrigger !== 'undefined') {
gkTabEventTrigger(i, current_tab, module_id);
}

This code is called each time the current tab is activated. This triggers an external event which has been configured by the module user. This is possible when a user defines the function in a form as in the following example:

gkTabEventTrigger(clicked_tab, current_tab, module_id)

As you can see, this function loads three arguments:

1. clicked_tab (“i”) – ID of the tab which was clicked (indexed from 0)
2. current_tab – ID of the tab active at the moment of clicking
3. module_id – attribute value of the module id

The first two variables uniquely identify which tabs are active (or animated) whereas the third one indicates the event source and indirectly allows the DOM structure of the current module to be acquired (also module configuration data saved in a data-config attribute).

This functionality was first used in the AppsProTech template and it allowed GavickPro to add animation of a moving arrow without modifying the module structure.

For the AppsProTech template, an arrow had been added to the specified modules (with a given suffix) and animation was requested by the gkTabEventTrigger function.

In practice, the possibilities for such a function are even greater. For example, it is possible to animate other areas of the template after clicking on a given tab in a specific module.

External source data

The option to use external data sources is one of the most exciting changes introduced in the Tabs GK5 module. Files in either the XML or JSON format may be used. Simply position a file with data in the defined format (see the “external_data catalog”), set the “Module data source” option to “External files” and on the “External sources” tab select a file using the “Source file” option.

Example of a JSON file:

[
{
"name": "Test 1",
"type": "xhtml",
"content": ":)",
"published": "1",
"access": "4"
},
{
"name": "Test2",
"type": "module",
"content": "tab1",
"published": "1",
"access": "1"
}
]

Example of an XML file:

<?xml version="1.0" encoding="utf-8"?>
<tabs>
<tab>
<name>Test 1</name>
<type>xhtml</type>
<content><![CDATA[:)]]></content>
<published>1</published>
<access>1</access>
</tab>
<tab>
<name>Test 2</name>
<type>module</type>
<content>tab1</content>
<published>1</published>
<access>1</access>
</tab>
</tabs>

Fields from the XML and JSON files have the following meaning:

• name – tab’s name as displayed in a module
• type – gets xhtml or module value – specifies content type of the tab
• content – in the case of types set as a module, it includes the position names the module is loaded into. For types specified as xhtml, it may include any (X)HTML code
• published – returns a value of 0 or 1 depending upon whether the tab is to be displayed
• access – identifies an ACL group requiring access to a given tab

In the case where type is set to “module”, it is important to assign module positions not already defined within the template for module display; this will help to avoid the creation of duplicate modules. Also, when using a tabs manager, it is possible to easily define the names of positions used in the admin/elements/positions.json file.

Important Note to Developers

The most important thing to remember here is that it is now possible to configure custom data capture and presentation solutions by using the Tabs GK5 module in conjunction with other extensions. This can already be done at the presentation layer. However, this concept may be further extended when considering those other extensions which themselves store values in external files. It now becomes possible to trigger events and actions and to share or transfer data elements in the back-end through the use of programming.

The post Joomla Tabs GK5 module for Developers appeared first on GavickPro Documentation.

First of all you need video and its code – you can use almost any from youtube or similar web-service. Embedded videos can be played on any Web page or site that supports embedding content. Google will give you the code, and you just need to copy and paste. The first step is to click on “Share” and then on “Embed” to find the embed code, as shown below.

Then in Tabs GK5 add new Tab and inert generated before code.

Video code from YouTube

Video form YouTube but inserted using Allvideos plugin

Save the changes & publish module.

The post Use our Tabs GK5 module for joomla to add complex & interesting tabbed video content appeared first on GavickPro Documentation.

The Tabs GK5 module for Joomla! (2.5/3.x) is the next evolutionary step forward in the GavickPro solution to managing Web page content via tabs. With this module, you can implement space-saving tabs on websites and incorporate a variety of content types via modules or user-defined custom HTML code.

GK tabs – style 1

GK Tabs – Style 4

This new version of GK5 introduces some valuable and essential improvements for our customers. If you have been craving a more flexible tabs module, we have definitely responded, having implemented improvements in areas of administration and content display.

Tabs GK5 introduces support for external data sources in the JSON and XML formats, and it includes options for vertical tabs layout and for automatic height adjustment based upon the content. This version is also scalable, making it appropriate for websites based upon Responsive Web Design. We’ve also addressed the issue of javascript frameworks, ensuring the module supports both MooTools and jQuery.

Following is a list of improvements to be found in Tabs GK5:

• Load & Save configuration
• Full access control list (ACL) support for tabs
• JSON / XML support as the external sources
• Option to set individual ID for each tab
• Option to set individual animation for each tab
• Auto-height
• Scalable layout
• Vertical scrolling animation
• Support for stop auto-animation on hover
• MooTools & jQuery javascript frameworks support
• Cleaned HTML5 code
• Recoded and restyled back-end
• 12 built-in styles (6 horizontal and 6 vertical) using CSS3 instead of images

Module configuration

Those used to our Tabs GK4 release will notice that the administration panel has been redesigned. Behind the scenes, we’ve updated the code responsible for the module’s configuration panel. Although the layout of the main options group has not changed, new options and parameters have been added.

Basic Settings – “Basic” tab

One of the most useful features of Basic Settings is the option to save and load module configuration. This makes it possible to save your tabs configuration and, if needed, to load and restore the tabs settings. Configuration files are saved in a config catalog for the module. If saving with an already-existing file name, a number will be appended to the filename to make it unique. You can also delete configuration file.

Options for the module’s ID allows you to configure whether the module ID will be set automatically (“Automatic module ID”). If this option is switched off, a unique identifier must be manually applied to each instance of the module. The use of a unique ID for each module instance is important with respect to the website’s validation code, but it also allows individual styling. Another benefit to a unique modue ID is the ability to detect the source of a tab change event from the gkTabEventTrigger function, further described in the developer’s section.

Tabs GK5 supports the now-standard “Module suffix” function, which allows unique CSS-based styling to be assigned to the module.

This section has the important “Module data source” option. This allows you to specify whether tabs are created using information found in the “Tabs” tab or if the necessary information is loaded from an external file in JSON/XML format. The external file format is described in the developer’s section.

The “Tabs” tab has bee replaced with “External Sources” for the purpose of selecting an external data source.

With the “Source file” option, you can choose the module configuration data file to load. It must be in the ‘external data” catalog and in its specialized format.

Managing tabs

Creating new tabs is made by clicking “Add new tab” button after which a form for adding a tab will appear:

The “Content type” tab is used to select any Joomla! module or Custom HTML code as content for the tab. To place a single article in the module we recommend using the News Show Pro GK5 module .

The “Content” allows you to specify either HTML content for the tab or the module position to be used to load the module inside the tab. You can enabled also movies from youtube or Vimeo (read more).

Following are three improvements over the previous version:

• In the “Access” field, all Joomla! ACL groups appear;
• The new “Tab ID” field allows a unique ID to be specified for the given tab, enabling unique tab styling;
• The new “Animation” field makes it possible to specify a different type of animation for each tab. You can choose from four type of effects. To use an animation from the animation section settings, select the default animation in this option. This option only works if the option ‘Animation type’ in the ‘Animation’ section is set to ‘Custom animation’

A selected tab may be edited after saving:

Buttons on a tab’s bar may be used to remove the tab (x), (un)publish the tab or to alter its position amongst the other tabs. The value of the “State” parameter may also be changed. An edit form for the current tab will be displayed when the Tab name is clicked; this is also triggered when a new tab is added:

A tab’s bar also includes the following information:

• the tab’s name;
• he ACL group for the current tab; and,
• the content type (HTML or module).

It is important to note that new tabs and modifications to existing tabs made within the Tabs Manager are only retained when the module settings are saved.

If you are using modules as a Tabs – you have to select for them module positions from tab1, tab2, tab3….tab10 and of course publish them.

Modules must be published on tab1..tab10 positions to be show

Interface options – “Interface” tab

The “Interface” tab provides options to set the overall look of the module:

A predefined module style may be selected using the “Module style” option.

There are three main module interface elements:

• Tabs
• Tabs content
• Prev/Next buttons

Module layout is modified based upon the value set for the “Tabs position” option.

In the case of “right” and “left” layouts, a module always has the height specified by the “Module height” option; additionally, the width of a block with tabs is equal to the width specified by the “Tabs width” option.

The “Module auto-height” setting triggers a module’s height to be altered based upon the amount of content in a given tab and functions with the “top” and “bottom” layouts.

As its name implies, the “Prev/Next buttons” option is used to enable or disable the prev/next buttons. Remember that for “right” and “left” layouts, these buttons are switched off automatically.

As another example of the expanded support for custom styling we’ve introduced in this release, you can now easily add an additional container in the tab’s code for custom module styling using the “Use additional spans” option. This would change the tab’s code as follows:

<li>Tab</li>

to:

<li><span>Tab</span></li>

Find more information about styling of the Tabs GK5 module in the “Module code” section.

Animation parameters – “Animation” tab

The “Animation” tab is used to specify animation parameters through the following options: “Animation speed”, “Animation interval” and “Animation transition”. These three parameters specify the rate of speed of an animation, the length of intervals between animations when “Auto animation” is in the on position, and animation transition (the way in which animated values change), respectfully. Transitions are animations used to keep users oriented during user object manipulations, and make those changes feel smooth instead of jarring. They are used to communicate to users non-verbally, and to make state changes more natural and less noticeable. The more attention an animation effect demands, the shorter the duration should be.

The animation type can be specified via the ” Animation type” option. There are now three types of animation:

• Opacity – transparency animation
• Slider (vertical) – vertical animation
• Slider (horizontal) – horizontal animation

The “Swipe gestures” is used to enable swipe move gestures (finger being moved) on the mobile devices. Please remember that it should be activated only when the content of the tabs doesn’t contain modules which also uses the swipe gestures.

Animations may be requested in two ways: automatically with the “Auto animation” option set to the “On” position, or with the tabs. To specify how an animation may be requested, the appropriate “Animation activator” option must be set from the following:

1. Click – animation request by clicking a tab given
2. Mouse over – animation request by mousing over a tab given

Additional options – “Advanced settings” tab

The “Advanced settings” tab allows additional module functionality to be activated, and for the approach to loading CSS and Javascript files to be determined.

The “Initial tab” option allows you specify initial tab number.

The “Tab selection from URL” option is used to specify whether a tab identified by ID via the website address (URL) will automatically be loaded as the default tab (for that session). For example, switching this option to “On” and setting the Web browser to point to the URL http://yourdomain.com/index.php?gktab=3 would cause the third tab in the set of tabs to be displayed initially upon page loading.

Alternatively, when in the “On” position, the “Tab selection from cookies” option forces the ID of the tab last used by site visitors to be saved to cookie files. This way, when visitors return to the site, the last tab viewed on their previous visit will be automatically displayed when the page loads.

Important to note is that in the case of the “Tab selection from cookies” option, each module saves a separate cookie file whereas in the use of the gktab parameter in the address, you can expect the identified tab to be loaded for each instance of the Tabs GK5 module on a given website.

The “Parse plugins” option enables the use of plugins from the Content group within tabs content. The four remaining options from this group are related to external CSS and JavaScript files.

The “Use CSS” and “Use Script” options allow you to specify how cascading style sheet (CSS) files and scripts are loaded. In the case of CSS files, file loading may be switched on or off. An automatic mode setting exists for scripts which, when enabled, ensures that an instance of Tabs GK5 will not load when another instance has been detected as loaded from thesection. However, if problems arise when using the automatic mode, we recommend setting the “force enabled” or “force disabled” options, depending upon whether a script must be added or not.

The “Used Javascript framework” option may be used to specify which script version must be applied. In the case of templates based upon the jQuery framework, we recommend not to use a script version for the MooTools framework because it is known to cause redundant additional JavaScript framework code loading.

Additionally, when a given template automatically loads the jQuery framework, we recommend switching the “Include jQuery framework” option to “On”. The “Include jQuery framework” should also be loaded for those templates where neither the MooTools nor jQuery frameworks are loaded.

GK Tabs Module updates

Joomla 3.x and Joomla 2.5 has an Extension Updater feature, because of that since version 1.3 we added support for Joomla! Update System for our module. That’s why information about available update to the Tabs GK5 module is displayed on the Extension Manager:Updates area.

If there will be a newer version of an Tabs GK5 available, you’ll receive a notification. When you log in as an administrator you will see on red background number that indicates the number of extensions for which there are available updates, for example, Updates are available [2]. Now you will be able to update all extension by one click. Of course you can still install the latest ZIP package via the Joomla! Installer (Extension Manager).

The post Tabs GK5 tabular display module for Joomla appeared first on GavickPro Documentation.

News Show Pro GK5 is the next generation of our best module for presenting articles in both Joomla! 2.5 and Joomla! 3.x. Huge amount of options and possibilities of formatting causes NSP GK5 is a complex tool in making www pages content attractive. Module is appropriate while preparing simple structures with an individual article, the same as, complex arrangements including few articles and a list of links. That’s why we use this extension regularly in our Joomla! templates. Of course you can use this module also with others not only Gavick templates also multilingual.

In this article we have described also few tips associated with its customization & translation, for example, how to change label or add titles (check at the bottom). Version 1.4.0 also introduces several new features, created based on feedback from our users; you can see these new features in action in our latest template for information portals, News 2.

In comparison with NSP GK4 brings a lot of changes. The newest version of our News Show Pro GK5 module, the most advanced content-display module available for Joomla, includes a host of great improvements and fixes.

Module configuration

Those used to our NSP GK4 release will notice that the administration panel of module has been redesigned. Although the main options group has not changed, new options and parameters have been added.

List of content:

• Basic Settings
• Data Source
• Joomla! Content Additional Settings
• Easy Blog Settings
• K2 Additional Settings
• News Gallery Settings
• Portfolio I – Portal Mode Settings
• Portfolio II – Portal Mode Settings
• Video Gallery – Portal Mode Settings
• Video Gallery – Video List Mode Settings
• HikaShop Additional Settings
• Links layout settings
• Thumbnails Settings
• Animation
• External files
• Configuration check

Extra Tips:

• How to add titles under images in Portfolio style
• How to change What we do (GK Creativity template)
• How to hide MORE WORK button
• How to translate phrases in News Show Pro GK5 module

Basic Settings – “Basic” tab

One of the most useful new features of Basic Settings is the option to save and load module configuration. This makes it possible to save your NSP configuration and, if needed, to load and restore settings. Configuration files are saved in a config catalog for the module. If saving with an already-existing file name, a number will be appended to the filename to make it unique. You can also delete configuration file, if you don’t need it anymore.

The “Module ID” option allows you to specify your own static module ID. If this option will be blank then the automatic module ID will be created.

A predefined module style: Standard mode, News Blocks, News Gallery, Portfolio, Video Gallery, Video List, Product Gallery, Title Overlay or Highlights – may be selected using the “Module mode” option.

When “Use own article format” option will be enabled then the module uses to generate article structure the code from folder article_formats. Remember that the file with the code must be selected from the list in the ‘Article Format’ section. In the Article Formats, since version 1.3, a few new tags for K2 items have been added: {TAGS}, {VIDEO_HTML} and {CATEGORY_IMAGE_SRC}, additionally the {DATE} variable now gets format from information block settings. And since version 1.4.1 in the info blocks you can use the %CART and %PRICE tags if K2Store component is installed and used.

Managing content source – “Data Source” tab

Parameters connected with the choice of type of data source used for generating module content and its filtering. Data source can be:

• Joomla! Content (categories or articles).
• K2 Content (K2 items, K2 categories, K2 Tags or K2 Authors).
• Virtuemart (products or categories)
• HikaShop (products, categories)
• Easy Blog (articles, categories, tags or authors)
• JSON file
• RSS feed
• XML file

In the case of categories, you can choose categories from multiple choice list (use CRTL key) whereas when you want to present articles chosen.

In the next versions of the NSP GK5 module, we plan to implement more supported popular components.

The “News order” options are for specifying the way of sorting articles from few possibilities: date, title, ID item order, randomize or hits amount.

The “First news number” is used to show articles from a range specified, this option gives possibility to show, e.g. articles starting from fifth article (if value = 5).

The “Show article created after” allows you to show articles created after specified period of time. That’s why it’s possible to specify the oldest article/items to be presented.

The “Show article created in last X days” – is used to show articles from a specific date range (last 7 days, last 30 days or more days).

The “Show featured items” – allows you to enable showing featured articles/items or to show only them.

The “Show unauthorized items” – allows you to disable showing unauthorized items.

The “Time offset” option is useful only when you have a problem with time zone between your location and your hosting location (i.e. when new articles are showing with few hours delay).

Joomla! Content Additional Settings

The “Thumbnail image” option allows to select whether thumbnails are generated from intro or full article image. The available options are: Intro image, Full image or Use first article image.

The “Comments Source” -option allows you to specify the comments source for the Joomla! Content (None or Komento component).

Easy Blog Additional Settings

The “Comments Source” option allows you can specify the comments source for the information block (Easy Blog or Komento).

The “Hide current article” option if enabled it hides the currently displayed article from the module – use it if you want to avoid duplicated content on the specific subpages.

The “Base image size” option allows you to select the base size of the source image (Original, Thumbnail or Icon).

K2 Additional Settings (tab)

The “Comments Source” option allows you to specify the comments source for the information block (K2, Jcomments or Komento).

The “Base image size” option allows you to select the base size of the source image. Those sizes are connected with K2 Image Parameters, the available options are: Generic, XSmall, Small, Medium, Large and XLarge.

News Gallery – Portal Mode Settings (tab)

News Gallery – Portal Mode Settings

This mode is good if you want to show only images from selected Joomla! articles or K2 item and they would be link to those sources. It doesn’t show any other information blocks like title or comments. This style use nice “>” icon after mouse rollover on image. Remember to enable Use default CSS option in External files tab in you want to have following appearance.

Example of News Gallery mode (images in 3 columns)

The “Amount of news” – allows you to specify amount of news (articles/k2 items) to show.

The “Amount of columns” – this option specify amount of news columns displayed in the portal mode.

The “Pagination type” – this option allows you to select what kind of pagination you want to use (Arrows or Pagination dots)

The “Autoanimation” – allows you to enable or disable animation effect.

Portfolio I – Portal Mode Settings (tab)

This style was first time used in GK Creativity template in module named “What we do – We create ideas with passion! See our current works“.

The “Creativity initial anim” – enable this option only on the Creativity template.

The “Amount of columns” – this option specify amount of news columns displayed in the portal mode per page.

The “Amount of rows“- this option specify amount of news rows displayed in the portal mode per page.

The “Amount of pages” – this option specify amount of pages displayed in the portal mode.

The “Link at the bottom” – If you have one page you can disable link (“More work”) at the bottom totally or hide the bottom button after loading all pages.

The “URL for the link” – this option specify the link displayed at the bottom after loading all items.

Portfolio II – Portal Mode Settings (tab)

Portfolio II – Portal Mode Settings

The “Amount of columns” option – allows you to specify amount of news columns displayed in the portal mode per page.

The “Amount of rows” – this option specify amount of news rows displayed in the portal mode per page.

The “Category filtering option” – allows to enable the category filtering in the portal mode. You have to select in Data Source tab at least two categories to make sense this feature.

The “Overlay popup” – this option enables the pop-up windows with details after clicking the image.

First time we used this style in GK John S. template as you can see at the following image.

Portfolio II – Portal Mode Settings

Video Gallery – Portal Mode Settings (tab)

Those features allows you to use video from K2 items & present them inside module.

The “Video popup” – you can disable the video popup which is displayed when article contains a video in K2 component.

The “Popup width and height” – allows you to set Popup window size.

The “Amount of pages” – allows you to set amount of pages with articles. When bigger than 1 – then the auto-animation will be automatically enabled.

The “Articles per page” – this option allows you to set amount of articles displayed on one page.

Appearance of NSP GK5 module set as Video Gallery mode in GK Game template – after clicking of image

Video Gallery – Video List Mode Settings (tab)

Our latest News 2 template inspired us to create a brand new video portal mode, Video List. Now for example 5 video images can be displayed, and all of them can be clicked to open the video overlay.

Portal mode with video support

It allows you to create a scrollable list of items, which when clicked will display a clean, unobtrusive video overlay provided by the K2 video component. With components other than K2, such as standard Joomla items, normal articles will be displayed without overlays.

Remember that K2 items must have added video code and images – which are used to show as a screen shots from movies in module. Video in K2 can be added also via All Videos Reloaded plugin, so you can use it.

Video List – Portal Mode Settings

The “Video popup” option allows you enable/disable the video pop-up which is displayed when article contains a video in K2 component. When this option will be disabled after clicking on item user will be redirect to item page where he can read whole article and also see movie if it is available.

Options like “Amount of pages” allows you to add pagination with “color dots” under slides. So it’s possible to add much more than 5 videos to the video area, since scrolling buttons have been introduced to slide between different video sets; now you can have 10 or more videos accessible directly on the front page, but load time isn’t affected since the video is only loaded to be played when the image is clicked; until then it works just like a normal news showcase.

HikaShop Additional Settings (tab)

Settings for HikaShop – remember that this component must be installed to use this feature

The “HikaShop menu item ID” – you can specify here item ID of HikaShop menu item – used for generating URLs alias – good choice can help your SEO.

The “Show out of stock products” – this option allows you to enable/disable displaying out of stock products.

The “Show add to cart button” – this option allows you to enable/disable displaying a Add to cart in NSP module, which allows users to buy products from it – without going into product page.

RSS Additional Settings

The “RSS Feed cache time” – is used to specify cache time for the downloaded RSS feeds (in minutes). We suggest to use long period of time, for example, 1440 minutes = 1 day.

Article layout settings

This section gives you access to few accordion tabs with setting for article layout.

The “Article pagination” – amount of pages with articles intro, amount of columns & rows and style of pagination.

“The Header” – specify position, floating, link and width limits. The “Image” – allows to setposition, floating and make linkable.

The “Text” – allows to set position, floating, link, text width limits and option to clean HTML code).

“The Information block” – allows to set position, floating, link, info format based on STRINGS, date and avatar settings. Each article can display two information blocks. For each, we can specify displayed data format.

Inside Info format field you can use the following sequences:

• %AUTHOR – displays author name (we choose exact name source in “Author name” option) and avatar from Gravatar.com service (if “Show author avatar” option is on; we specify avatar size in “Avatar size” option) and author link in info block for EasyBlog.
• %CATEGORY – displays category name (we can switch on a link to a category in „Category link” option)
• %DATE – displays article’s creation or modification date (according to “Used date” option), date format is specified in “Date format” option
• %HITS – displays article amount of visits
• %RATE – displays article rate
• %COMMENTS – displays the amount of comments for specific item
• %CART and %PRICE tags – if K2Store component is installed and used.
• %STORE – displays the price and “Add to cart”/”View product” buttons if VirtueMart or HikaShop is installed

The “Article layout” – group of options, there are options connected with elements padding and order of all elements like Text, Image, Info block and also Read more options. It is also possible to switch off each element.

Links layout settings

Links Layout settings

The “Amount of pages with links” allows you to specify number of pages with links. If set to 0 it disables pages with links completely.

The “Amount of links” option allows to specify number of links per page.

The “Amount of links columns” option allows to define number of links columns in links section.

The “Display images” option allows display thumbnails (small image) on the left side of the links. You may specify the size of the thumbnails in the Thumbnails section.

The “Links block margin” option allows to define margin for links block as a CSS value, for example, 10px 15px 0px. Additionally, you can specify blocks position towards articles “Links position“. In each link, it is possible to show article’s short description “Show links description” and specify title text limit and its description.

The “Link under links” – this option allows to enable link under links similar as you can see in demo “MORE FROM THIS CATEGORY”. Very often the content of the module is linked to a specific subpage of our website; that’s why we’ve made it possible to add a fully-customizable link (the Link URL field) that may be display under the block of links.

In “Link label” field – you can specify the links label, if not, default (“More from this category”) from language file will be used. Check below phrase line from en-GB.mod_news_pro_gk5.ini file:

MOD_NEWS_PRO_GK5_LINKS_TITLE_LABEL_DEFAULT="More from this category"

Links layout demo with small images

Thumbnails Settings

Thumbnails Settings in NSP GK5

The “Responsive images” – allows you to use all features of the responsive web design layouts, it automatically adapt your module images for mobile devices. When this option is enabled then image always scales up to the 100% width.

The “Wrap content” – enable this option if you want to achieve news layout where the image is at left side and the rest of content is at the right side, then the Image must be set in the article layout as first and should be floated to left.

The “Memory limit” option is useful if you exceed your memory limit during module work or you set the memory limit in the other place to different value.

The “Use cURL download for external images” option is helpful if you have external images or images with absolute paths on the articles and you want to create the thumbnails from these images then you can enable this option. Please remember that you should have permissions to download these images. It will be saved on the cache directory in the downloaded/ catalog. Please remember that first load can take longer time. We don’t recommend to use this option for modules with frequently changing articles, because it can slow the page loading speed due additional data requests.

The “Create thumbnails” option will use PHP GD library to generate thumbnails from article images.

The “Image auto-scale” option will automatically center image and zoom to the specific size. It works only when image stretch and keep aspect ratio options are disabled. If this option is off (disabled) then you will see Image crop settings.

The “Keep aspect ratio” option is useful when you want to keep aspect ratio of created thumbnails. Then thumbnail width and height options mean maximal possible dimensions.

The “Thumbnail dimensions” – option allow you to sets the dimension (width and height) on which the maximum pixel size limitation should apply to for the thumbnail. For the dimensions of your thumbnails you have to find a good compromise: thumbnails with smaller dimensions result in smaller files sizes and therefore the thumbnail page loads very fast. The drawback of small dimensions are obvious: if you pick numbers that are too small, your visitors cannot figure out what will be shown and therefore would not care to click on the thumbnail to read whole article. Set width and height for the thumbnail to the same value – to create square thumbnails.

The “Image margin” – option allows you to sets the margin property for all directions in one declaration (Top, Right, Bottom, Left). Negative values are also allowed. The margin property is supported in all major browsers.

The “Links thumbnail dimensions” – option allow you to sets the width and height for created thumbnails from articles images from Links section.

The “Links image margin” – allows you define margin for images as a CSS value (i.e: 6px 5px 0px 0px).

The “Thumbnail background” – allows you to set background color (in HEX value) under image, this might be important when created thumbnail would be smaller than defined above its size.

The “Thumbnail stretch” – if enabled the thumbnail function stretches the thumbnail’s dimensions, both width and height, to fill the square or rectangle shape defined in the ‘Thumbnail dimensions’ setting.

The “Thumbnail quality” allow you to choose thumbnail quality for generated images, it’s lossy compression method. Lossy means “with losses” to image quality. The more compression level you apply, the more information from photo you’ll lose. Large featureless areas (skies, desert, etc.) compress much better (smaller file) than images containing much tiny detail all over.

The “Default image crop settings” – where you can specify here the default crop settings for images. These settings will be used if the image doesn’t have duplicates with _noscale and _nocrop settings and if the image isn’t qualified to the crop rules.

Crop settings

The “Crop rules” – you can define two types of crop rules: connected with the class name used in the image and connected with the image size. The first type has following syntax: CLASS_NAME=TOP:RIGHT:BOTTOM:LEFT; where TOP/RIGHT/BOTTOM/LEFT are crop values in pixels. The second type of rules has following syntax: WIDTH:HEIGHT=TOP:RIGHT:BOTTOM:LEFT; where WIDTH and HEIGHT are dimensions of the image to crop.

The “Images filters” – filters are a powerful option that you can use to get interesting visual effects (blurring, grayscale, brightness or contrast etc.), they allow you to visually process an image on the website inside module without needing to go through PhotoShop or Gimp. You can apply an arbitrary number of filters one after the other to achieve all sorts of effects. But at the same time they might have an little impact on the performance of your site. So using them properly will have minimal impact on the speed of your site.

Animation

There you will find option connected with Animation effects. If you use “Hover animation” option, it is possible to switch on animation activation after moving a cursor on a pagination button (normally, it requires clicking on this button).

External files

The “Use default CSS” – if you enable this option module will start to using default CSS module file.

The “Using JS module” – using engine.js module file.

The “Used JavaScript framework” option allows you to select which JavaScript framework to be used, you can choose between MooTools and jQuery. This option may reduce JS conflicts.

The “Include jQuery framework” option is used to force loading of the jQuery framework by the module if the current template does not contain it.

Configuration check

This simple tool will check if all module configured properly, it will test your GD library configuration, cURL library configuration and cache directory permissions are proper. This option you should check first if you’ll notice a problem with the module.

The post The News Show Pro GK5 Joomla article showcase module appeared first on GavickPro Documentation.

We have created a new module called “GK JomSocial Feed” for the very popular social networking component JomSocial. This fully responsive grid extension for Joomla! allows you to show a profile photo with the current status from JomSocial in a module position. It allows you to implement space-saving blocks on websites and incorporate a variety of JomSocial statuses. In most cases this module will be useful together with Grid GK5, where it may be included on the grid. Inside the module settings there are a few useful options for selecting specific statuses.

Note: This module requires that JomSocial is installed to work properly; such commercial components are not included in our GK Quickstart packages.

GK JomSocial Feed Settings – “BASIC” tab

The “Module ID” option allows you to specify your own static module ID. If this option is left blank then a module ID will be created automatically.

The “Module Suffix” is used to set a suffix representing a custom style.

The “Content type” is used to select the type of content displayed in the module (status, profile photo or user profile).

The “User ID” option is for a specific user feed.

The “Offset” option allows you to select which status should be shown – you can load the second, third or other statuses from the feed using this option.

Status settings

The “Show avatar” option allows you to enable/disable displaying of a user’s avatar. It will take up 50% of the available area.

The “Avatar position” option allows you to choose the position of the avatar in the module (left/right).

The “Show more” option allows you to display the “Read more” button under the status text – then the link in the status will be disabled.

The “Show username” option allows you to display the username of the status author.

The “Read more text” field allows you to change the default phrase from “Read more” to any other of your choosing. If you would like to use another phrase for each installed language you should clone this module and translate this phrase. Leave it blank to get the text from the language file (en-GB.mod_gk_js_feed.ini).

The “Text limit (chars)” option allows you to specify the available amount of chars for the statuses. Default value is 100 chars.

Photo settings

The “Image type” option; you can adjust the quality of the image using this option. Available options: Original image, JomSocial image or JomSocial thumbnail.

The “Show text” option allows you to enable/disable the display of text over a photo.

The “Text position” option is used to specify the text position (bottom/top) in relation to a photo (user’s avatar).

The “Text color” option allows you to choose the text color that suits your photo with a light or dark style.

Advanced settings

The “Use CSS” option allows you to enable or disable using the module’s CSS file.

Where can I download it from?

Currently you may download this module via our template download section only. You will find it inside the following packages (for both Joomla 2.5 and Joomla 3.2):

• gk_msocial_rest_files_J!25.zip /or/ gk_msocial_rest_files_J!3.zip
• gk_musicstate_rest_files_J!25.zip /or/ gk_musicstate_rest_files_J!3.zip

However, it is likely that it will shortly be available as a standalone module in the “Modules for Joomla” section of our website. The GK JomSocial Feed has been released under the GNU/GPL v2 license.

The post Social sharing with the Joomla GK JomSocial Feed component appeared first on GavickPro Documentation.

In News Show Pro GK5 default Portfolio view don’t show K2 article titles below image, but sometimes you need this feature. Please note this is module customization, because you have to change a little bit a source code of it. First you have open in editor only one file from NSP module: mod_news_pro_gk5\portal_modes\portfolio\controller.php

In line 39 you have make some changes

echo ''.$this->parent->content[$i]['title'].'</a>';

Save changes and upload & replace “old” file with a “new” one. You have to remember about changes you’ve made if you will update module with new version in the near future, because it may override your changes.

Of course you can add title inside <span></span> if you need for customization purposes.

For example, titles uppercase effect, may look like this:

echo '<span style="text-transform:uppercase;">'
.$this->parent->content[$i]['title'].'<span></a>';

The post Add image titles in NSP’s Portfolio layout appeared first on GavickPro Documentation.

HIGHLIGHTER GK4 – is a simple Joomla! module for making a rotator for article headers. This is ideal solution for News websites to present short informations (for example, the results of football game) from Last Minute. Here are a couple of sample implementations:

This module offers four groups of options:

Options Group – ‘BASIC SETTINGS’ This is the most important options group for this module.

Module suffix and Module ID – The first three options are used to set the module suffix and its ID. A unique ID is required for the module to work correctly. Set ‘Automatic Module ID’ to the ‘ON’ position to have it resolve a unique ID automatically. If you have reason to set it manually, set ‘Automatic Module ID’ to ‘OFF’ and enter your module ID in the ‘Module ID’ field.

Data source and Joomla! Categories – ‘Data source’ is used to set the data source for the module. You are offered three options for the module data source:

• Categories from Joomla!
• Articles from Joomla!
• XML file

If you select categories as the data source, choose the appropriate category from the list provided. If articles is selected, the ID of each article must be entered in comma-separated format into the field provided (e.g. 256,12,86,34). Articles is a good choice to maintain static content in the module.

The last data source option offered – XML file – allows for the most flexibility. A properly-formatted XML file must be placed in the xml/ folder and be identified in this module setting for its data to appear. Through this option, data output from other components or scripts may be easily shared with the Highlighter GK4 module. Simply ensure the XML file is routinely regenerated with updated data from the other component(s) or script(s).

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<highlighter>
    <item>
        <title>Title 1</title>
        <desc>Item description 1</desc>
        <link>http://item1.title.com</link>
    </item>
    <item>
        <title>Title 2</title>
        <desc>Item description 2</desc>
        <link>http://item2.title.com</link>
    </item>       
</highlighter>

The above example refers to a file containing two records. The <title> tags are used to define a title for the information. A brief description for the record is placed within the <desc> tags, and a target URL (Web address) is placed between the <link> tags. A user would be redirected to that target address.

There is no limit to the number of items which may be added to the XML file.

The remaining options deal with filtering data when ‘Categories from Joomla!’ is selected as the data source:

• Amount of articles – defines the maximum number of items to display
• Sort value and Sort order – defines the way articles are to be sorted
• Show only articles created after – used to filter in articles older than the data specified
• Show featured articles – sets the module to display articles marked as ‘Featured’ Disabling this option causes re-filtering of the articles
• Show unauthorized – overrides access controls and allows articles to be displayed which are normally unavailable to the general user; clicking this link will prompt the user to log in
• Show only featured articles – used to only display articles marked as ‘Featured’; this is made available when the ‘Show featured articles’ option is set to ‘ON’
• First news number – provides the ability to download articles from a set which fulfils specific conditions, beginning from the nth position
• Time offset – useful when your local time differs from the server local time; must be applied if you notice items in the module appear delayed by a few hours

Options Group – ‘LAYOUT’ – used to set the module’s layout parameters

• News as links – activates links in particular items
• Show title – switches on the display of item titles
• Show description – switches on the display of the description of items (in the case of Joomla articles the module would display the beginning of an article’s contents)
• Title as alias – an alias is shown instead of the title
• Title max. length – maximum length of the title based upon the characters and symbols it is comprised of
• Description max. length – maximum length of the description based upon the characters and symbols it is comprised of
• Interface – an ‘ON’ or ‘OFF’ switch for pointers used to switch between positions
• Background – sets the background for the interface; may be a color selected with the color picker (click on the color picker icon to launch it)
• Border radius – defines the thickness of the border line for the Highlighter GK4 module display
• Introtext – switch to ‘ON’ to display introduction text ahead of the Highlighter display
• Introtext color – color of the Introtext; chosen using the color picker (click on its icon to launch)
• Introtext value – text to be displayed when Introtext setting is enabled

Options Group – ‘ANIMATIONS’ – used to set the module’s animation parameters

Type of animation – a listbox to select one of the two types of possible animations for the Highlighter control: Slide animation and Linear animation

• Slide animation – this animation type will cause one text item to fade out while the next one becomes visible; when set, ‘Animation speed’ is used to set the speed of the switch and ‘Animation interval’ sets the interval between slides. ‘Animation function’ is used to select the style of the animation.
• Linear animation – All text items are bound into a single bar and pass in horizontal fashion from the right to the left side of a page. With this, ‘Animation speed’ determines the number of pixels the news bar will pass. ‘Animation interval’ and ‘Animation function’ have no effect on linear animations.

Hover animation – when set to ‘ON’ the Highlighter animation will pause when the mouse cursor hovers over it.

Options Group – ‘ADDITIONAL SETTINGS’

Clean (X)HTML – This is best set to ‘ON’. However, there are times when it may cause validation problem. Specifically, this function could occasionally cause text to be cut off in the middle of a tag. If you notice this issue, switch this setting to ‘OFF’.

Parse plugins – Used to switch plugin parsing on in the module’s contents. As with the ‘Clean (X)HTML’ option described above, we advise switching it off only when necessary.

Clean Plugins – Cleanses all “{XXXXX}” tags in content items displayed by the module. Thanks to this option, users will not see results from unparsed plugins.

Use default CSS and Using JS module – These deal with the use of external files. When using a template which supports the Highlighter GK4 module (such as most of the professional-grade GavickPro templates for Joomla), the ‘Use default CSS’ option should be set to ‘OFF’. In most cases, the ‘Using JS module’ may be set to ‘Automatic’ mode. Should your site experience unexplainable repetition of scripts within the module or perhaps not being loaded at all, try the ‘Force disabled’ or ‘Force enabled’ settings.

The post News rotators with the Highlighter GK4 Joomla module appeared first on GavickPro Documentation.

Image Show GK4 – a slideshow module for Joomla! (2.5/3.x), using it you can create an attractive slideshow on a site which include various images and article fragments or texts defined by a user. You can enable Random slides order or use manual order. Module is mobile compatible & responsive design (adapts the image to the width of the container) and it have multilingual support (read more). For upgrade to new version please reinstall the module.

NOTE: To work property Image Show GK4 request Magic Quotes must be OFF check this PHP setting before you will install this module. If it will enabled, we can not guarantee the correct functioning of all elements of the module. Simply turning it off does not work, the module will need to be uninstall and re-install after magic quotes has been turned off.

Options Tab – “BASIC”

Here is an image of the “Basic” options tab:

This options tab is used to set the suffix and module ID for the Image Show GK4 module, and to select the style to be applied to the module. These styles of content presentation are associated with the names of the templates. Therefore, among them you will find popular names of our templates, such as: gk_bluap, gk_bikestore, gk_rockwall or gk_storebox.

Each style is different, and because there are so many of them, you will certainly find something for your web project. The base of styles has been extended such that new styles may be created based upon the existing ones.

Options Tab – “YOUR SLIDES”

The “Your Slides” – from this tab you can see the list of your image slides with each bar representing a single slide. Here are descriptions for the text and button elements:

1. Slide name
2. Icon for source graphic view
3. Button to switch slide publication “ON” or “OFF”
4. Change minimal level of access required to view slide
5. Type of slide content (text / article)
6. Slide version
7. Remove slide
8. Buttons to change order of slides

New slides may be added using the “Add New Slide” button and completing the associated form:

By default, images are stored in the images/ folder of your Joomla installation. To keep Image Show images separate from the rest of your site-specific images, you may choose to create a special folder under the images/ folder. Images may be added using the Media Manager component built into Joomla!

Clicking on the current slide or selecting its “Edition” button will display the completed form. You may review your settings for the current slide on this form before proceeding to the Interface options tab.

Fill those fields and Save settings of each Slide

Example clickable slide from GK Game template

How to add link, bold or any other HTML tag in Content field

By default in “Content” field you can”t use any HTML tag because it will be deleted and changed to [LeftBracket] tag, which will appear on the front-end. But there is a way to change it, which allows you to use several popular HTML tags: <strong>, <i>, <span>, <br>, <a href=”#”>.

But first you have to make small changes into view.php file, from style that you choose (in Basic tab), for example, modules/mod_image_show_gk4/styles/gk_creativity. Remember that this module have about 30 different module styles so select this one which you”re planning to use.

Change from:

<h2 data-anim="<?php echo $title_anim; ?>"><?php echo $title; ?></h2>

<h1 data-anim="<?php echo $content_anim; ?>"><?php echo $content; ?></h1>

To:

<h2 data-anim="<?php echo $title_anim; ?>">
<?php echo str_replace(array('[leftbracket]', '[rightbracket]'),
array('<', '>'), $title); ?></h2>

<h1 data-anim="<?php echo $content_anim; ?>">
 <?php echo str_replace(array('[leftbracket]', '[rightbracket]'),
array('<', '>'), $content); ?></h1>

Options Tab – “INTERFACE”

This options tab allows the module style to be configured, and is another key change we’ve implemented.

When completed, an XML file is generated which contains the module style settings. Detailed information concerning parameters is often provided in tooltips, which may be seen when moving the cursor over a particular option item. Each style has a unique set of options. This, the list of options you see for a style may differ greatly from what is displayed above.

Options Tab – “ADVANCED OPTIONS”

• The “Generate thumbnails” – if this option is disabled, the original images are used in the slideshow. Disabling thumbnails is working with styles using one thumbnail per image.
• The “Use style CSS” – you can disable loading the selected style CSS code if you’re using template which was designed to use the selected style.
• The “Random slides order” – allows you to enable random slides order if you need display slides in different order on each user visit. We recommend to enable it when you have more slides – on smaller amount of slides i.e. 2 slides, the randomization effect is less visible.

HOW TO TIPS

“WHAT WE DO” Button & How to translate this module

Probably you will ask how to change this button using your language or to simple change to another sentence.

Screen shot from creativity template

Those and others phrases are localed in: language/en-GB/en-GB.mod_image_show_gk4.ini file. You will find them at the bottom of file.

MOD_IMAGE_SHOW_CREATIVITY_READMORE="What We Do"

To translate front-end of module you have to make a copy of this file, open in HTML editor with UTF-8 mode enabled.

Now you can translate selected entries to your language. Edit the file and modify all the phrases or words on the right side of the equals (=) sign to the new language. The left side of each line (left of the equals sign) must remain the same – they are needed by the system. After all you need to save the file as UTF-8 with BOM .

In next step, rename file name from en-GB.mod_image_show_gk4.ini to xx-XX.mod_image_show_gk4.ini .

Now when the translation is ready it can be copied to your language folder.

What is allowed in .ini files:

• Comments are made by a leading “;”
• The translated string must be enclosed by double quotes. Take care when using Double Quotes (“) in your translation, used incorrectly it will break the translation.
• Do not split translations into multiple lines (only first line will show up).

The post Joomla Image Show GK4 Slideshow Module appeared first on GavickPro Documentation.

In our TechNews Joomla! template release we included a new feature designed specifically to make TechNews a viable consumer review site template; the review score shortcode. This allowed users of the template to create blocks containing animated review scores, with subscores and an overall score.

The GK Rating Plugin

Since many sites can benefit from adding occasional reviews into their content, especially when a product particular to their niche is released, we have also released the GK Rating plugin for Joomla!, which gives Joomla! websites access to the same review score functionality seen in TechNews, with some additional features that make it more flexible.

Installing the Plugin

Installing the plugin is no different from any other Joomla! package. Head over to the Plugin Download Page; you’ll see that there is just one file in this section, plg/content/gkrating.zip, which contains the core Joomla 3-compatible plugin files. Download this file.

Next, we’ll need to run a normal install process; login to your Joomla! administrator area and click on Extensions → Manage to open the install page, then click on the Upload Package File tab. Now hit the Choose File button and select your newly-downloaded package, then click the Upload & Install button to start the installation; after a few seconds you’ll see a confirmation message that the package was installed.

There’s just one more step before you will be ready to start adding review score blocks to your content; we need to activate the plugin. To do so, click on Extensions → Plugins in your administrator panel main menu to be taken to the list of plugins:

You’ll find the GK Rating plugin in the list under "C", called Content – GK Rating. When you find this item you should notice that it currently has a red "X" next to its name, which means that the plugin is not active. Click on this red "X", and it will change to a green arrow; the plugin is now activated and ready to use.

The Available Plugin Options

The core options for the plugin once it is activated may be found in the new Rating (GavickPro) tab that appears in the Articles: Edit screen in the Joomla! Content Manager:

This allows you to modify the review scores that you want to display within each article, rather than creating the content separately from the editor. Let’s take a look at the available options:

• Show Overall Rate – This options enables/disables the “Overall” score, which is automatically calculated as an average of the subscores and added to the left of the scores block.
• Property – This field is where you can enter the label of a subscore category, such as “Design” or “Functionality”.
• Rating – Add the total score you want to give in the subscore category defined in the Property field here.
• Add – The add button is used to add a subscore to the review score block once you’ve defined the label and score in the Property and Rating fields.

As subscore categories are added they will appear in a list under the Rating field; you can delete any existing property by clicking the Remove text next to its name, and change the order that the subscores will appear in using drag & drop.

Adding a Review Block to an article

Once the subcategories and scores have been set you may insert the scores block anywhere in your article content using the following shortcode:

{rating}

This will automatically generate the block according to the options; bear in mind that each article can have its own particular review score settings, so you’ll need to add the subcategory fields and scores whenever you wish to insert a block into a new article.

Additional Plugin Options

There are two additional options available for more advanced users, available in the plugin configuration which can be reached by clicking on Extensions → Plugins in the Joomla admin menu, then click on Content – GK Rating in the list of plugins to open the configuration menu. The two options in this section are:

• Use progressbar.js library – progressbar.js is the JavaScript library used in the GK Rating plugin to create the animated circular borders around each score/subscore. When disabled the borders are removed, allowing for your own border to be defined in the CSS/scripting if needed.
• Load Default CSS – This option sets whether the default CSS for the plugin should be loaded; if this option is set to off the review scores will not be resized and styled, making them unusable, but you will be able to add your own custom CSS so that you may style the elements to match your site branding.

The post GK Ratings Joomla! Review Scores Plugin appeared first on GavickPro Documentation.