CE Phoenix Cart Forum

[tessthepup]

Hi Raiwa,

Installed Version: CE Phoenix v1.0.8.12
KissIt Image 4.0.0

As part of my on going page optimisation the seo checker I am using is throwing back that the alt tags are missing from the gallery images.

Just wondering if you have any ideas on how to resolve this?

Code: Select all

<div class="col-sm-<?= (int)PI_GALLERY_CONTENT_WIDTH ?> pi-gallery">
  <a href="#lightbox" class="lb" data-toggle="modal" data-slide="0"><?=
    new Image('images/' . $active_image['image'], ['alt' => htmlspecialchars( $active_image['htmlcontent']), 'width' => KISSIT_MAIN_PRODUCT_IMAGE_WIDTH, 'height' => KISSIT_MAIN_PRODUCT_IMAGE_HEIGHT])
  ?></a>
  <?php
  $number_thumbs = count($other_images);
  $first_img = new Image('images/' . $active_image['image'], ['alt' => htmlspecialchars($active_image['htmlcontent']), 'loading' => 'lazy']);

// now create the thumbs
  if (count($other_images) > 0) {
    $pi_thumb = '<div class="row mt-4">';
    foreach ($other_images as $k => $v) {
      $pi_thumb .= '<div class="' . PI_GALLERY_CONTENT_WIDTH_EACH . '">';
      $pi_thumb .= '<a href="#lightbox" class="lb" data-toggle="modal" data-slide="' . ($k+1) . '">';
      $pi_thumb .= new Image('images/' . $v['image'], ['loading' => 'lazy', 'width' => KISSIT_GALLERY_PRODUCT_IMAGE_WIDTH, 'height' => KISSIT_GALLERY_PRODUCT_IMAGE_HEIGHT]);
      $pi_thumb .= '</a>';
      $pi_thumb .= '</div>';
    }
    $pi_thumb .= '</div>';

    $other_img_indicator = $other_img = '';
    foreach ($other_images as $k => $v) {
      $other_img .= '<div class="carousel-item text-center">';
      $other_img .= new Image('images/' . $v['image'], ['loading' => 'lazy']);
      if (!Text::is_empty($v['htmlcontent'])) {
        $other_img .= '<div class="carousel-caption d-none d-md-block">';
        $other_img .= $v['htmlcontent'];
        $other_img .= '</div>';
      }
      $other_img .= '</div>';
    }

    echo $pi_thumb;
  } else {
    $other_img = '';
  }

  if (PI_GALLERY_SWIPE_ARROWS === 'True') {
    $swipe_arrows = '<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span></a><a class="carousel-control-next" href="#carousel" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span></a>';
  } else {
    $swipe_arrows = '';
  }

  if (PI_GALLERY_INDICATORS === 'True') {
    $indicators = '<ol class="carousel-indicators">';
      $indicators .= '<li data-target="#carousel" data-slide-to="0" class="pointer active"></li>';
      for ($i = 1, $n = count($other_images); $i <= $n; $i++) {
        $indicators .= '<li data-target="#carousel" data-slide-to="' . $i . '" class="pointer"></li>';
      }
    $indicators .= '</ol>';
  } else {
    $indicators = '';
  }

  $modal_size = PI_GALLERY_MODAL_SIZE;
  $album_name = sprintf(PI_GALLERY_ALBUM_NAME, $GLOBALS['product']->get('name'));
  $album_exit = PI_GALLERY_ALBUM_CLOSE;

  $modal_gallery_footer = <<<mgf
<div id="lightbox" class="modal fade" role="dialog">
  <div class="modal-dialog {$modal_size}" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="carousel slide" data-ride="carousel" tabindex="-1" id="carousel">
          {$indicators}
          <div class="carousel-inner">
            <div class="carousel-item text-center active">{$first_img}</div>
            {$other_img}
          </div>
          {$swipe_arrows}
        </div>
      </div>
      <div class="modal-footer">
        <h4 class="text-uppercase mr-auto">{$album_name}</h4>
        <a href="#" role="button" data-dismiss="modal" class="btn btn-primary px-3">{$album_exit}</a>
      </div>
    </div>
  </div>
</div>
mgf;

  $GLOBALS['Template']->add_block($modal_gallery_footer, 'footer_scripts');

  $modal_clicker = <<<mc
<script>$(document).ready(function() { $('a.lb').click(function(e) { var s = $(this).data('slide'); $('#lightbox').carousel(s); }); });</script>
mc;
  $GLOBALS['Template']->add_block($modal_clicker, 'footer_scripts');
  ?>
</div>

<?php
/*
  $Id$

  KissIt Image 4.0.0

  by @raiwa
  info@oscaddons.com
  www.oscaddons.com

  Copyright (c) 2022 Rainer Schmied

  CE Phoenix, E-Commerce made Easy
  https://phoenixcart.org

  Copyright (c) 2021 Phoenix Cart

  Released under the GNU General Public License
*/
?>

[tessthepup]

I have changed the following lines in tpl_pi_gallery.php as follows which works and solves the missing tags

Line 15

Code: Select all

$pi_thumb .= new Image('images/' . $v['image'], ['alt' => htmlspecialchars($v['htmlcontent']), 'loading' => 'lazy', 'width' => KISSIT_GALLERY_PRODUCT_IMAGE_WIDTH, 'height' => KISSIT_GALLERY_PRODUCT_IMAGE_HEIGHT]);

and line 24

Code: Select all

$other_img .= new Image('images/' . $v['image'], ['alt' => htmlspecialchars($v['htmlcontent']), 'loading' => 'lazy']);

[raiwa]

Looks O.K., but it's unrelated to KissIt image thumbnailer.
The same mod is required in the core module if you wish to use the alt tag.