X-Cart forums

[xgarb]

I want to be able to read the dimensions of the image so I can change the CSS class used depending if the image is landscape or portrait format.

I imagine I should extend XLite\View\Image but I can't work out what I need to do.

[qualiteam]

I guess you should update $this->properties['className'] in a way similar to how the addInlineStyle() method sets the margins when centering the image.

[xgarb]

I'm doing this to add in my own CSS class

class ProductDetailImageSizes extends \XLite\View\Image 
{
    public function getProperties()
    {
        $properties = parent::getProperties();
		
	$currentwidth = NEED SOMETHING HERE TO WORK WITH;

        unset($properties); // remove all settings from the image class
 
	// $properties['style'] = 'width: 80%; max-height: 400px; display: inline';
	$properties['class'] = 'product-detail-image-landscape';

        $this->properties = $properties;

        return $properties;
    }

} 

I've used this elsewhere to add in Styles and Classes successfully.

However I need to somehow find the image dimensions so I can change the class used depending if it's horizontal or vertical.

processImage() looks like it might offer something with
$this->getParam(self::PARAM_IMAGE)
and
$this->properties['width'],

but I'm not sure what to do.

[qualiteam]

You should use something like this:

PHP Code:

/**
 * Image entity.
 *
 * @var \XLite\Model\Base\Image
 */
$image = $this->getParam(self::PARAM_IMAGE);

$originalWidht = $image->getWidth();
$originalHeight = $image->getHeight();

$vertical = $originalHeight > $originalWidht; 


[xgarb]

This is what I've done. Works for me.. might be something in here that helps others.

In image-regular.tpl, image-zoom-quicklook.tpl and image-zoom.tpl

I'm calling the widget class...
<widget class="\XLite\Module\Client\ClientTheme\View\Produ ctDetailImageSizes" im....

ProductDetailImageSizes.php looks like this:

namespace XLite\Module\Client\ClientTheme\View;

class ProductDetailImageSizes extends \XLite\View\Image 
{
    public function getProperties()
    {
	$properties = parent::getProperties();
		
	$image = $this->getParam(self::PARAM_IMAGE);

	$ratio = $image->getWidth() / $image->getHeight();
		
	$cssClassForImage = $ratio > 1 ? 'product-detail-image-h' : 'product-detail-image-v'; // image CSS Class based on image ratio
		
	$cssClassForImage = $image->getWidth() < 310 ? 'product-detail-image-legacy' : $cssClassForImage; // image CSS Class for legacy images < 310px

	unset($properties); 
		
	$properties['class'] = $cssClassForImage;

	return $properties;
    }

}  

and in my stylesheet:

.product-detail-image-legacy {
	max-width: 80%;
	height: auto;
	display: inline !important;
}
.product-detail-image-h {
	width: 80%;
	height: auto;
	display: inline !important;
}
.product-detail-image-v {
	width: auto;
	max-width: 80%;
	max-height: 400px;
	display: inline !important;
}

[qualiteam]

Thank you for sharing it with the community!

[xgarb]

My code didn't seem to like when the default image was set so I've re-written the class....

class ProductDetailImageSizes extends \XLite\View\Image 
{
    public function getProperties()
    {
        $properties = parent::getProperties();
		
	$cssClassForImage = 'product-detail-image-legacy'; //default
		
	$image = $this->getParam(self::PARAM_IMAGE);
		
	if (is_object($image)){ 

		$ratio = $image->getWidth() / $image->getHeight();
			
		if ($image->getWidth() > 310) { // not a legacy image
			$cssClassForImage = $ratio > 1 ? 'product-detail-image-h' : 'product-detail-image-v'; // image CSS Class based on image ratio
		}
			
	}	

        unset($properties); 
		
	$properties['class'] = $cssClassForImage;

        return $properties;
    }

}