We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

New Version of phpThumbsUp Supports Responsive Images

  • Scott Wespi Reply #1, 10 years, 9 months ago
    Check out the latest version of phpThumbsUp for automatic responsive images. We also added support for default arguments, so you can set a default zoom crop direction, or a default JPEG quality, for example.

    Get it from Darkstar, MODX, GitHub or install via Package Management.
      www.darkstardesign.com

      Are you in the Nashville area? Join us for our next MODX meetup!
    • sottwell Reply #2, 10 years, 9 months ago
      Nice!
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 43442
        • 5 Posts
        jellefaber Reply #3, 10 years, 9 months ago
        At first I couldn't get it to work on my installation of XAMPP on Windows. I think it has something to do with the last modified check in the function display() in phpthumbsup.class.php (line 416).

        It generates the images but it doesn't show anything.

        After commenting the following lines of code it worked:

        $etag = md5_file($file);
$last_modified = gmstrftime('%a, %d %b %Y %T %Z', filemtime($file));
if (@strtotime($this->get_server_var('HTTP_IF_MODIFIED_SINCE')) == $last_modified || $this->get_server_var('HTTP_IF_NONE_MATCH') == $etag) {
      header($_SERVER['SERVER_PROTOCOL'] . ' 304 Not Modified');
      return;
}


        and

        header('Etag: '. $etag);
header('Last-Modified: '. $last_modified);

        • Menno Pietersen Reply #4, 10 years, 9 months ago
          I love it!
          Just have a weird question, I can see that the responsive images work when I open the pages on my mobile/tablet and check the image size that is loaded...

          But since phpThumbsUp is responsive by checking the screen size of the device, I am unable to showcase or test if it is working on my workstation. Making the browser window narrow will not result in smaller images.

          Why is the browser windows not used for responsive images? (or: how could I test if it is working on my workstation)
            MODX Ambassador (NL) | Responsive web design specialist, developer & speaker
            DESIGNfromWITHIN, MPThemes and Any Screen Size
            Follow me on Twitter | Read my blog | My code on GitHub
          • Scott Wespi Reply #5, 10 years, 9 months ago
            @jellefaber - That's interesting. I'm assuming it has something to do with filemtime, but we're looking into it. You can track that issue on GitHub.

            @DESIGNfromWITHIN - The main reason we went with screen size instead of window size was because window size is so fluid. If someone starts with a small browser window and expands it to a larger size, we didn't want them to have to reload the page just to see the proper images. If you'd like to switch to something other than screen.width, you can modify the assets/components/phpthumbsup/js/responsive.js file pretty easily (just replace screen.width with something like document.body.clientWidth).

            Using screen.width does make things a bit harder to test, but one thing you can do is edit the value of your phptu_width cookie using a tool like Firebug for Firefox. The cookie will change it's value on every page load to your actual screen width by default, but if you change it and reload, you should get images at the right size until you reload again.
              www.darkstardesign.com

              Are you in the Nashville area? Join us for our next MODX meetup!
              • 8830
              • 98 Posts
              Eminos Reply #6, 10 years, 8 months ago
              Oh wow. I just got excited over pThumb, and now this!
              You guys should join up and make an über extra smiley
              • jgrant Reply #7, 10 years, 8 months ago
                I'm planning to release Resizer as a separate package once it's a little further along, so phpThumbsUp could have an option to use it instead of modPhpThumb for resizing if Scott ever wants.
                  Extras :: pThumb • Resizer • imageSlim • setPlaceholders
                • Scott Wespi Reply #8, 10 years, 8 months ago
                  Quote from: jgrant at Aug 14, 2013, 08:17 PM
                  I'm planning to release Resizer as a separate package once it's a little further along, so phpThumbsUp could have an option to use it instead of modPhpThumb for resizing if Scott ever wants.

                  We've certainly explored other options besides modPhpThumb. Let us know when you release it and we'll look into allowing users to choose whatever image resizing package they'd like to use.
                    www.darkstardesign.com

                    Are you in the Nashville area? Join us for our next MODX meetup!
                    • 10076
                    • 1,024 Posts
                    Frank Reply #9, 10 years, 6 months ago
                    No images are displayed, source looks like this; is that normal?
                    http://www.meppel-ict.nl/assets/images/phpthumbsup/w/970/h/400/src/buiten01.jpg
                    • Menno Pietersen Reply #10, 10 years, 6 months ago
                      Looks like a normal correct source. Maybe a caching issue...

                      • Is there anything in the error log?
                      • Did you try to re upload the image via the manager?
                        MODX Ambassador (NL) | Responsive web design specialist, developer & speaker
                        DESIGNfromWITHIN, MPThemes and Any Screen Size
                        Follow me on Twitter | Read my blog | My code on GitHub