Question about swiffy-slider-item-ratio

[BrianMecler]

Laravel Framework v10.45.1, php8.1-fpm, aimeos/aimeos-laravel 2023.10.7

Hello,

In my config/shop.php I have placed the follow code to try to make the image previews not add padding around my product images:

Code: Select all

	'controller' => [
		'common' => [
			'media' => [
				'product' => [
					'previews' => [[
						'maxwidth' => 800,
						'maxheight' => 604,
						'force-size' => 0,
					]],
				],
			],
		],

This seems to have worked very well.

But now I am having a problem with a lot of padding between my product images and the thumbnail previews of the other images below it. It seems to be due to this style getting applied: --ai-product-image-ratio: 3 / 4;

If I manually change this style in my Chome Developer tools it fixes the issue: --ai-product-image-ratio: 4 / 3;

What is determining that aspect ratio? My image is 800px X 604px.

I am not sure how to properly correct this. I attached a sample of the product display to this post.

[BrianMecler]

I did find that I have aimeos.css copied into my custom theme directory, I found and changed the value there:

Code: Select all

/* Theme: Black&White */
:root {
	--ai-bg: #FFF;
	--ai-bg-alt: #F6F6F6;
	--ai-primary: #282828;
	--ai-primary-alt: #282828;
	--ai-secondary: #555;
	--ai-secondary-alt: #555;
	--ai-tertiary: #CCC;
	--ai-tertiary-alt: #F6F6F6;
	--ai-danger: #A00000;
	--ai-success: #006000;
	--ai-warning: #FFA500;
	--ai-radius: 0;
	--ai-radius-round: 50%;
	--ai-product-image-ratio: 4/3;

Should I be hard coding this? What if I have some images that are 4/3 and some that are 3/4?

[aimeos]

If you have both, portrait and landscape images, then it's indeed difficult as the Swiffy slider implementation works best if you have a predefined ratio between width and height. You can try to unset that ratio in the CSS and see if it works for you.