Announcement

Collapse
No announcement yet.

3dcart resizing thumbnails

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 3dcart resizing thumbnails

    Hi,

    I'm just trying to figure out 3dcart's behavior here. I make custom thumbnails for all of our products at 200x200. Our store settings are set to display thumbnails at 125x125. It appears as though 3dcart is resizing the thumbnail from 200x200 to 125x125 when I upload the file via the admin interface.

    So, in the future, when/if we switch to thumbnails displayed at 200x200, I will still have 125x125 thumbnails, because 3dcart has resized my files.

    This seems like bad behavior to me. Shouldn't the thumbnails just have a max-width property of whatever the store setting is, not actually resize the image to whatever the store setting is.

  • #2
    Arguments could be made both ways - for one - optimizing the image to 125x125 reduces byte size and bandwidth for every image transmitted. If you have many many images on your site this could translate to a considerable savings over the course of a month. This prevents the browser from requesting potentially huge files that just get scaled down on the view anyway (which also causes your browser to have to do more work than necessary to paint).

    On the other hand, allowing you to modify the thumb size does just what you said, after the resized image exists, it must be updated if you want to take full advantage of the new resolution.

    With storage costs being as cheap as they are now, it would make the MOST sense for a platform to take your original, create a referenced copy that is optimized for your current thumbnail size and send that whenever the image is requested. However this is not what 3dcart does and probably won't (ever) be.

    You may just want to make it a part of your workflow to acknowledge if you ever want to change your thumb size, re-uploading your corresponding assets will need to be done as well.
    Last edited by jleclair; 05-11-2016, 01:19 PM.

    Comment


    • #3
      Thanks for the notes. I was just hoping that I was overlooking something and that my 200px thumbnails were still there, somewhere.

      Comment


      • #4
        If you uploaded your self created thumbnails at 200x200 they should remain that way in the folder. When the 3dcart system generates thumbnails it typically creates new images with "_thumbnail.jpg" on the end of the image. This will leave your original image in tact at 200x200.

        What I am wondering though is depending on the theme you are using it may have the max image size set at 125px in the css. This is certainly the case in some themes. I know you may have checked already, but if you right click and "view image details" on one of the thumbnails you can see if it is actually the 200x200 image just being resized via css to 125px. Or it is actual size 125px (3dcart generated).

        Worst case scenario, after you change your "Thumbnail Image Size" in the Product Display settings to 200x200 you can go through and regenerate thumbnails on each product. It is tedious if you have a ton of products, but on the other hand you cna fly through a couple thousand pretty quick if need be.

        Point is... There are always other ways, so you are not stuck in the woods yet.

        Hope this sheds a tad bit of light for you.

        Shaun
        TheCartDesigner.com
        Not 3dcart Owned or Operated
        100% Independent 3dcart Expert


        Follow Us on Twitter

        Comment


        • #5
          I recommend having high resolution thumbnails... 1000X1000 and then shrinking them dynamically with thumbnail.asp. The link would look like this:

          Code:
          /thumbnail.asp?file=assets/images/example/example.jpg&maxx=200&maxy=0
          This will take your image, no matter what size, and resize it to 200 pixels before it send it to the browser. The advantage is that you can then change all your thumbnail sizes dynamically based on the template file. If all of a sudden you want to have 500px thumbnails you can do it. Also you can make high resolution retina capable thumbnails by making the image download at 500px and then restricting it to 250px with the width modifier.

          In my mind uploading a low resolution thumbnail is a waste of time and space, you are then locked into that forever. Might as well do ONE upload, and then adjust it to whatever size you need in the template.

          ****note: this process is different then just changing the size in the HTML. When you use thumbnail.asp its actually resizing the image on the fly, so the browser is only getting the small image, if that's what you want.

          Comment


          • #6
            Kudos NMTEACO , that is a very good idea!

            The only thing to remember is that uploading large file images still hits your bandwidth usage at the time of upload. Granted most will only upload mass one time for the most part. But if you have a low limit, it is good to be aware.
            TheCartDesigner.com
            Not 3dcart Owned or Operated
            100% Independent 3dcart Expert


            Follow Us on Twitter

            Comment


            • #7
              Originally posted by NMTEACO View Post
              I recommend having high resolution thumbnails... 1000X1000 and then shrinking them dynamically with thumbnail.asp. The link would look like this:

              Code:
              /thumbnail.asp?file=assets/images/example/example.jpg&maxx=200&maxy=0
              That sounds like a good solution. For someone who's not terribly HTML savvy, do you mind letting me know the steps to implementing that in the template?

              I have a block that reads

              Code:
              <img src="[THUMBNAIL]" alt="[name]" id="qv_[catalogid]" />
              Should I change that to

              Code:
              <img src="/thumbnail.asp?file=[THUMBNAIL]&maxx=200&maxy=0" alt="[name]" id="qv_[catalogid]" />

              Comment


              • #8
                That is correct.

                Code:
                <img src="/thumbnail.asp?file=[THUMBNAIL]&maxx=200&maxy=0" alt="[name]" id="qv_[catalogid]" />
                Remember that there are multiple templates that you can use this. Home, Category, Listing (related/accessories), etc.
                TheCartDesigner.com
                Not 3dcart Owned or Operated
                100% Independent 3dcart Expert


                Follow Us on Twitter

                Comment


                • #9
                  Originally posted by thecartdesigner View Post
                  That is correct.

                  Code:
                  <img src="/thumbnail.asp?file=[THUMBNAIL]&maxx=200&maxy=0" alt="[name]" id="qv_[catalogid]" />
                  Remember that there are multiple templates that you can use this. Home, Category, Listing (related/accessories), etc.
                  Hmm, it looks like it's still grabbing that old thumbnail file (the one that's smaller than 200px), which makes sense because it's still got the thumbnail code block in there. I've tried [image1] in place of [thumbnail], to have it grab the main image, but that doesn't seem to work either. What am I missing?

                  Comment


                  • #10
                    You are going to have to

                    1. re-upload your thumbs at a larger size
                    2. go through each prod and regenerate thumbnails
                    3. or copy over the main image to the thumb area via csv

                    Any which way you will have to get a suitable starting size to work with. I'll shoot you a PM quick
                    TheCartDesigner.com
                    Not 3dcart Owned or Operated
                    100% Independent 3dcart Expert


                    Follow Us on Twitter

                    Comment

                    Working...
                    X