[4.0] Fix images

components/com_contact/tmpl/category/default_items.php

@@ -12,6 +12,7 @@
 use Joomla\CMS\Factory;
 use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
+use Joomla\CMS\Layout\LayoutHelper;
 use Joomla\CMS\Router\Route;
 use Joomla\CMS\Uri\Uri;
 use Joomla\Component\Contact\Administrator\Helper\ContactHelper;
@@ -99,7 +100,14 @@ class="inputbox" onchange="document.adminForm.submit();"
 							<a href="<?php echo Route::_(RouteHelper::getContactRoute($item->slug, $item->catid, $item->language)); ?>">
 								<?php if ($this->params->get('show_image_heading')) : ?>
 									<?php if ($item->image) : ?>
-										<?php echo HTMLHelper::_('image', $item->image, '', array('class' => 'contact-thumbnail img-thumbnail')); ?>
+										<?php echo LayoutHelper::render(
+											'joomla.html.image',
+											[
+												'src'   => $item->image,
+												'alt'   => '',
+												'class' => 'contact-thumbnail img-thumbnail',
+											]
+										); ?>
 									<?php endif; ?>
 								<?php endif; ?>
 								<?php echo $this->escape($item->name); ?>

components/com_contact/tmpl/contact/default.php

@@ -14,6 +14,7 @@
 use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
 use Joomla\CMS\Layout\FileLayout;
+use Joomla\CMS\Layout\LayoutHelper;
 use Joomla\CMS\Plugin\PluginHelper;
 use Joomla\CMS\Router\Route;
 use Joomla\Component\Contact\Site\Helper\RouteHelper;
@@ -97,11 +98,13 @@
 
 			<?php if ($this->item->image && $tparams->get('show_image')) : ?>
 				<div class="com-contact__thumbnail thumbnail">
-					<?php echo HTMLHelper::_(
-						'image',
-						$this->item->image,
-						htmlspecialchars($this->item->name,  ENT_QUOTES, 'UTF-8'),
-						array('itemprop' => 'image')
+					<?php echo LayoutHelper::render(
+						'joomla.html.image',
+						[
+							'src'      => $this->item->image,
+							'alt'      => $this->item->name,
+							'itemprop' => 'image',
+						]
 					); ?>
 				</div>
 			<?php endif; ?>

components/com_content/tmpl/category/blog.php

@@ -13,6 +13,7 @@
 use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
 use Joomla\CMS\Layout\FileLayout;
+use Joomla\CMS\Layout\LayoutHelper;
 
 $app = Factory::getApplication();
 
@@ -54,8 +55,13 @@
 	<?php if ($beforeDisplayContent || $afterDisplayContent || $this->params->get('show_description', 1) || $this->params->def('show_description_image', 1)) : ?>
 		<div class="category-desc clearfix">
 			<?php if ($this->params->get('show_description_image') && $this->category->getParams()->get('image')) : ?>
-				<?php $alt = empty($this->category->getParams()->get('image_alt')) && empty($this->category->getParams()->get('image_alt_empty')) ? '' : 'alt="' . htmlspecialchars($this->category->getParams()->get('image_alt'), ENT_COMPAT, 'UTF-8') . '"'; ?>
-				<img src="<?php echo $this->category->getParams()->get('image'); ?>" <?php echo $alt; ?>>
+				<?php echo LayoutHelper::render(
+					'joomla.html.image',
+					[
+						'src' => $this->category->getParams()->get('image'),
+						'alt' => empty($this->category->getParams()->get('image_alt')) && empty($this->category->getParams()->get('image_alt_empty')) ? false : $this->category->getParams()->get('image_alt'),
+					]
+				); ?>
 			<?php endif; ?>
 			<?php echo $beforeDisplayContent; ?>
 			<?php if ($this->params->get('show_description') && $this->category->description) : ?>
@@ -75,12 +81,11 @@
 	<?php if (!empty($this->lead_items)) : ?>
 		<div class="com-content-category-blog__items blog-items items-leading <?php echo $this->params->get('blog_class_leading'); ?>">
 			<?php foreach ($this->lead_items as &$item) : ?>
-				<div class="com-content-category-blog__item blog-item"
-					itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
-						<?php
-						$this->item = & $item;
-						echo $this->loadTemplate('item');
-						?>
+				<div class="com-content-category-blog__item blog-item" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
+					<?php
+					$this->item = &$item;
+					echo $this->loadTemplate('item');
+					?>
 				</div>
 				<?php $leadingcount++; ?>
 			<?php endforeach; ?>

components/com_newsfeeds/tmpl/category/default.php

@@ -12,6 +12,7 @@
 use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
 use Joomla\CMS\Layout\FileLayout;
+use Joomla\CMS\Layout\LayoutHelper;
 
 $pageClass = $this->params->get('pageclass_sfx');
 $htag    = $this->params->get('show_page_heading') ? 'h2' : 'h1';
@@ -34,7 +35,13 @@
 	<?php if ($this->params->get('show_description', 1) || $this->params->def('show_description_image', 1)) : ?>
 		<div class="com-newsfeeds-category__description category-desc">
 			<?php if ($this->params->get('show_description_image') && $this->category->getParams()->get('image')) : ?>
-				<img src="<?php echo $this->category->getParams()->get('image'); ?>">
+				<?php echo LayoutHelper::render(
+					'joomla.html.image',
+					[
+						'src' => $this->category->getParams()->get('image'),
+						'alt' => empty($this->category->getParams()->get('image_alt')) && empty($this->category->getParams()->get('image_alt_empty')) ? false : $this->category->getParams()->get('image_alt'),
+					]
+				); ?>
 			<?php endif; ?>
 			<?php if ($this->params->get('show_description') && $this->category->description) : ?>
 				<?php echo HTMLHelper::_('content.prepare', $this->category->description, '', 'com_newsfeeds.category'); ?>

components/com_newsfeeds/tmpl/newsfeed/default.php

@@ -14,6 +14,7 @@
 use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
 use Joomla\CMS\Layout\FileLayout;
+use Joomla\CMS\Layout\LayoutHelper;
 
 ?>
 
@@ -61,30 +62,37 @@
 		<!-- Show Images from Component -->
 		<?php if (isset($images->image_first) && !empty($images->image_first)) : ?>
 			<?php $imgfloat = empty($images->float_first) ? $this->params->get('float_first') : $images->float_first; ?>
-			<?php $alt = empty($images->image_first_alt) && empty($images->image_first_alt_empty)
-				? ''
-				: 'alt="' . htmlspecialchars($images->image_first_alt, ENT_COMPAT, 'UTF-8') . '"'; ?>
-
-			<div class="com-newsfeeds-newsfeed__first-image img-intro-<?php echo htmlspecialchars($imgfloat, ENT_COMPAT, 'UTF-8'); ?>">
-				<img
-				<?php if ($images->image_first_caption) : ?>
-					<?php echo 'class="caption" title="' . htmlspecialchars($images->image_first_caption, ENT_COMPAT, 'UTF-8') . '"'; ?>
-				<?php endif; ?>
-				src="<?php echo htmlspecialchars($images->image_first, ENT_COMPAT, 'UTF-8'); ?>" <?php echo $alt; ?>>
+			<div class="com-newsfeeds-newsfeed__first-image img-intro-<?php echo $this->escape($imgfloat); ?>">
+				<figure>
+					<?php echo LayoutHelper::render(
+						'joomla.html.image',
+						[
+							'src' => $images->image_first,
+							'alt' => empty($images->image_first_alt) && empty($images->image_first_alt_empty) ? '' : $images->image_first_alt,
+						]
+					); ?>
+					<?php if ($images->image_first_caption) : ?>
+						<figcaption class="caption"><?php echo $this->escape($images->image_first_caption); ?></figcaption>
+					<?php endif; ?>
+				</figure>
 			</div>
 		<?php endif; ?>
 
 		<?php if (isset($images->image_second) and !empty($images->image_second)) : ?>
 			<?php $imgfloat = empty($images->float_second) ? $this->params->get('float_second') : $images->float_second; ?>
-			<?php $alt = empty($images->image_second_alt) && empty($images->image_second_alt_empty)
-				? ''
-				: 'alt="' . htmlspecialchars($images->image_second_alt, ENT_COMPAT, 'UTF-8') . '"'; ?>
-			<div class="com-newsfeeds-newsfeed__second-image float-<?php echo htmlspecialchars($imgfloat, ENT_COMPAT, 'UTF-8'); ?> item-image">
-				<img
-				<?php if ($images->image_second_caption) : ?>
-					<?php echo 'class="caption" title="' . htmlspecialchars($images->image_second_caption) . '"'; ?>
-				<?php endif; ?>
-				src="<?php echo htmlspecialchars($images->image_second, ENT_COMPAT, 'UTF-8'); ?>" <?php echo $alt; ?>>
+			<div class="com-newsfeeds-newsfeed__second-image float-<?php echo $this->escape($imgfloat); ?> item-image">
+				<figure>
+					<?php echo LayoutHelper::render(
+						'joomla.html.image',
+						[
+							'src' => $images->image_second,
+							'alt' => empty($images->image_second_alt) && empty($images->image_second_alt_empty) ? false : $images->image_second_alt,
+						]
+					); ?>
+					<?php if ($images->image_second_caption) : ?>
+						<figcaption class="caption"><?php echo $this->escape($images->image_second_caption); ?></figcaption>
+					<?php endif; ?>
+				</figure>
 			</div>
 		<?php endif; ?>
 		<!-- Show Description from Component -->
@@ -98,9 +106,15 @@
 		<?php endif; ?>
 
 		<!-- Show Image -->
-	  <?php if ($this->rssDoc->image && $this->params->get('show_feed_image')) : ?>
+		<?php if ($this->rssDoc->image && $this->params->get('show_feed_image')) : ?>
 			<div class="com-newsfeeds-newsfeed__feed-image">
-				<img src="<?php echo $this->rssDoc->image->uri; ?>" alt="<?php echo $this->rssDoc->image->title; ?>" />
+				<?php echo LayoutHelper::render(
+					'joomla.html.image',
+					[
+						'src' => $this->rssDoc->image->uri,
+						'alt' => $this->rssDoc->image->title,
+					]
+				); ?>
 			</div>
 		<?php endif; ?>
 

layouts/joomla/content/category_default.php

@@ -73,8 +73,13 @@
 		<?php if ($beforeDisplayContent || $afterDisplayContent || $params->get('show_description', 1) || $params->def('show_description_image', 1)) : ?>
 			<div class="category-desc">
 				<?php if ($params->get('show_description_image') && $category->getParams()->get('image')) : ?>
-					<?php $alt = empty($category->getParams()->get('image_alt')) && empty($category->getParams()->get('image_alt_empty')) ? '' : 'alt="' . htmlspecialchars($category->getParams()->get('image_alt'), ENT_COMPAT, 'UTF-8') . '"'; ?>
-					<img src="<?php echo $category->getParams()->get('image'); ?>" <?php echo $alt; ?>>
+					<?php echo LayoutHelper::render(
+						'joomla.html.image',
+						[
+							'src' => $category->getParams()->get('image'),
+							'alt' => empty($category->getParams()->get('image_alt')) && empty($category->getParams()->get('image_alt_empty')) ? false : $category->getParams()->get('image_alt'),
+						]
+					); ?>
 				<?php endif; ?>
 				<?php echo $beforeDisplayContent; ?>
 				<?php if ($params->get('show_description') && $category->description) : ?>
@@ -97,4 +102,3 @@
 		<?php endif; ?>
 	</div>
 </div>
-

layouts/joomla/content/full_image.php

@@ -9,8 +9,7 @@
 
 defined('_JEXEC') or die;
 
-use Joomla\CMS\HTML\HTMLHelper;
-use Joomla\Utilities\ArrayHelper;
+use Joomla\CMS\Layout\LayoutHelper;
 
 $params  = $displayData->params;
 $images  = json_decode($displayData->images);
@@ -20,25 +19,16 @@
 	return;
 }
 
-$imgclass  = empty($images->float_fulltext) ? $params->get('float_fulltext') : $images->float_fulltext;
-$extraAttr = '';
-$img       = HTMLHelper::cleanImageURL($images->image_fulltext);
-$alt       = empty($images->image_fulltext_alt) && empty($images->image_fulltext_alt_empty) ? '' : 'alt="' . htmlspecialchars($images->image_fulltext_alt, ENT_COMPAT, 'UTF-8') . '"';
-
-// Set lazyloading only for images which have width and height attributes
-if ((isset($img->attributes['width']) && (int) $img->attributes['width'] > 0)
-&& (isset($img->attributes['height']) && (int) $img->attributes['height'] > 0))
-{
-	$extraAttr = ArrayHelper::toString($img->attributes) . ' loading="lazy"';
-}
+$imgclass   = empty($images->float_fulltext) ? $params->get('float_fulltext') : $images->float_fulltext;
+$layoutAttr = [
+	'src'      => $images->image_fulltext,
+	'itemprop' => 'image',
+	'alt'      => empty($images->image_fulltext_alt) && empty($images->image_fulltext_alt_empty) ? false : $images->image_fulltext_alt,
+];
 ?>
-<figure class="<?php echo htmlspecialchars($imgclass, ENT_COMPAT, 'UTF-8'); ?> item-image">
-	<img src="<?php echo htmlspecialchars($img->url, ENT_COMPAT, 'UTF-8'); ?>"
-			 <?php echo $alt; ?>
-			 itemprop="image"
-			<?php echo $extraAttr; ?>
-	/>
+<figure class="<?php echo $this->escape($imgclass); ?> item-image">
+	<?php echo LayoutHelper::render('joomla.html.image', $layoutAttr); ?>
 	<?php if ($images->image_fulltext_caption !== '') : ?>
-		<figcaption class="caption"><?php echo htmlspecialchars($images->image_fulltext_caption, ENT_COMPAT, 'UTF-8'); ?></figcaption>
+		<figcaption class="caption"><?php echo $this->escape($images->image_fulltext_caption); ?></figcaption>
 	<?php endif; ?>
 </figure>

layouts/joomla/content/intro_image.php

@@ -9,10 +9,9 @@
 
 defined('_JEXEC') or die;
 
-use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Layout\LayoutHelper;
 use Joomla\CMS\Router\Route;
 use Joomla\Component\Content\Site\Helper\RouteHelper;
-use Joomla\Utilities\ArrayHelper;
 
 $params  = $displayData->params;
 $images  = json_decode($displayData->images);
@@ -22,36 +21,21 @@
 	return;
 }
 
-$imgclass  = empty($images->float_intro) ? $params->get('float_intro') : $images->float_intro;
-$extraAttr = '';
-$img       = HTMLHelper::cleanImageURL($images->image_intro);
-$alt       = empty($images->image_intro_alt) && empty($images->image_intro_alt_empty) ? '' : 'alt="' . htmlspecialchars($images->image_intro_alt, ENT_COMPAT, 'UTF-8') . '"';
-
-// Set lazyloading only for images which have width and height attributes
-if ((isset($img->attributes['width']) && (int) $img->attributes['width'] > 0)
-&& (isset($img->attributes['height']) && (int) $img->attributes['height'] > 0))
-{
-	$extraAttr = ArrayHelper::toString($img->attributes) . ' loading="lazy"';
-}
+$imgclass   = empty($images->float_intro) ? $params->get('float_intro') : $images->float_intro;
+$layoutAttr = [
+	'src' => $images->image_intro,
+	'alt' => empty($images->image_intro_alt) && empty($images->image_intro_alt_empty) ? false : $images->image_intro_alt,
+];
 ?>
-<figure class="<?php echo htmlspecialchars($imgclass, ENT_COMPAT, 'UTF-8'); ?> item-image">
+<figure class="<?php echo $this->escape($imgclass); ?> item-image">
 	<?php if ($params->get('link_intro_image') && ($params->get('access-view') || $params->get('show_noauth', '0') == '1')) : ?>
-		<a href="<?php echo Route::_(RouteHelper::getArticleRoute($displayData->slug, $displayData->catid, $displayData->language)); ?>"
-			itemprop="url" title="<?php echo $this->escape($displayData->title); ?>">
-			<img src="<?php echo htmlspecialchars($img->url, ENT_COMPAT, 'UTF-8'); ?>"
-					 <?php echo $alt; ?>
-					 itemprop="thumbnailUrl"
-					 <?php echo $extraAttr; ?>
-			/>
+		<a href="<?php echo Route::_(RouteHelper::getArticleRoute($displayData->slug, $displayData->catid, $displayData->language)); ?>" itemprop="url" title="<?php echo $this->escape($displayData->title); ?>">
+			<?php echo LayoutHelper::render('joomla.html.image', array_merge($layoutAttr, ['itemprop' => 'thumbnailUrl'])); ?>
 		</a>
 	<?php else : ?>
-		<img src="<?php echo htmlspecialchars($img->url, ENT_COMPAT, 'UTF-8'); ?>"
-				 <?php echo $alt; ?>
-				 itemprop="thumbnail"
-				 <?php echo $extraAttr; ?>
-		/>
+		<?php echo LayoutHelper::render('joomla.html.image', array_merge($layoutAttr, ['itemprop' => 'thumbnail'])); ?>
 	<?php endif; ?>
 	<?php if (isset($images->image_intro_caption) && $images->image_intro_caption !== '') : ?>
-		<figcaption class="caption"><?php echo htmlspecialchars($images->image_intro_caption, ENT_COMPAT, 'UTF-8'); ?></figcaption>
+		<figcaption class="caption"><?php echo $this->escape($images->image_intro_caption); ?></figcaption>
 	<?php endif; ?>
 </figure>

layouts/joomla/html/image.php

@@ -0,0 +1,49 @@
+<?php
+/**
+ * @package     Joomla.Site
+ * @subpackage  Layout
+ *
+ * @copyright   (C) 2021 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+/**
+ * Layout variables
+ * -----------------
+ * @var   array  $displayData  Array with all the given attributes for the image element.
+ *                             Eg: src, class, alt, width, height, loading, decoding, style, data-*
+ *                             Note: only the alt and src attributes are escaped by default!
+ */
+defined('_JEXEC') or die;
+
+use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\Utilities\ArrayHelper;
+
+$img = HTMLHelper::_('cleanImageURL', $displayData['src']);
+
+$displayData['src'] = $this->escape($img->url);
+
+if (isset($displayData['alt']))
+{
+	if ($displayData['alt'] === false)
+	{
+		unset($displayData['alt']);
+	}
+	else
+	{
+		$displayData['alt'] = $this->escape($displayData['alt']);
+	}
+}
+
+if ($img->attributes['width'] > 0 && $img->attributes['height'] > 0)
+{
+	$displayData['width']  = $img->attributes['width'];
+	$displayData['height'] = $img->attributes['height'];
+
+	if (empty($displayData['loading']))
+	{
+		$displayData['loading'] = 'lazy';
+	}
+}
+
+echo '<img ' . ArrayHelper::toString($displayData) . '>';

libraries/src/HTML/HTMLHelper.php

@@ -707,19 +707,11 @@ public static function cleanImageURL($url)
 		{
 			$obj->attributes['width'] = $width;
 		}
-		else
-		{
-			unset($obj->attributes['width']);
-		}
 
 		if ($height > 0)
 		{
 			$obj->attributes['height'] = $height;
 		}
-		else
-		{
-			unset($obj->attributes['height']);
-		}
 
 		$mediaUri->setFragment('');
 		$obj->url = $mediaUri->toString();