Jump to content
FWR Media

Product listing

Recommended Posts

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.

 


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

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 by MyBookShop

Share this post


Link to post
Share on other sites

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 by raiwa

Share this post


Link to post
Share on other sites

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 by burt
removal of personal data

Share this post


Link to post
Share on other sites

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

images-in-product-listing-page-squashed.jpg

Edited by mddel

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

images-in-product-listing-page-squashed.jpg

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Edited by Xpajun

Currently...:

 

Working with osCommerce 2.3.1

Now working with Phoenix

Add-Ons so far Installed:

Not all of these installed yet on Phoenix - some are and the rest will be

 

Add date and order number to invoice and packing slip,

Products Cycle Slideshow,

Detailed Monthly Sales,

Holiday Settings,

Tracking Module for 2.3

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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 :wink:

 

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

 

 


Currently...:

 

Working with osCommerce 2.3.1

Now working with Phoenix

Add-Ons so far Installed:

Not all of these installed yet on Phoenix - some are and the rest will be

 

Add date and order number to invoice and packing slip,

Products Cycle Slideshow,

Detailed Monthly Sales,

Holiday Settings,

Tracking Module for 2.3

Share this post


Link to post
Share on other sites
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 :wink:

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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. 


Always back up before making changes.

Share this post


Link to post
Share on other sites
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 by raiwa

Share this post


Link to post
Share on other sites

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.

reduce-white-space-around-image.jpg

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

thumbs_dir.JPG.4adc1a724319bd9b2e19d0844db4707a.JPG

Dan

Share this post


Link to post
Share on other sites
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.

reduce-white-space-around-image.jpg

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 by raiwa

Share this post


Link to post
Share on other sites
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.

thumbs_dir.JPG.4adc1a724319bd9b2e19d0844db4707a.JPG

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"

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×