Upload and Resize Article Images With Joomla! 3.7 Custom Fields and Econa Plugin

Joomla! 3.7 is around the corner and despite the fact that it comes with several fantastic new features, there is something that the whole community is a little bit more excited about: Custom Fields. In this blog post, we will show how you can add multiple resizable images in your Joomla! articles using the brand new Joomla! Custom Fields and our fabulous Econa plugin.

Requirements

Custom Fields are available in Joomla! 3.7 or later. This guide is written for Joomla! 3.7. Econa is an extension initially released in 2016. The version of Econa that integrates with Joomla! 3.7 Custom Fields is 1.5.0. In summary, you will need:

• Joomla! 3.7 or later
• Econa 1.5.0 or later

Getting Started

The first thing we need to do is make sure Econa plugin is installed and enabled. You can get Econa by picking one of the available subscription plans. After you install it look for the "Econa - Fields" plugin in the Joomla! plugin manager and make sure it is enabled.

Create the Custom Field

This guide assumes that you are already familiar with Joomla! 3.7 Custom Fields. If not we suggest taking a look at the official documentation. Follow the instructions there and create a custom field of type Econa. Add the desired image sizes and save the field. Then edit it once more so you can select which image size should be rendered and optionally set one of those image sizes to open in a modal. You can always refer to the Econa documentation to find out what the options there are about.

Add an Image to an Article

Now that you have setup your Econa Custom Field, it's time to see how it can be used in the article form. Edit an existing article or create a new one. You should see the Econa plugin rendered along with the rest custom fields in the article form. Just upload an image and optionally edit it. After you are done with the image save the article.

View the Image in Front-End

Now that your article is ready, visit your site front-end. You should see the image you added rendered both in article listings and article page. So, that's all, you are done!

Advanced: Render Different Image Size per View

Econa supports responsive ( adaptive ) images out of the box. This means that it will serve automatically the most appropriate image size depending on the visitor's device screen size. It makes use of the srcset and sizes attributes of images which were introduced in HTML5. The sizes attribute is the one that determines how much space the image should take in the page layout. Knowing this information and the available image sizes, the browser can automatically choose the optimal image size for rendering. Let' see a simple example:

<img src="/my_image.jpg" srcset="/my_image_small.jpg 100w, /my_image_medium.jpg 500w, /my_image_large.jpg 1000w"
     sizes="(min-width: 1000px) 1000px, 100vw">

Let's break things down:

• srcset: This attribute informs the browser for all the available size variations of the image. In the example above it tells the browser that it has three image size variations. The small one which is 100 pixels wide, the medium which is 500 pixels wide and the large which is 1000 pixels wide. This attribute is generated automatically from Econa based on the image sizes you define when you create the custom field.
• sizes: This attribute informs the browser about the actual space the image should take on the screen. In the example above it tells the browser that this image should take the 100% of the viewport width when the screen width is smaller than 1000 pixels. When the screen is larger than 1000 pixels then the image should be 1000 pixels wide. The web browser is now able to choose the most appropriate image size to load depending on the user's device screen size. It also takes into consideration the pixel density of the device screen! Note that this attribute defaults to "100vw" but Econa has an option for setting a custom value for it when creating the custom field.

Now that we know how this works it's time to see a more advanced example. Let's say that we want in our Joomla! category view to have a grid of three articles per row in large screens. In that case, we need to change the previous sizes attribute to the following:

<img src="/my_image.jpg" srcset="/my_image_small.jpg 100w, /my_image_medium.jpg 500w, /my_image_large.jpg 1000w"
     sizes="(min-width: 1000px) 33vw, 100vw">

Now the browser knows that in screens smaller than 1000 pixels wide, the image of the article should take up the 33% of the available space. However, we still have one last problem to solve: How to have different sizes attribute depending on the Joomla! view. The answer is template overrides. Here is the complete code for the field layout adapted to our example:

<?php
/**
 * @author      Lefteris Kavadas
 * @copyright   Copyright (c) 2017 Lefteris Kavadas / firecoders.com
 * @license     GNU General Public License version 3 or later
 */

defined('_JEXEC') or die;
$image = $field->image;

// Get view variable and change the sizes attribute if we are on category
$view = JFactory::getApplication()->input->getCmd('view');
if($view === 'category') {
  $image->sizes = '(min-width: 1000px) 33vw, 100vw';
}
?>

<?php if ($field->fieldparams->get('image', 1) && $image->src): ?>
<div class="econaArticleImageBlock">

  <div class="econaImage">
    <?php if($image->modal): ?>
    <a href="/<?php echo $image->modal; ?>" title="<?php echo JText::_('PLG_FIELDS_ECONA_CLICK_TO_PREVIEW_IMAGE'); ?>" class="econaFieldModal">
    <?php endif; ?>
  		<img src="/<?php echo $image->src; ?>" alt="<?php echo htmlspecialchars($image->alt, ENT_QUOTES, 'UTF-8'); ?>" <?php if($image->srcset): ?> srcset="/<?php /echo /$image->srcset; /?>" <?php endif; ?> <?php if($image->srcset): ?> sizes="<?php echo $image->sizes; ?>" <?php endif; ?> />
    <?php if($image->modal): ?>
    </a>
    <?php endif; ?>
  </div>

  <?php if ($field->fieldparams->get('caption', 1) && $image->caption): ?>
  <span class="econaImageCaption"><?php echo $image->caption; ?></span>
  <?php endif; ?>

  <?php if ($field->fieldparams->get('credits', 1) && $image->credits): ?>
  <span class="econaImageCredits"><?php echo $image->credits; ?></span>
  <?php endif; ?>

</div>
<?php endif; ?>

That's all! Make sure to check the video below which demonstrates how Econa for Joomla! is used with Custom Fields.

Image Gallery

If you need an image gallery and not just a single image then make sure you check our new extension Showtime Image Gallery.