Econa

Upload, resize, crop and edit images for Joomla! and K2. Integrates with Joomla! Custom Fields providing responsive images, retina images, automatic image resizing, multiple image sizes, custom image names, image editor and many other great features in a single extension!

 

Responsive images in Joomla! done right - Retina images supported

 

Econa integrates responsive images in Joomla! using the HTML5 srcset attribute. Econa allows you to define different image sizes for targeting different devices. Your site will serve automatically the most appropriate image size depending on the visitor's device saving user's bandwidth and thus making your site load faster. Here is a brief overview of how it works:

  1. You define image sizes according to your needs. You can select the resize width and quality for each one of them.
  2. You add rules to define which image size will be served using CSS media queries.

It's that simple to add responsive images to your site. Did we mention that Econa can also handle retina images? If you define additional images sizes with higher resolution the retina devices will get served those images automatically.

The responsive images functionality applies to images uploaded through the Econa Image Custom Fields, Econa image tab and content images ( images inserted in the articles or K2 items text ) .

 

Click to enlarge image settings-1.png
Responsive images for Econa tab
Click to enlarge image settings-2.png
Dynamic image sizes
Click to enlarge image settings-3.png
Responsive functionality for content images

 

 

Joomla! 3.7 Custom Fields Integration - Add multiple resizable images to Joomla! articles with Econa Image Custom Field

 

Econa now integrates with Joomla! 3.7 Custom Fields allowing you to upload, resize and edit images to your Joomla! articles! Using custom fields you can add as many images as you want! Each Econa Image Custom Field allows you to upload an image from your computer or select an image from your server. The extension will create different sizes of that image automatically. You can define up to ten image sizes and select the width and the resize quality for each one of them when you create the custom field. You can also add a caption, credits and alt text for the uploaded image and even define the image filename for improving your site's SEO. The result filename will be the text you entered plus an identifier for the image size.  If for example you enter the text "apples" to be used as the filename the result for the large image will be "apples_L.jpg" or "apples_L.png" if the image is in PNG format. Econa can handle JPEG, GIF and PNG images, but transparency is not maintained when the image is resized by Econa.

Image uploading and processing is performed using AJAX to make the user experience faster.

Note that Econa Image Custom Fields require Joomla! 3.7 or later. 

Check the following video to see how Econa integerates with Joomla! 3.7 Custom Fields

 

 

Econa Image Tab

 

Econa adds an extra tab named "Image" in the Joomla! articles edit form. It allows you to upload an image from your computer or select an image from your server to use as the article image. The extension will create different sizes of that image automatically. You can define up to ten image sizes and select the width and the resize quality for each one of them.

Econa also allows you to define different image sizes per Joomla! category!

You can also add a caption, credits and alt text for the uploaded image.

Econa even allows you to define the desired filename for the uploaded image. The result filename will be the text you entered plus an identifier for the image size.  If for example you enter the text "apples" to be used as the filename the result for the large image will be "apples_L.jpg" or "apples_L.png" if the image is in PNG format. Econa can handle JPEG, GIF and PNG images, but transparency is not maintained when the image is resized by Econa.

Image uploading and processing is performed using AJAX to make the user experience faster.

 

Click to enlarge image 1_econa-joomla-articles-form.png
Econa in Joomla! articles form
Click to enlarge image 2_econa-joomla-article-view.png
Econa in Joomla! article view
Click to enlarge image 3_econa-joomla-featured-articles-view.png
Econa in Joomla! articles list views
Click to enlarge image econa-category-options.png
Econa options in Joomla! category

 

 

Econa Image Editor

 

Both Joomla! articles and K2 items now get a great image editor! Econa allows you to perform basic image editing operations like cropping, rotating and flipping directly in the Joomla! article and K2 item edit forms.

So, if you enable the Econa "Image Tab" for articles or you create Econa custom fields you will also get an edit button for launching the image editor. In case, you are using K2, the editor is integrated directly in K2's "Image" tab.

 

Click to enlarge image econa-edit-image.png
Econa image editor

 

 

 

Custom Image Names for K2 Items

 

Improve K2 SEO by giving custom names to your K2 items images! You can enter the desired filename for the item image in the corresponding field that Econa adds in K2 "Image" tab in the item edit form.

The result filename will be the text you entered plus an identification for the image size. If for example you enter the text "apples" to be used as the filename the result for the large image will be "apples_L.jpg" . Note that K2 converts all uploaded images in JPEG format and this cannot be changed by Econa.

In addition to custom image names, Econa makes the K2's image uploading experience even better! All image uploads are now performed using AJAX requests making things even faster.

 

Click to enlarge image econa-k2-item-form.png
Econa in K2 item form

 

 

Resize Content Images

 

Econa can also optimize the images that users add to Joomla! articles or K2 items content! There are two methods available for handling content images:

  • Simple method: Any image added using the WYSIWYG editor will be resized to the dimensions set by the user using the editor. Let's say for example that one user of the site uploads a really high resolution image to insert in the article text. Then he resizes that image using the article's WYSIWYG editor to 600x600 pixels. Normally, Joomla! will load the large image in front-end and then the browser will resize it to 600x600 pixels. This adds a lot of extra unnecessary load to the page. When using this method, the image will get resized automatically to 600x600 pixels saving your site's bandwidth!
  • Responsive images method: This method allows you to define up to ten sizes to get generated for images added in the content of Joomla! articles and K2 items. Econa will generate automatically the HTML5 srcset attribute based on the generated images in order to make the images inserted in the WYSIWYG editor responsive!

 

Click to enlarge image content-images-editor-responsive-markup.png
Responsive method for content images
Click to enlarge image content-images-editor.png
Simple method for content images
Click to enlarge image content-images-options.png
Content images options

 

 

Resize Article Images

 

If for some reason you don't want to enable the "Econa Image Tab" for your articles, you can set Econa to resize the article's default "Intro" and "Full" images that can be found under the "Images and Links" tab in articles form.

 

Click to enlarge image article-images-form.png
Articles default images
Click to enlarge image article-images-options.png
Econa article images options

 

 

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.