Product listing

[burt]

21 hours ago, mddel said:

Annual subscription has been paid and we wish the team all success with the project

Thank you, it is appreciated very much.  I will get you caught up on the supporters codes tomorrow morning as I have been away all weekend.

 

[MyBookShop]

Thank you for your response Raiwa.

The cut and paste is fine, I have two Frozen sites perfect. And now a new site. Installation showed all green ticks for compatibility.

As I said the original code installed with this module leaves me with a blank website. As stated this is a vanilla install with just this mod.

The above prior changes gave me back my website with images but the images were stretched horizontally.

-------------------------------------- I have now changed code to this, and it gives me my site with the images not stretched but also not centered on the main page only (index.php) the (product_info) pages appear to be centered.

...

   require_once 'includes/modules/kiss_image_thumbnailer/classes/Image_Helper.php';
    $attributes = array( 'alt' => $alt, 'width' => $width, 'height' => $height );
    
    $image = null;
    if (tep_not_null($width) && tep_not_null($height)) {
      $image .= ' width="' . tep_output_string($width) . '" height="' . tep_output_string($height) . '"';
    }

    $bs_parameters = ' class=img-fluid"';

//   if (tep_not_null($responsive) && ($responsive === true)) {
//     $bs_parameters .= 'img-fluid';                  //not working  
//     $bs_parameters .= 'img-responsive';      //works
//    }

--------------------------------------

I'm no coder. Rawia I'm just trying to get this plugin to work on my config. I'm not saying this is a solution, just that it brings the site back for me.

It appears to me that some parameters are not being added together or passed through to other functions or are the incorrect type, but the log shows no such error.

As stated I'm trying to tell you what I'm doing to get my site up in case anybody else has this trouble and diagnose if there is a problem that only manifests on some configs.

I really would appreciate any help, can provide you (Raiwa) with site access if you like, Thankyou.

Mark

http://www.143books.com.au/index.php

Edited November 18, 2019 by MyBookShop

[♥raiwa]

1. paste again the whole tep_image function into your html_output.php
2. if you get again the same error, upload your file here (without any modification, comment etc.)
3. try with my modified file:
html_output.php

 

I had a look on the source code of your store index page and got the following wrong html:

title="Shiny Red Apples" alt="Shiny Red Apples" class=img-fluid" card-img-top" />

on my test store I get this:

title="Shiny Red Apples" alt="Shiny Red Apples" class="img-fluid card-img-top" />

Do you  see the wrong placed double quotes in the image class?

You must have applied a wrong modification.

 

Edited November 18, 2019 by raiwa

[MyBookShop]

Thankyou. I am still clueless to the cut and paste error in Notepad++, I also used the compare in it and, sent to notepad for clear txt. Still the attachment has fixed this for me.

And allowed me to move on with the site. So I did this, hope you do not mind I donated to Burt.

Thankyou again Raiwa.

Edited November 19, 2019 by burt
removal of personal data

[mddel]

The issue that we had if one product is listed the single product stretches to cover the entire page has now been resolved thanks to the supporters codes. The images that we use on the site are square shaped as we use the same images for google product feeds and can not change same to a rectangle shape. This causes the square shaped images to look squashed on the product listing page as per the attached screenshot. Any assistance to resolve this issue would be appreciated. Thank you

Edited November 23, 2019 by mddel

[♥Heatherbell]

11 hours ago, mddel said:

This causes the square shaped images to look squashed on the product listing page as per the attached screenshot.

Yes, we had the same problem - we fixed by adding .img-fluid {max-width: 250px; max-height: 250px;} to user.css.
This worked for us so hope it helps you but maybe an expert will post a better fix.

[♥raiwa]

12 hours ago, mddel said:

The issue that we had if one product is listed the single product stretches to cover the entire page has now been resolved thanks to the supporters codes. The images that we use on the site are square shaped as we use the same images for google product feeds and can not change same to a rectangle shape. This causes the square shaped images to look squashed on the product listing page as per the attached screenshot. Any assistance to resolve this issue would be appreciated. Thank you

You could use the KissIt image thumbnailer. Apart of producing thumbs in the required image size, which increases page load speed for first time page loads, it can also add background to the thumbs to fit always the correct image proportion even you are using images with different proportions.

KissIT Image Thumbnailer Phoenix

KissIT Image Thumbnailer CE

[mddel]

On 11/24/2019 at 8:21 PM, Heatherbell said:

Yes, we had the same problem - we fixed by adding .img-fluid {max-width: 250px; max-height: 250px;} to user.css.
This worked for us so hope it helps you but maybe an expert will post a better fix.

Thank you for the prompt reply. I tried this fix but it did not work. I will try the KissIT setting as welll

On 11/24/2019 at 8:21 PM, Heatherbell said:

Yes, we had the same problem - we fixed by adding .img-fluid {max-width: 250px; max-height: 250px;} to user.css.
This worked for us so hope it helps you but maybe an expert will post a better fix.

 

On 11/24/2019 at 9:12 PM, raiwa said:

You could use the KissIt image thumbnailer. Apart of producing thumbs in the required image size, which increases page load speed for first time page loads, it can also add background to the thumbs to fit always the correct image proportion even you are using images with different proportions.

KissIT Image Thumbnailer Phoenix

KissIT Image Thumbnailer CE

We have the KissIT image Thumbnailer Phoenix installed . I would appreciate if you could kindly let me know what setting need to be changed to display a square shaped image on the product list page

[♥raiwa]

1 hour ago, mddel said:

We have the KissIT image Thumbnailer Phoenix installed . I would appreciate if you could kindly let me know what setting need to be changed to display a square shaped image on the product list page

Try to set the small image width and height to the same value (250). If this doens't help, you need to address it with css like suggested by Heatherbell. Without access to your store it is not possible to give more precise advice.

[Xpajun]

Just set the image settings width to 250 height can be left blank or auto

Edited November 25, 2019 by Xpajun

[♥raiwa]

57 minutes ago, Xpajun said:

Just set the image settings width to 250 height can be left blank or auto

No, for Kissit Image Thumbnailer both must have a numeric value.

[Xpajun]

1 minute ago, raiwa said:

No, for Kissit Image Thumbnailer both must have a numeric value.

YesI can understand that for a program that adds bits on to your image but in osc  just set the width of your images and if you have a square image a square image will be on the page - the answer to the original question

 

On 11/23/2019 at 9:59 PM, mddel said:

The issue that we had if one product is listed the single product stretches to cover the entire page has now been resolved thanks to the supporters codes. The images that we use on the site are square shaped as we use the same images for google product feeds and can not change same to a rectangle shape. This causes the square shaped images to look squashed on the product listing page as per the attached screenshot. Any assistance to resolve this issue would be appreciated. Thank you

 

 

[♥raiwa]

29 minutes ago, Xpajun said:

YesI can understand that for a program that adds bits on to your image but in osc  just set the width of your images and if you have a square image a square image will be on the page - the answer to the original question

OP uses KissIt image thumbnailer, he needs therefore width and height numeric values.

[♥Moxamint]

23 minutes ago, raiwa said:

OP uses KissIt image thumbnailer, he needs therefore width and height numeric values.

Is there a drawback if you make KissIt image thumbnailer calculate the width or height automatically if only height or width is provided?

Thanks, Eddy

[♥ecartz]

3 hours ago, Moxamint said:

Is there a drawback if you make KissIt image thumbnailer calculate the width or height automatically if only height or width is provided?

It makes the layout harder to calculate.  Because if the width is set, then the height can change.  Or if the height is set, the width can change.  Consider specifically the situation where the canonical value is set to 300, considering a 300x300 image.  On some products, the image might be 300x60 and on others 300x2100.  Will it look good to mix products where some are 35 times as tall as others?  Or 50x300 and 2000x300.  Some products are most of the width of a screen while others take up just a fraction. 

If you specify width and height, you can make all the images fit into that box and automatically extend the ones that need it.  So a 300x60 image will get 240 rows of padding.  While the 300x2100 will be resized to something like 43x300 and receive 257 columns of padding.  This gives each product a predictable size in the display. 

[♥raiwa]

4 hours ago, Moxamint said:

Is there a drawback if you make KissIt image thumbnailer calculate the width or height automatically if only height or width is provided?

Thanks, Eddy

It's just the sense to specify width and height, so all images independent of their proportion will occupy the same space. KissIt image thumbnailer adds therefore background to create equal thumbs and avoids like this stretching. It works best using square proportion, so mixing landscape and portrait images will still result in equal sized product cards and a nice aligned product listing.

I believe @ecartz wanted to explain more or less the same.

Edited November 25, 2019 by raiwa

[mddel]

Thank you very much for all the information which I have used in the setting on the KissIt image to make the product listing images square in shape as per the screen shot. However I would like to make the images larger , so that there is less white space around the image. Please let me know how this could be achieved. Thank you once again.

[♥Dan Cole]

Dinesh I'm going to move this thread over to the support thread for Rainers Kiss Image Thumbnailer.  You'll probably get help there but in the meantime what settings have you set for the small images ie Admin->configuration->images?  Try increasing whatever they are set at and let us know if that helps.

Dan

 

[♥Dan Cole]

Rainer I just installed this on a 1.02.6 site and noticed that the thumbnail images are outside of the "size" directory.   See the image below....is that normal?  I assume it is not.   On my old GOLD site it use to sort them in one big directory and label them by including the sizes in the filenames.  Adding them to a separate directory makes sense but for some reason that is not happening on my install.  Perhaps it is the way I'm keeping my images in folders and sub-folders.

The original images (large) are stored in a "skus" directory and then within sub-folders.  The thumbnails are repeating the file structure and images okay.  It is just not putting them in the 200_200 directory.

Dan

[♥raiwa]

18 hours ago, mddel said:

Thank you very much for all the information which I have used in the setting on the KissIt image to make the product listing images square in shape as per the screen shot. However I would like to make the images larger , so that there is less white space around the image. Please let me know how this could be achieved. Thank you once again.

The original images should be at least as big as the required image size. Kissit uses a image upsize restriction setting to avoid loosing image quality.

You can also try to use right click show image. If you have a white margin in the thumbs (right left) then this is the case.

Edited December 1, 2019 by raiwa

[♥raiwa]

15 minutes ago, Dan Cole said:

Rainer I just installed this on a 1.02.6 site and noticed that the thumbnail images are outside of the "size" directory.   See the image below....is that normal?  I assume it is not.   On my old GOLD site it use to sort them in one big directory and label them by including the sizes in the filenames.  Adding them to a separate directory makes sense but for some reason that is not happening on my install.  Perhaps it is the way I'm keeping my images in folders and sub-folders.

The original images (large) are stored in a "skus" directory and then within sub-folders.  The thumbnails are repeating the file structure and images okay.  It is just not putting them in the 200_200 directory.

Dan

It shouldn't be like this. I have several sites using kiss it together with image subfolders and it works like you say.
Just to be sure, you have the "skus" directory included in the image path in the database? Like: "skus/category_name/my_big_image.jpg"

[♥Dan Cole]

4 hours ago, raiwa said:

It shouldn't be like this. I have several sites using kiss it together with image subfolders and it works like you say.
Just to be sure, you have the "skus" directory included in the image path in the database? Like: "skus/category_name/my_big_image.jpg"

Thanks Rainer....you get a gold star. 🤩  That would explain it.  My images are outside the images directory and needed some code added to their urls so they could be located.   As a test I removed the extra code from one of my skus and it works as it should.  Thanks for pointing me in the right direction.

Dan

[♥raiwa]

👍

[greasemonkey]

@raiwa is this the correct support thread for Kiss Image Thumbnailer? The link for support in the instructions is dead http://www.oscommerce.com/forums/topic/388022-kissit-image-thumnailer/?hl=kissit

I've just installed v3.0 in a new Phoenix 1.0.4.3 - and it would seem the DB install is not running on catalog page load.

What triggers catalog\includes\modules\kiss_image_thumbnailer\db_install.php?

Also (keep in mind I'm not nearly as smart as most...lol).... can the changes to admin/include/functions/general.php not be moved to a siteWide admin hook?

[♥raiwa]

Hello Scott @greasemonkey,

I just checked and yes, the thread is not available.

@burt, seems your message box is full, so info on this way:

The old KissIt Image Thumbnail support thread is not available. Any reason or just a mistake?

http://www.oscommerce.com/forums/topic/388022-kissit-image-thumnailer/

It shows:

Sorry, there is a problem

We could not locate the item you are trying to view.

Error code: 2F173/1

1 hour ago, greasemonkey said:

I've just installed v3.0 in a new Phoenix 1.0.4.3 - and it would seem the DB install is not running on catalog page load.

What triggers catalog\includes\modules\kiss_image_thumbnailer\db_install.php?

It's triggered within the modified tep_image function. So you need it to be modified, then load a store page and it should install.

1 hour ago, greasemonkey said:

Also (keep in mind I'm not nearly as smart as most...lol).... can the changes to admin/include/functions/general.php not be moved to a siteWide admin hook?

It is not possible. It requires another core change to allow to overwrite the core tep_image function. It has been discussed already elsewhere.

rgds
Rainer