[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,15 @@ 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',
+											[
+												'image' => [
+													'src' => $item->image,
+													'alt' => '',
+													'attributes' => ['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;
@@ -62,7 +63,7 @@
 		<?php $contactLink = RouteHelper::getCategoryRoute($this->item->catid, $this->item->language); ?>
 		<h3>
 			<span class="contact-category"><a href="<?php echo $contactLink; ?>">
-				<?php echo $this->escape($this->item->category_title); ?></a>
+					<?php echo $this->escape($this->item->category_title); ?></a>
 			</span>
 		</h3>
 	<?php endif; ?>
@@ -76,7 +77,11 @@
 				'select.genericlist',
 				$this->contacts,
 				'select_contact',
-				'class="form-select" onchange="document.location.href = this.value"', 'link', 'name', $this->item->link);
+				'class="form-select" onchange="document.location.href = this.value"',
+				'link',
+				'name',
+				$this->item->link
+			);
 			?>
 		</form>
 	<?php endif; ?>
@@ -97,11 +102,15 @@
 
 			<?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',
+						[
+							'image' => [
+								'src' => $this->item->image,
+								'alt' => $this->item->name,
+								'attributes' => ['itemprop' => 'image']
+							],
+						]
 					); ?>
 				</div>
 			<?php endif; ?>
@@ -121,7 +130,7 @@
 				<?php if ($tparams->get('allow_vcard')) : ?>
 					<?php echo Text::_('COM_CONTACT_DOWNLOAD_INFORMATION_AS'); ?>
 					<a href="<?php echo Route::_('index.php?option=com_contact&amp;view=contact&amp;id=' . $this->item->id . '&amp;format=vcf'); ?>">
-					<?php echo Text::_('COM_CONTACT_VCARD'); ?></a>
+						<?php echo Text::_('COM_CONTACT_VCARD'); ?></a>
 				<?php endif; ?>
 			</div>
 		</div>

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();
 
@@ -40,9 +41,9 @@
 	<?php endif; ?>
 
 	<?php if ($this->params->get('show_category_title', 1)) : ?>
-	<<?php echo $htag; ?>>
-		<?php echo $this->category->title; ?>
-	</<?php echo $htag; ?>>
+		<<?php echo $htag; ?>>
+			<?php echo $this->category->title; ?>
+		</<?php echo $htag; ?>>
 	<?php endif; ?>
 	<?php echo $afterDisplayTitle; ?>
 
@@ -54,8 +55,16 @@
 	<?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',
+					[
+						'image' => [
+							'src' => $this->category->getParams()->get('image'),
+							'alt' => empty($this->category->getParams()->get('image_alt')) && empty($this->category->getParams()->get('image_alt_empty')) ? '' : $this->category->getParams()->get('image_alt'),
+							'attributes' => []
+						],
+					]
+				); ?>
 			<?php endif; ?>
 			<?php echo $beforeDisplayContent; ?>
 			<?php if ($this->params->get('show_description') && $this->category->description) : ?>
@@ -75,12 +84,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; ?>
@@ -99,15 +107,14 @@
 			<?php $blogClass .= (int) $this->params->get('num_columns'); ?>
 		<?php endif; ?>
 		<div class="com-content-category-blog__items blog-items <?php echo $blogClass; ?>">
-		<?php foreach ($this->intro_items as $key => &$item) : ?>
-			<div class="com-content-category-blog__item blog-item"
-				itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
+			<?php foreach ($this->intro_items as $key => &$item) : ?>
+				<div class="com-content-category-blog__item blog-item" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
 					<?php
-					$this->item = & $item;
+					$this->item = &$item;
 					echo $this->loadTemplate('item');
 					?>
-			</div>
-		<?php endforeach; ?>
+				</div>
+			<?php endforeach; ?>
 		</div>
 	<?php endif; ?>
 
@@ -122,7 +129,8 @@
 			<?php if ($this->params->get('show_category_heading_title_text', 1) == 1) : ?>
 				<h3> <?php echo Text::_('JGLOBAL_SUBCATEGORIES'); ?> </h3>
 			<?php endif; ?>
-			<?php echo $this->loadTemplate('children'); ?> </div>
+			<?php echo $this->loadTemplate('children'); ?>
+		</div>
 	<?php endif; ?>
 	<?php if (($this->params->def('show_pagination', 1) == 1 || ($this->params->get('show_pagination') == 2)) && ($this->pagination->pagesTotal > 1)) : ?>
 		<div class="com-content-category-blog__navigation w-100">

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,16 @@
 	<?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',
+					[
+						'image' => [
+							'src' => $this->category->getParams()->get('image'),
+							'alt' => empty($this->category->getParams()->get('image_alt')) && empty($this->category->getParams()->get('image_alt_empty')) ? '' : $this->category->getParams()->get('image_alt'),
+							'attributes' => []
+						],
+					]
+				); ?>
 			<?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;
 
 ?>
 
@@ -40,9 +41,9 @@
 	<?php $images = json_decode($this->item->images); ?>
 	<div class="com-newsfeeds-newsfeed newsfeed<?php echo $direction; ?>">
 		<?php if ($this->params->get('display_num')) : ?>
-		<h1 class="<?php echo $direction; ?>">
-			<?php echo $this->escape($this->params->get('page_heading')); ?>
-		</h1>
+			<h1 class="<?php echo $direction; ?>">
+				<?php echo $this->escape($this->params->get('page_heading')); ?>
+			</h1>
 		<?php endif; ?>
 		<h2 class="<?php echo $direction; ?>">
 			<?php if ($this->item->published == 0) : ?>
@@ -61,30 +62,43 @@
 		<!-- 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 $imgAttribs = []; ?>
 				<?php if ($images->image_first_caption) : ?>
-					<?php echo 'class="caption" title="' . htmlspecialchars($images->image_first_caption, ENT_COMPAT, 'UTF-8') . '"'; ?>
+					<?php $imgAttribs['class'] = 'caption'; ?>
+					<?php $imgAttribs['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; ?>>
+				<?php echo LayoutHelper::render(
+					'joomla.html.image',
+					[
+						'image' => [
+							'src' => $images->image_first,
+							'alt' => empty($images->image_first_alt) && empty($images->image_first_alt_empty) ? '' : $images->image_first_alt,
+							'attributes' => $imgAttribs
+						],
+					]
+				); ?>
 			</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 $imgAttribs = []; ?>
 				<?php if ($images->image_second_caption) : ?>
-					<?php echo 'class="caption" title="' . htmlspecialchars($images->image_second_caption) . '"'; ?>
+					<?php $imgAttribs['class'] = 'caption'; ?>
+					<?php $imgAttribs['title'] = htmlspecialchars($images->image_second_caption, ENT_COMPAT, 'UTF-8'); ?>
 				<?php endif; ?>
-				src="<?php echo htmlspecialchars($images->image_second, ENT_COMPAT, 'UTF-8'); ?>" <?php echo $alt; ?>>
+				<?php echo LayoutHelper::render(
+					'joomla.html.image',
+					[
+						'image' => [
+							'src' => $images->image_second,
+							'alt' => empty($images->image_second_alt) && empty($images->image_second_alt_empty) ? '' : $images->image_second_alt,
+							'attributes' => $imgAttribs
+						],
+					]
+				); ?>
 			</div>
 		<?php endif; ?>
 		<!-- Show Description from Component -->
@@ -98,9 +112,18 @@
 		<?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',
+					[
+						'image' => [
+							'src' => $this->rssDoc->image->uri,
+							'alt' => $this->rssDoc->image->title,
+							'attributes' => []
+						],
+					]
+				); ?>
 			</div>
 		<?php endif; ?>
 

layouts/joomla/html/image.php

@@ -0,0 +1,25 @@
+<?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
+ */
+
+defined('_JEXEC') or die;
+
+use Joomla\CMS\HTML\HTMLHelper;
+
+extract($displayData);
+
+$imgAttribs = $image['attributes'];
+$img        = HTMLHelper::_('cleanImageURL', $image['src']);
+
+if ($img->width > 0 && $img->height > 0) {
+  $imgAttribs['width'] = $img->width;
+  $imgAttribs['height'] = $img->height;
+  $imgAttribs['loading'] = 'lazy';
+}
+
+echo HTMLHelper::_('image', htmlspecialchars($img->url, ENT_QUOTES, 'UTF-8'), htmlspecialchars($image['alt'], ENT_QUOTES, 'UTF-8'), $image['attributes']);

modules/mod_articles_news/tmpl/_item.php

@@ -9,25 +9,35 @@
 
 defined('_JEXEC') or die;
 
+use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Layout\LayoutHelper;
 ?>
 <?php if ($params->get('item_title')) : ?>
 
 	<?php $item_heading = $params->get('item_heading', 'h4'); ?>
 	<<?php echo $item_heading; ?> class="newsflash-title">
-	<?php if ($item->link !== '' && $params->get('link_titles')) : ?>
-		<a href="<?php echo $item->link; ?>">
+		<?php if ($item->link !== '' && $params->get('link_titles')) : ?>
+			<a href="<?php echo $item->link; ?>">
+				<?php echo $item->title; ?>
+			</a>
+		<?php else : ?>
 			<?php echo $item->title; ?>
-		</a>
-	<?php else : ?>
-		<?php echo $item->title; ?>
-	<?php endif; ?>
+		<?php endif; ?>
 	</<?php echo $item_heading; ?>>
 <?php endif; ?>
 
 <?php if ($params->get('img_intro_full') !== 'none' && !empty($item->imageSrc)) : ?>
 	<figure class="newsflash-image">
-		<img src="<?php echo $item->imageSrc; ?>" alt="<?php echo $item->imageAlt; ?>">
+		<?php echo LayoutHelper::render(
+			'joomla.html.image',
+			[
+				'image' => [
+					'src' => $item->imageSrc,
+					'alt' => $item->imageAlt,
+					'attributes' => []
+				],
+			]
+		); ?>
 		<?php if (!empty($item->imageCaption)) : ?>
 			<figcaption>
 				<?php echo $item->imageCaption; ?>