#55 – Replace Joomla Intro Image

Hello, can you help me to replace the Joomla intro images with one of the econa custom field images I created. I was thinking of doing an override but I am not sure which code to use for the econa custom field image. Thanks, Sima

Hi,

There is no need to use an override. The custom fields are displayed automatically. So the only thing you have to do is upload the images using the Econa custom field you created.

In case you missed it, Econa has also an option for resizing the intro images.

Let me know if you need more help with this.

Hello, yes the custom fields are displayed automatically but in the same size. For example, I followed your tutorial about creating a custom field for main image. The issue I am having is that it will show as the picture for both the Intro Image
and Full Article Image and in the same size. How can I set the size differently for the intro imaged? Also how can I have two different pictures for the Intro image and Full Article Image? I tried creating and second custom field named intro image but that didn't work :)

As far as resizing the intro images, are you referring to the settings in the Article Settings tab of the Content - Econa pluging? If so, I thought that only applies to images uploaded via the "Images and Links" tab in the article edit form.

Thanks,

Sima

There are many ways to achieve what you want. Let's break things down:

1. If you want a custom field to be displayed only in article view you can set the option "Automatic Display" of the field to "After Title".
2. If you need more advanced handling of showing/hiding custom fields in specific views you have to use a layout override. There you can simply ask for the view variable and show/hide the field output depending on the field id.
3. If you want a different image to be displayed in lists then you have to create a second custom field, because a custom field can only hold a single image ( in many sizes ).


So let me know if you finally need different image in lists than in article view and i would be more than glad to provide you with the required code for the layout override. In case you don't know what layout overrides are you can read the section "Layouts" of the documentation at https://www.firecoders.com/documentation/econa#layouts .

Finally, we will try to add an option for that in the future so users don't have to mess with layout overrides.

Hello, yes please, can you provide me the required code for the layout override. Thanks, Sima

P.S.: I never get an email notification when you post a response to this ticket

Assuming that you want two different images, one for listings and one for article view the required code should be like:

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

defined('_JEXEC') or die; $image = $field->image; $view = JFactory::getApplication()->input->getCmd('view'); ?>

<?php if($view == 'article' && $field->id == 3 || $view != 'article' && $field->id == 4): ?>

<?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; ?>

<?php endif; ?>

Note that:

1. You need create the file /templates/YOUR_TEMPLATE/html/plg_fields_econa/econa.php and paste the code there.
2. The code assumes that the ID of the Full Image Custom field is 3 and the ID of the Intro Image Custom Field is 4 . You have to change those two numbers to match the IDs of the custom fields you have created. The IDs can be found at "Content" -> "Fields" in your administration area.
3. We are already in the process of finding a better and easier way for doing this ( probably with an option in the field ).


Let me know if you need more help with this.

Thank you, I will try it this weekend and let you know!

Hello Lefteris, this works. Thanks. A question how can I incorporate an econa custom field in an existing layout? For Example, below is the code of my template override for the article blog list view:

	<!-- Article -->
	<article class="clearfix">
  	
  	<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>

  	<div class="article-content">
	    <!-- Aside -->
	    <?php if ($topInfo || $icons) : ?>
	    <aside class="article-aside clearfix">
	      <?php if ($topInfo): ?>
	      <?php echo JLayoutHelper::render('joomla.content.info_block.block', array('item' => $this->item, 'params' => $params, 'position' => 'above')); ?>
	      <?php endif; ?>
	      
	      <?php if ($icons): ?>
	      <?php echo JLayoutHelper::render('joomla.content.icons', array('item' => $this->item, 'params' => $params)); ?>
	      <?php endif; ?>
	    </aside>  
	    <?php endif; ?>
	    <!-- //Aside -->

	    <?php if ($params->get('show_title')) : ?>
				<?php echo JLayoutHelper::render('joomla.content.item_title', array('item' => $this->item, 'params' => $params, 'title-tag'=>'h2')); ?>
	    <?php endif; ?>
	    <?php echo $this->item->event->afterDisplayTitle; ?>

			<section class="article-intro clearfix">

				<?php echo $this->item->event->beforeDisplayContent; ?>

				

				<?php echo $this->item->introtext; ?>
			</section>

	    <!-- footer -->
	    <?php if ($botInfo) : ?>
	    <footer class="article-footer clearfix">
	      <?php echo JLayoutHelper::render('joomla.content.info_block.block', array('item' => $this->item, 'params' => $params, 'position' => 'below')); ?>
	    </footer>
	    <?php endif; ?>
	    <!-- //footer -->


			<?php if ($params->get('show_readmore') && $this->item->readmore) :
				if ($params->get('access-view')) :
					$link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid));
				else :
					$menu      = JFactory::getApplication()->getMenu();
					$active    = $menu->getActive();
					$itemId    = $active->id;
					$link1     = JRoute::_('index.php?option=com_users&view=login&Itemid=' . $itemId);
					$returnURL = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid));
					$link      = new JURI($link1);
					$link->setVar('return', base64_encode($returnURL));
				endif;
				?>
				<section class="readmore">
					<a class="" href="/<?php echo $link; ?>">
						<span>
						<?php if (!$params->get('access-view')) :
							echo JText::_('COM_CONTENT_REGISTER_TO_READ_MORE');
						elseif ($readmore = $this->item->alternative_readmore) :
							echo $readmore;
							if ($params->get('show_readmore_title', 0) != 0) :
								echo JHtml::_('string.truncate', ($this->item->title), $params->get('readmore_limit'));
							endif;
						elseif ($params->get('show_readmore_title', 0) == 0) :
							echo JText::sprintf('COM_CONTENT_READ_MORE_TITLE');
						else :
							echo JText::_('COM_CONTENT_READ_MORE');
							echo JHtml::_('string.truncate', ($this->item->title), $params->get('readmore_limit'));
						endif; ?>
						</span>
					</a>
				</section>
			<?php endif; ?>
		</div>

	</article>
	<!-- //Article -->

I would like to replace the following:

<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>

with an econa custom field

Thanks!

I am not sure how you can do this in your layout ( i will make a research and let you know ) .

What you can do for sure is render it inside the article text using something like:

{field 1}

Note that this code assumes that the ID of the field you want to render is 1.

Thanks Lefteris, please keep me posted.

This should help you:

https://docs.joomla.org/J3.x:Adding_custom_fields/Overrides

It's the official documentation so it should work. In case you need more help with this let me know.

Hello Lefteris, do you mind helping me with this? I don't mind paying for it. Thanks, Sima.

If you want to render the field inside the introtext then you can simply use the"Field" button in the Joomla editor.

If you want to render the field somewhere inside the article layout then you can use the following code:

<?php foreach($this->item->jcfields as $field): ?>
<?php if($field->type == 'econa'): ?>
<?php echo $field->value; ?>
<?php endif; ?>
<?php endforeach; ?>

Remember to set "Automatic Display" to "No" in the field settings so you don't get the field displayed twice.

Let me know if that works for you.

Thanks Lefteris, this works great. Just one little issue, for some reason it generates a weird dot right before the Econa image section. See image below:



This in turn creates a bit of a styling issue. When I delete the dot manually the styling issue gets resolved.

I just noticed that it also does this when using the standard Automatic Display, see below:

This is weird. Probably there is a space at the beginning of the layout file.

Try to edit the file and remove it.

No, it is not the layout file because if I change the code to use another custom field, it doesn't do it.

I mean the layout of Econa.

The file you should check is /templates/YOUR_TEMPLATE/html/plg_fields_econa/econa.php .

Try to remove the empty line after the if statement.

If that does not solve your issue, create a private ticket and provide FTP access to your server so i can troubleshoot this.

I am closing this since the issue has been resolved.

Feel free to create a new ticket if you need anything else.

Regards