Econa

Introduction

Econa is a Joomla! extension aiming 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 its 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. 
• 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.
• Econa Image Tab (DEPRECATED): 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 from 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. This functionality is deprecated and will be removed at the future. It is recommended to use Econa as custom field.

Note that each of the above functionality comes with its 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 set up right after installing. This section describes those options in detail. In order to set up 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".
• Generate WebP: If you enable this Econa will generate a WebP variation for each defined image size so it can be served to browsers which support it.
• Enable Media button: Disable this if you want to hide the Media button.
• Auto edit: If you enable this the image editor will opened automatically when the image is changed.
• Aspect ratios: Add the aspect ratios you wish to enable in the image editor.
• Enable free aspect ratio: Allow users to crop images in custom aspect ratio.
• Social sharing image: Use this image as Open Graph image where applicable. Open Graph image is the image that will be used when the page is shared on social networks like Facebook or Twitter. Note that Econa will only provide the Open Graph Image meta tag. The rest required Open Graph meta tags should exist already in your site.
• Load plugin CSS: This allows you to disable the default styles that are applied to the Econa Custom Fields in front-end.

Display Options

NOTE: You have to save the custom field at least one time before you will be able to select the desired image size for each view.

• 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 size 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 the 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 size 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 the 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 size 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 the 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 be 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.

NOTE: All the options that have to do with "Econa Image Tab" functionality can be overridden at 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!

Content - Econa Article Images

This is the plugin that handles the Joomla Article Images integration. Here are it's available options:

Basic Options

• Enable Media button: Disable this if you want to hide the Media button.
• Auto edit: If you enable this the image editor will opened automatically when the image is changed.
• Aspect ratios: Add the aspect ratios you wish to enable in the image editor.
• Enable free aspect ratio: Allow users to crop images in custom aspect ratio.
• Resize 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.

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 in 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 on 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 its 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" ). 

How to use with Yootheme

Yootheme is not triggering all the required plugins events so when you first import the custom field in the page builder it's not working. However there is a workaround to make this work. Here are the required steps:

1. Edit the custom field and set the option named "Automatic Display" to "After Display".
2. In Yootheme builder click on dynamic link on the field you want and from the drop down menu select the "After Display Content" option. Here is the video explaining how to do that: https://youtu.be/rhR3hkQ0LL0?t=114 .