We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 33997
    • 150 Posts
    QUOTE FROM: J_P ON JUNE 13, 2009, 09:40:34 PM
    In case it helps anyone, I just thought I’d add in how I’ve managed to create square thumbs without using phpThumb.

    1/ In assets/snippets/maxigallery/css/default.css add the following to "ul.thumbs li":

    width:size-you-want px;
    height:size-you-want px;
    overflow:hidden;

    2/ In assets/snippets/maxigallery/watermark/Thumbnail.class.php, swap x and y around in line 264

    What this seems to do (I think I’m right - it works anyways) is make sure that that the shortest dimension is used when the image is resized - before the swapping the x and y around the largest was being used resulting in a rectangular thumb.

    The other larger dimension will then be masked by the overflow:hidden.

    So I initially tried to implement the above, and it didn’t work; I then spent some 15 or 20 hours trying to put together phpThumb(), but I kept running into different issues - compatibility with PHP 5.3, and then different aspects were still not working. I realized that phpThumb() is not very portable; I can configure it in one spot, but when I move it to another server or install on new, I may run into any number of issues.

    I then tried to do square thumbnails using only CSS, but I was only getting the top left of the pic, which doesn’t look good at all.

    I decided to re-look at the above code suggestion, and there is one additional line that needs to be edited for it to work. See below:

    This (lines 262-269):
    	function size_auto($size=100)   {
    		//size
    		if ($this->img["x"]>=$this->img["y"]) {
        		$this->size_width($size);
    		} else {
        		$this->size_height($size);
     		}
    	}
    

    becomes this:
    	function size_auto($size=100)   {
    		//size
    		if ($this->img["y"]>=$this->img["x"]) {
        		$this->size_width($size);
    		} else {
        		$this->size_height($size);
     		}
    	}
    


    And here is what is missing from the above quoted post - this (lines 279-286)
    	function size($size_x,$size_y)   {
    		//size
    		if ( (($this->img["x"])/$size_x) >=  (($this->img["y"])/$size_y) ) {
        		$this->size_width($size_x);
    		} else {
        		$this->size_height($size_y);
     		}
    	}
    

    becomes this:
    	function size($size_x,$size_y)   {
    		//size
    		if ( (($this->img["y"])/$size_y) >=  (($this->img["x"])/$size_x) ) {
        		$this->size_width($size_x);
    		} else {
        		$this->size_height($size_y);
     		}
    	}
    


    I think it may have been caused by updates being applied, adding in the second part of code, but it works, it creates square thumbnails (portrait pics are cut off on the bottom a little, and landscapes are cut off a little on the side, but it is very acceptable chopping).

    Don’t forget the CSS addition above!!! Enjoy.
      "Great spirits have always encountered violent opposition from mediocre minds." -Albert Einstein
      • 23299
      • 1,161 Posts
      Glad to see this!

      I will have a go. I have tried adding phpThumb() but I never could get it to work. There are a bunch of threads on doing so but a step by step roadmap eludes me. In the end I found it easier to run a Photoshop macro action and replace all the thumbs directly. Most of my galleries contain a reasonable number of images so this is less of a chore than it sounds.

      But it would be great if there was on clear magic bullet for getting phpThumb() to function...
        • 23299
        • 1,161 Posts
        Ok, I tried all that and I get the following error:
        « MODx Parse Error »
        
        MODx encountered the following error while attempting to parse the requested resource:
        « PHP Parse Error »
         
        PHP error debug
          Error:	Function split() is deprecated	 
          Error type/ Nr.:	 - 8192	 
          File:	/Applications/MAMP/htdocs/dogsandmonsters/assets/snippets/maxigallery/maxigallery.class.inc.php	 
          Line:	242	 
          Line 242 source:	 $sizes = split('x', $max_thumb_size);	 
         


        I am correct in thinking you are NOT using phpThumbs at all here?

        I did some digging into the phpThumb threads and its really confusing. Some folks have achieved success but some are using the MODx extra download and some are using the original source file and modifying that?

        The install directions leave me unsure of the steps as well.
        Installation:
            - Copy my slightly modified phpThumb to assets/snippets/phpthumb
            - Change phpThumb.config.php according to your needs (GD/ImageMagick, caching, ...) and create the cache directory (assets/images/.phpthumb_cache by default)
            - Copy image.php to your MODx document root
            - Change the high security password in phpThumb.config.php
            - Create a new snippet called phx:phpthumb and paste the contents of snippet_phx_phpthumb.php
            - If you want to use the plugin paste the contents of plugin_phpthumb.php into a new plugin and check the OnWebPagePreRender Event


        Not sure what changes to my "needs" I need to make? How do you create the cache directory?

        I would love to see a simple detailed step by step list of instructions on how to achieve square thumbnails??????????
          • 23299
          • 1,161 Posts
          OK, I found something that fixes that error:
          Open C:\xampp\htdocs\goosecottage\assets\snippets\maxigallery\maxigallery.class.inc.php in an editor.
          
          Replace in line 242
           
          CODE:
          $sizes = split('x', $max_thumb_size);
              
          with
           
          CODE:
          $sizes = explode('x', $max_thumb_size); 
          


          I am getting mainly square thumbs now.

          Couple of things: I am getting awkward looking crops. Also, with slightly skinny vertical images I am not getting square thumbs: I get consistent heights but the verticals have thinner widths. The other issue is that the drop shadow effect is ruined but I bet that can be fixed (via the CSS) if you have a firm thumbnail size established...

          OK, I have been messing around with the height and width in the CSS. I have set both to 75 pixels which gives a nice sized square thumbnail. But the thumbs look really odd. It is taking the top left corner of the full sized image and rending a 75 pixel box from that to present the thumbs. The issue is that many of these generated thumbs present very little context to what the real image is? For example: say the image is a portrait of a person against a blue sky. The square thumb will just present a portion of the blue sky from the top left hand corner of the image, which is less than ideal?

          Am I missing something? Like getting the thumbs to use as much of the full image (from the center outwards) to generate a more complete view of what the full image will look like?

          Thanks!
            • 33997
            • 150 Posts
            You are correct: no phpThumbs involved, as well as no PHx. I forgot I had to fix the split() function, but thank you for notating the fix on that. I don’t know why you are getting thumbs that are not the right size.

            What this fix is doing, if I’m not mistaken, is sizing the thumbnail on its smaller side, instead of its larger side. Before, a 300x400 image would become 75x100, now it will become 100x134, so you’re only cutting off the 34 px on the larger side.

            This may help you fix your problem. Check the following:
            Your maxigallery call should declare a width for the thumbs - this should be the same pixel width and height that you have set in the css. So:
            [!MaxiGallery? &max_thumb_size=`100`!]
            
            <!--and in your CSS-->
            
            ul.thumbs li {
            width: 100px;
            height: 100px;
            }
            


            Sidenote (nothing to do with your problem): You can also create an additional container around the image, if that is easier or makes more sense to you. Call the
            &galleryPictureTpl=`yourChunkNameHere`
            
            to accomplish this, just grab the relevant code out of assets/snippets/maxigallery/templates/gallerypicturetpl.html
            Here is a site that places the extra div; I don’t think they used this method of thumbnails though:
            http://powerpraise.1-vision.eu/fotoalbum/december-2008.html

            Hope that helps!
              "Great spirits have always encountered violent opposition from mediocre minds." -Albert Einstein
              • 23299
              • 1,161 Posts
              Thanks Goonz,

              I did make sure that the widths & height in the CSS matches that parameter in the MaxiGallery call.

              I did check out that powerpraise gallery. You can see what I am talking about. Some of the shots of the singer are off to the right with a dark stage in the background. Some of the square thumbs show nothing but empty black stage background. I guess this is a limitation of this technique.

              So far I have tried four methods of presenting thumbs:

              1) Default MaxiGallery thumbs: you get a nice preview of the full image but a mix of full sized image shapes yields ugly looking rows of odd sized thumbs.
              2) Upload images via MaxiGallery and then custom crop all the full sized images with Photoshop and set the dimensions as desired and replace the saved thumbnails back to the server: with the exact same file names (tn_filename). This yields perfect thumbs custom cropped the way YOU want them to look. Big downside is all the extra work involved.
              3) Deploy phpThumbs. I myself could never get this to work, period! I also find all the documentation and threads confusing. I gave up here...
              4) Goonz’s modified CSS Method. Advantage here is that there are a few simple steps to get this working. No frustrating phpThumb script to wrestle with. Downside is that your thumbs can do a poor representation of your actual images.

              I have no idea how a functioning phpThumb (option 3) system compares to the CSS (option 4) system? I can’t compare them as I have decided to stop banging my head against the wall with phpThumb. Maybe a good tutorial will come along that explains it. But there seems to be way more user confusion and frustration than success.

              I am totally fine with using Photoshop to produce perfect thumbnails. The issue is with client sites. I get requests and queries on this issue and I am at a loss on what to do about it.

              This entire arena of presenting image galleries is a confusing mess of options. I love some of the jquery scripts out there. I also love the upload, sort and caption features that MaxiGallery offers. Some of the PHP scripts look very much like they were built by developers and not designers. Right now my preferred method is FancyBox (jquery) used from within MaxiGallery with Photoshoped thumbs. I have tried Gallery in Revo but I had frustration with just getting the system to function as well. I am not a fan of the Gallery presentation either. The image gallery presentation options are what keeps me more in the Evo camp overall. I use EvoGallery for a rotating/dissolving slide show effect as well. EvoGallery has a nice method of using the Manager to upload and organize your images.

              Thanks for all your input here though...

              Max

                • 33997
                • 150 Posts
                The powerpraise gallery doesn’t use this method, they only surround their images with additional divs. I haven’t fully tested this yet, but I don’t think you should be having these issues with this method.

                Maybe you never re-uploaded ALL the images? MaxiGallery makes the thumbnails upon upload, and doesn’t ever touch the images afterwards, so if your old setting was 120px, your photos will still be 120px, and they will still be measured on the longest side.

                Try to re-upload some of your photos and see if that fixes some of the problems you were complaining about. Thanks!
                  "Great spirits have always encountered violent opposition from mediocre minds." -Albert Einstein
                  • 23299
                  • 1,161 Posts
                  I had been dumping and reloading the images, but I just did this again, cleared the cash and then refreshed the front end page: HUGE IMPROVEMENT!

                  There is still some cropping going on, but the problem I was describing is no longer near as bad. I apologize if I was misrepresenting this technique.

                  This really is a cool trick. I think from now on this is what I will use for client sites that run on Evo with MaxiGallery. I know this CSS trick has been discussed before as an alternative to phpThumb but it had the issue you highlighted in this great thread. This really is a very good solution...

                  Thanks!
                    • 33997
                    • 150 Posts
                    Glad to hear you got it working!
                      "Great spirits have always encountered violent opposition from mediocre minds." -Albert Einstein
                      • 23299
                      • 1,161 Posts
                      A lot of this debate is governed by the variety of full size images that you will be presenting in your galleries. I am a photographer. I custom crop every picture that I shoot. This means that my online galleries will contain images of all shapes: square, rectangle, horizontal, vertical, skinny panoramics, etc, etc. The "holy grail" here is an automated system that yields nice consistent rows of thumbs that do a great job of representing what the full size image will look like. Obviously there is going to be considerable compromise here. So far this system looks the most promising to me while avoiding the whole mess of fighting phpThumb...

                      Max