Econa

This is the official documentation for Econa Joomla! extension

Introduction

Econa is a Joomla! extension aiming to to enhance Joomla! articles and K2 items image editing experience. This is a paid extension which means that you need an active subscription on our website in order to download it and/or get support for it.

Compatibility

All of our extensions are tested with the latest stable version of Joomla! available at the time they are released. Compatibility with future versions of Joomla! is added with extension updates.

Requirements

This extension requires that PHP's GD library is installed and enabled on your server. The rest system requirements are covered by the Joomla! system requirements .

Installation

Econa can be installed on your website the same as way as every other Joomla! extension, using the Joomla! extensions manager. You can refer to the official documentation to learn how you can install extensions on your Joomla! website.

Updating

There are two ways to update this extension:

  • One click update: This extension can be updated using the Joomla! extension manager updates. Since this is a paid extension you will have to enter your account Download ID to the extension options. Read the section "Settings" of this page to learn where you need to enter your Download ID.
  • Manually: Download the latest version from our website and then install it over the current version using the Joomla! extension manager installer.

How it works

It is very important to get familiar with the extension functionality before configuring it's options. Here is an overview of the way this extension integrates with Joomla:

  • Econa Image Custom Field (Joomla! 3.7 or later only): Econa integrates with the core Custom Fields which are introduced in Joomla! 3.7. You can add as many resizable and editable images to your Joomla! articles by creating custom fields of type "Econa". Each "Econa" image field allows you to upload an image from your computer or use an existing image from your site. You can also add a caption and credits for the image and specify the image filename for improving your site's SEO. Images you upload are getting resized automatically based on the dimensions you define when you create the custom field. In the custom field options you can select which image size will be displayed in front-end and also enable HTML5 responsive images by selecting more than one sizes. In the front-end you get a nice styled image and optionally a modal preview. 
  • Econa Image Tab: An extra tab named "Image" is added to Joomla! articles form. This tab allows you to add an image to the article along with a caption and credits. You can define up to ten image sizes to get generated automatically when an image is added through the extra "Image" tab. Then you can select which image size will be displayed in front-end. You can also enable HTML5 responsive images by selecting more than one sizes. In the front-end you get a nice styled image and optionally a modal preview.
  • Content Images: The term "Content images" is used to describe images that are inserted in the Joomla! article or K2 item text using the WYSIWYG editor. There are two methods available for processing content images. The simple method will resize the images based on the dimensions provided in the markup by the user through the WYSIWYG editor. The responsive images method allows you to define up to ten image sizes to get generated automatically when an image is inserted in the article/item text. Those images will be used to build the required markup for HTML5 responsive images.
  • Article Images: The term "Article Images" is used to describe images that are inserted in the Joomla! article using the "Images and Links" tab. There are two images there, the "Intro" image and the "Full" image. You can configure Econa to resize those images automatically for you. The resize width and quality for each of those two images can be defined in the plugin settings.

Note that each of the above functionality comes with it's own settings. Make sure to read the section named "Setup" below get a detailed description of each option available.

Setup

Econa consists of five Joomla! plugins. Some of them have some options you need to setup right after installing. This section describes those options in detail. In order to setup the options you need to locate and edit the plugins in the Joomla! plugin manager .

 

Fields - Econa

This is the plugin that handles the Joomla! Custom Fields integration. It has no options but it provides several options when you create a custom field of type Econa in Joomla!:

Custom Field Options

  • Image sizes: Define the image dimensions for the generated images by the specific Econa Custom Field. Each dimension has it's own label, an identifier, width in pixels and resize quality. 
  • Convert to JPEG format: Setting this to "Yes" will make Econa convert all generated images uploaded through the specific Econa Custom Field to the JPEG format. If you set it to "No" all generated images of the specific Econa Custom Field will maintain the same format as the source image. It is recommended to set this to "Yes".
  • Load plugin CSS: This allows you to disable the default styles that are applied to the Econa Custom Fields in front-end.

Display Options

  • Image: Select the desired image size that you wish to be displayed in the front-end when the specific Econa Image Custom Field is rendered. Select none to disable the image completely. Select more than one sizes to enable HTML5 responsive images for the specific field.
  • Sizes attribute: This is the sizes attribute that will be used in the image HTML markup when responsive mode is enabled ( more than one sizes is selected for that image ).  You can learn more about the sizes attribute at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img . If you are not sure about this, leave this blank.
  • Caption: Select if the image caption should be displayed or not when the specific Econa Image Custom Field is rendered.
  • Credits: Select if the image credits should be displayed or not when the specific Econa Image Custom Field is rendered.
  • Modal: Select the desired image size that you wish to be displayed in a modal preview in front-end when the image is clicked. Select "Disabled" to disable modal preview.

Note that all the options above are applied only to the specific Econa Image Custom Field. This means that you can create several Econa Image Custom Fields which can have different options!

 

Content - Econa

This is the plugin that handles the Econa Image Tab integration. Here are it's available options:

Basic Options

  • Enable Econa image tab: Enables or disables the extra "Image" tab in Joomla! articles form.
  • Image sizes: Define the image dimensions for the generated images by Econa. Each dimension has it's own label, an identifier, width in pixels and resize quality. Those sizes can be used in the article view and articles list views options below. Note that these sizes apply only to images uploaded using the Econa image tab in Joomla! article form.
  • Convert to JPEG format: Setting this to "Yes" will make Econa convert all generated images uploaded through the Econa image tab to the JPEG format. If you set it to "No" all generated images will maintain the same format as the source image. It is recommended to set this to "Yes".
  • Load plugin CSS: This allows you to disable the default styles that are applied to the Joomla! article images in front-end.

Article View Options

  • Image: Select the desired image size that you wish to be displayed in the article view. Select none to disable Econa image in article view. Select more than one sizes to enable HTML5 responsive images in article view.
  • Sizes attribute: This is the sizes attribute that will be used in the image HTML markup when responsive mode is enabled ( more than one sizes is selected for that image ).  You can learn more about the sizes attribute at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img . If you are not sure about this, leave this blank.
  • Caption: Select if the image caption should be displayed or not in the article view.
  • Credits: Select if the image credits should be displayed or not in the article view.
  • Enable modal: Select the desired image size that you wish to be displayed in a modal preview in front-end when the image is clicked. Select "Disabled" to disable modal preview.

Articles List Views Options

  • Image: Select the desired image size that you wish to be displayed in the articles list views. Select none to disable Econa image in articles list views. Select more than one sizes to enable HTML5 responsive images in articles list view.
  • Sizes attribute: This is the sizes attribute that will be used in the image HTML markup when responsive mode is enabled ( more than one sizes is selected for that image ).  You can learn more about the sizes attribute at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img . If you are not sure about this, leave this blank.
  • Caption: Select if the image caption should be displayed or not in the article articles list views.
  • Credits: Select if the image credits should be displayed or not in the article articles list views.

Content Images

  • Resize content images: Select the desired method for handling content images (images inserted in articles/items text). If you select the "Simple method" images will be resized based on the dimensions provided by the user directly in the WYSIWYG editor. If no dimensions are provided by the user, the "Maximum width" option will applied. If you select the "Responsive images method" then images will be resized based on the dimensions you provide in the "Image sizes" field. Select "Disabled" to disable content images processing completely.
  • Convert to JPEG format: Setting this to "Yes" will make Econa convert all generated images inserted in article/item text to the JPEG format. If you set it to "No" all generated images will maintain the same format as the source image. It is recommended to set this to "Yes".

Simple Method Options

  • Maximum width: Set a maximum width to be applied when resizing content images and no dimensions are provided in the markup ( by the WYSIWYG editor ).
  • Quality: Set the resize quality for the images when the "Simple method" is enabled.

Responsive Images Method Options

  • Image sizes: Define the image dimensions for the generated images. Each dimension has it's own label, an identifier, width in pixels and resize quality. Those sizes will be used to generate the HTML5 responsive images markup. Note that these sizes apply only to content images ( images inserted in the article/item text ).
  • Default sizes attribute: This is the default sizes attribute that will be used in the image HTML markup.  You can learn more about the sizes attribute at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img . If you are not sure about this, leave this blank. Note that this is just a default value, you can define your own sizes attribute for each image directly in the WYSIWYG editor.

Article Images

  • Resize article images: Select if the article's "intro" and "Full" images will be resized by Econa.
  • Convert to JPEG format: Setting this to "Yes" will make Econa convert article "Intro" and  "Full" images to the JPEG format. If you set it to "No" generated images will maintain the same format as the source image. It is recommended to set this to "Yes".
  • Intro image width: Sets the resize width in pixels for the article "Intro" image.
  • Intro image quality: Sets the resize quality for the article "Intro" image.
  • Full image width: Sets the resize width in pixels for the article "Full" image.
  • Full image quality: Sets the resize quality for the article "Full" image.

NOTE: All the options that have to do with "Econa Image Tab" functionality can be overridden in category level! You should see a tab named "Article Image Options" in Joomla! category edit page which allows you to define different image sizes per category!

 

K2 - Econa

This plugin provides integration with K2 Items. Here are it's available options:

Basic Options

  • Keep native images : When this is enabled and a custom image name for a K2 item image is provided, Econa will create copies of the native K2 image files instead of renaming them. As a result each item will end up with ten different image files ( two files for each size ). This requires more disk space but ensures that your images will work as before if for some reason you decide to uninstall Econa at the future. If your site has thousands of items or you need to save disk space you might need to disable this option.

 

System - Econa

This plugin handles clean up of uploaded images on your server when they are not used. It has no options.

 

Installer - Econa

This plugin handles updating through the extension manager. It has only one option:

  • Download ID: This where you enter your Download ID in order to enable one click updates for this extension. You can find your Download ID at this website.

 

Layouts

 

Econa Custom Fields

When using Econa in Joomla! Custom Fields you can override the output of the field as you would do with any other Joomla! Custom Field. Econa is using the standard Joomla! rendering method for plugins. This means that you can create layout overrides for Econa Custom Fields. All you have to do is copy the file /plugins/fields/econa/tmpl/econa.php to /templates/YOUR_TEMPLATE/html/plg_fields_econa/econa.php . Then Joomla! will use the file from your template when rendering the field. If you need more help with the layout overrides you can take a look at the official Joomla! documentation page ( section named "Plugin Alternative Layouts" ) . 

 

Econa Image Tab

When the Econa Image Tab is used the plugin is using two layouts. Note that the layouts are used only in Joomla! articles views. K2 has already it's own layouts which include the item's image. 

The layout that renders in article view is named article.php while the layout used in articles listings views ( featured, category and archive views ) is named list.php

You can change the markup to fit your needs by creating overrides for those layouts. Econa is using the standard Joomla! rendering method for plugins. This means that you are able to override the bundled layouts following the instructions at the official Joomla! documentation page ( section named "Plugin Alternative Layouts" ) . 

Copyright © 2017 Firecoders - All Rights Reserved.
Firecoders is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters, the trademark holder in the United States and other countries.