X-Cart forums

[xgarb]

As part of making the thumbnails larger and responsive I want to remove the fixed height and width parts of the generated image tag.

I've done this...

<img style="width:100%; height:100%" src="{getURL()}" alt="{getAlt()}" 
{foreach:getProperties(),name,value}
	{if:#width#={name}}
	{elseif:#height#={name}}
	{else:}	
{name}="{value}"
	{end:}
{end:} 
/>

but it seems a bit hacky and produces bad mark up in the cache...

<?php if ('width'==$this->get('name')){?>}
	<?php }elseif ('height'==$this->get('name')){?>}
	<?php }else{ ?>	
<?php echo func_htmlspecialchars($this->get('name')); ?>="<?php echo func_htmlspecialchars($this->get('value')); ?>"
	<?php }?>

It does however work and produce the correct HTML.

Could I improve it?

[tony_sologubov]

Hello @xgarb

You can create a method that will take two params (name, value) and incorporate this logic into it:

{if:#width#={name}}
	{elseif:#height#={name}}
	{else:}	
{name}="{value}"
	{end:}

so it would look as follows:

{foreach:getProperties(),name,value}
    {displayImageDimension(name, value)}
{end:} 

Hopefully, it helps.

Tony

[qualiteam]

I think the better way would be extending the getProperties() method and removing/adding tag properties from there as follows (I used Custom Skin as the module for implementing the change, you can use your custom module):

PHP Code:

<?php
// file: classes\XLite\Module\XC\CustomSkin\View\Image.php

namespace XLite\Module\XC\CustomSkin\View;

class Image extends \XLite\View\Image implements \XLite\Base\IDecorator
{
    public function getProperties()
    {
        $properties = parent::getProperties();

        $properties['style'] .= 'width: 100%; height: auto;' . (isset($properties['style']) ? $properties['style'] : '');
        unset($properties['width']);
        unset($properties['height']);

        $this->properties = $properties;

        return $properties;
    }

}

As you don't replace the template file, this method would be more future proof (compatible with future upgrades).

[qualiteam]

style="width:100%; height:100%"

This won't make the images responsive, but will resize them without keeping the aspect rate. The styles should be either "width:100%; height: auto", or "height:100%;width:auto".