X-Cart forums - Too much white space around product images.

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (X-Cart 5) (https://forum.x-cart.com/forumdisplay.php?f=56)

- - Too much white space around product images. (https://forum.x-cart.com/showthread.php?t=69871)

benmackie

08-25-2014 09:15 AM

Too much white space around product images.

Under Featured Products, there seems to be a lot of white space. I want my images to fill more of that space. We uploaded large images for retina displays, but X-Cart seems to compress them to certain size, which we find too small.

http://tarheelants.net/

totaltec

08-25-2014 12:20 PM

Re: Too much white space around product images.

Just adding some info that might help:
Looks like the icon sizes are defined in classes/XLite/View/ItemsList/Product/Customer/ACustomer.php

in the function:

Code:

public static function getIconSizes()

{

    return array(

        static::WIDGET_TYPE_SIDEBAR . '.' . static::DISPLAY_MODE_STHUMB => array(160, 160),

        static::WIDGET_TYPE_SIDEBAR . '.' . static::DISPLAY_MODE_BTHUMB => array(160, 160),

        static::WIDGET_TYPE_CENTER . '.' . static::DISPLAY_MODE_GRID => array(160, 160),

        static::WIDGET_TYPE_CENTER . '.' . static::DISPLAY_MODE_LIST => array(160, 160),

        'other' => array(110, 110),

    );

}

I would try decorating this class, and defining my own sizes.

benmackie

08-25-2014 12:36 PM

Re: Too much white space around product images.

I actually changed the width in the class and it worked, but the images are all blurry because when you upload through the backend it actually compresses them to 160 x 160.

totaltec

08-25-2014 12:39 PM

Re: Too much white space around product images.

Okay here is what I did.

I used the custom skin module, (for the second time today!) and I created a new file:
XLite\Module\XC\CustomSkin\View\Items_List\Product \Customer\ACustomer.php

with the following content:

Code:

namespace XLite\Module\XC\CustomSkin\View\Items_List\Product\Customer;



/**

 * ACustomer

 */

abstract class ACustomer extends \XLite\Module\CDev\Sale\View\ItemsList implements \XLite\Base\IDecorator

{



    /**

     * Get icon sizes

     *

     * @return array

     */

    public static function getIconSizes()

    {

        return array(

            static::WIDGET_TYPE_SIDEBAR . '.' . static::DISPLAY_MODE_STHUMB => array(200, 200),

            static::WIDGET_TYPE_SIDEBAR . '.' . static::DISPLAY_MODE_BTHUMB => array(200, 200),

            static::WIDGET_TYPE_CENTER . '.' . static::DISPLAY_MODE_GRID => array(200, 200),

            static::WIDGET_TYPE_CENTER . '.' . static::DISPLAY_MODE_LIST => array(200, 200),

            'other' => array(110, 110),

        );

    }

}

This set the icon sizes to 200. Amazingly, XC was smart enough to automatically generate icon thumbs at the correct size of 200 x 200, referenc them correctly, and place them in the var/images folder. Thanks Devs!

totaltec

08-25-2014 12:41 PM

Re: Too much white space around product images.

Quote:

Originally Posted by benmackie

I actually changed the width in the class and it worked, but the images are all blurry because when you upload through the backend it actually compresses them to 160 x 160.

Using my solution above they should not be blurry. I believe XC has retained your original images, and it will create proper sized thumbnails on the fly depending on the application and need.

benmackie

08-25-2014 12:55 PM

Re: Too much white space around product images.

Ok, I did what you did and changed those values to 200.

I did it directly to the file. Do I need to create a new file for that to work?

Thanks.

totaltec

08-25-2014 02:28 PM

Re: Too much white space around product images.

I see your new changes are in effect on your site. They look like they are set to 240.

With X-cart 5 you should never directly edit a file, or it will break future upgrades of the site. None of the default files should ever be changed, or your changes will be overwritten when you upgrade. Rather, you make all the changes in your custom created module, or in the provided module called Custom skin. The custom skin module is what I used above.

I just made a video about using the custom skin that might help you to better understand how it is used: http://youtu.be/LxpUCoYU_nU

benmackie

08-26-2014 04:33 AM

Re: Too much white space around product images.

Like a child theme for wordpress. Got it. Thanks!

GreatLakesVacuum

09-30-2014 12:59 PM

Re: Too much white space around product images.

Mike is the module you made to do this available so one could simply install this module and enter the size of images they want for the categories thumbnails and add-to-cart popup? I find it silly that the Admin only contains places for us to define the product image and am not well versed in creating modules (and also have limited time right now to learn it)

totaltec

09-30-2014 08:31 PM

Re: Too much white space around product images.

Quote:

Originally Posted by GreatLakesVacuum

I think the best thing would be to create 1 custom module for your site, then we could put all the little changes like this into it. This change is so small, in my opinion it's not worth creating a module just for this. I think we will see these options show up in future X-cart 5 releases.

GreatLakesVacuum

10-01-2014 05:03 AM

Re: Too much white space around product images.

I don't understand how things like this are still not in version 5 after 16 updates?

I mean the problem is we can't launch with the ridiculously tiny images that X-Cart suggests we use, we aren't running our website on watch screens.

I am scared of all the custom modules (and them being lumped together) because they will get broken all the time by updates.

I would vastly prefer that X-Cart add these features that are so simple, so vital, and were ALREADY IN 4.X.

But yeah, short of that I may just need to have it coded as a custom module. At least I know a great guy for that job.

minfinger

10-22-2014 06:56 PM

Re: Too much white space around product images.

Hey Mike, I've tried your example and I can not get the sizes of the pictures to change.

PHP Code:


		
			
<?php

namespace XLite\Module\XC\CustomSkin\View\ItemsList\Product\Customer;

abstract class ACustomer extends \XLite\Module\CDev\Sale\View\ItemsList implements \XLite\Base\IDecorator
{
    protected function getIconSizes()
    {
        return array(
            static::WIDGET_TYPE_SIDEBAR . '.' . static::DISPLAY_MODE_STHUMB => array(200, 200),
            static::WIDGET_TYPE_SIDEBAR . '.' . static::DISPLAY_MODE_BTHUMB => array(200, 200),
            static::WIDGET_TYPE_CENTER . '.' . static::DISPLAY_MODE_GRID => array(200, 200),
            static::WIDGET_TYPE_CENTER . '.' . static::DISPLAY_MODE_LIST => array(200, 200),
            'other' => array(110, 110),
        );
    }
}

totaltec

10-23-2014 05:24 PM

Re: Too much white space around product images.

Quote:

Originally Posted by minfinger

Hey Mike, I've tried your example and I can not get the sizes of the pictures to change.

Can you provide a link to the page?

minfinger

10-23-2014 05:29 PM

Re: Too much white space around product images.

I've got it open for now if you want to take a look.

minfinger

10-23-2014 05:39 PM

Re: Too much white space around product images.

Sorry I forgot the link http://lpo.myyamahas.com/

minfinger

10-23-2014 06:27 PM

Re: Too much white space around product images.

Mike,

I'd rather have this as a module, because I have intentions of making a settings page for it. Also I don't want to get a bunch of mods together in the custom skin. I don't think that will work for me.

Anyway, here's the packed up version of the mod. All it does is screw up the whole site at this point.
https://www.dropbox.com/s/zdjnzjt6e5no5hh/FasterThanYours-LargerThumbnails-v5_1_6.tar?dl=0

minfinger

10-25-2014 08:15 PM

Re: Too much white space around product images.

I figured it out. Instead of "public static function getIconSizes()" I had "protected function getIconSizes()"

It works now.

totaltec

10-26-2014 02:49 AM

Re: Too much white space around product images.

Starting with 5.1.6, this code suggestion no longer works. It is because you are not supposed to decorate a decorator. This code works for me instead:

Code:

<?php

namespace XLite\Module\XC\CustomSkin\View\Items_List\Product\Customer;



/**

 * ACustomer

 */

abstract class ACustomer extends \XLite\View\ItemsList\Product\Customer\ACustomer implements \XLite\Base\IDecorator

{



    /**

     * Get icon sizes

     *

     * @return array

     */

    public static function getIconSizes()

    {

        return array(

            static::WIDGET_TYPE_SIDEBAR . '.' . static::DISPLAY_MODE_STHUMB => array(200, 200),

            static::WIDGET_TYPE_SIDEBAR . '.' . static::DISPLAY_MODE_BTHUMB => array(200, 200),

            static::WIDGET_TYPE_CENTER . '.' . static::DISPLAY_MODE_GRID => array(200, 200),

            static::WIDGET_TYPE_CENTER . '.' . static::DISPLAY_MODE_LIST => array(200, 200),

            'other' => array(110, 110),

        );

    }

}

minfinger

10-26-2014 03:31 AM

Re: Too much white space around product images.

Well now that I've actually figured out how this decorator crap works I may get to changing more stuff. Seems pretty easy.

In order to make the pictures fit on a 2 column Lisa in I had to go to 380,0. 0 snugged to whites right to the top/bottom border, which I think has about a 5px space anyway.

Any idea on the CSS coding for the price and other other things in the table? All the text looks funny now.

dagdag

12-28-2014 08:18 AM

Re: Too much white space around product images.

Quote:

Originally Posted by totaltec

Code:

namespace XLite\Module\XC\CustomSkin\View\Items_List\Product\Customer;



/**

 * ACustomer

 */

abstract class ACustomer extends \XLite\Module\CDev\Sale\View\ItemsList implements \XLite\Base\IDecorator

{



    /**

     * Get icon sizes

     *

     * @return array

     */

    public static function getIconSizes()

    {

        return array(

            static::WIDGET_TYPE_SIDEBAR . '.' . static::DISPLAY_MODE_STHUMB => array(200, 200),

            static::WIDGET_TYPE_SIDEBAR . '.' . static::DISPLAY_MODE_BTHUMB => array(200, 200),

            static::WIDGET_TYPE_CENTER . '.' . static::DISPLAY_MODE_GRID => array(200, 200),

            static::WIDGET_TYPE_CENTER . '.' . static::DISPLAY_MODE_LIST => array(200, 200),

            'other' => array(110, 110),

        );

    }

}

it's work!, however

module Add2CartPopup also uses the icons of the new large size and its design breaks :(

temporally in classes\XLite\Module\XC\Add2CartPopup\View\Product s.php i use this code:

Code:

    protected function defineWidgetParams()

    {

    ...

        $this->widgetParams[self::PARAM_ICON_MAX_WIDTH]->setValue(180);

        $this->widgetParams[self::PARAM_ICON_MAX_HEIGHT]->setValue(180);

    }

but how do I do it right?

tony_sologubov

12-30-2014 09:51 AM

Re: Too much white space around product images.

You can decorate the \XLite\Module\XC\Add2CartPopup\View class instead of editing its files and it will be a right solution.

All times are GMT -8. The time now is 02:58 AM.