We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
  • Hi folks,

    I've been working on a new add-on to address the ol' problem of clients and users sticking huge images in Content and richtext TVs and then "sizing them down" by simply changing the dimensions. I know there's another add-on or two which do something similar; I've tried to avoid their shortcomings and add some new features as well.

    Anyway, my extra is called imageSlim: http://modx.com/extras/package/imageslim
    The documentation is on GitHub: https://github.com/oo12/imageSlim

    I gave it a beta designation mainly because content and system configurations are so variable and while I've tried to anticipate all the possibilities, I'm sure I haven't thought of everything. For what it's worth, I've got it running on two sites at the moment and haven't come across any bugs yet.

    Well, take a look and let me know if there's anything that needs fixing or if there's another feature you'd like to see.
      Extras :: pThumbResizerimageSlimsetPlaceholders
      • 3749
      • 24,544 Posts
      Great idea.

      One of the big problems with image sizing utilities that operate on-the-fly is the time it takes for them to execute. MaxiGallery for Evolution does the resizing when you upload the image, so loading and delivering the resized image is extremely fast. I don't think there is anything like that for Revolution (I could be wrong).

      It would be a really useful feature if your extra had the option to save the resized image to a file.

        Did I help you? Buy me a beer
        Get my Book: MODX:The Official Guide
        MODX info for everyone: http://bobsguides.com/modx.html
        My MODX Extras
        Bob's Guides is now hosted at A2 MODX Hosting
      • Yes, the ideal solution would definitely be to have a file browser / asset manager which handles getting images into shape when they're first put on the site, instead of having to deal with them later. There's ImageTV+, which adds some sizing and cropping features to an image TV, but it doesn't help you out with images added via a rich-text editor. I never used MaxiGallery, but I don't think it integrated with TinyMCE, right?

        I'll admit, imageSlim takes a simple "treat the symptoms"-type approach to a much thornier problem. In its defense though, it's an easy retrofit to an existing site (you don't have to go through every resource) and there isn't any performance hit for a cached resource. It does save the resized image to a file–thanks to phpThumbOf's caching–so after the first run on a page it's a lot faster. And if the page is cached it's not run at all.

        The problem with some of the other similar extras is that they're OnWebPagePrerender plugins, meaning they examine the full content of a page on your site every time it's visited, and this applies to all pages on the site. That really can cause performance problems. With this add-on I've tried to address to some extent the three problems I see with that:

        1. This one only processes the parts of the page you tell it to, not the whole output. (Content and rich-text TVs should be the only candidates).
        2. Since it's a snippet, you can add it only to the template(s) where oversized images are a problem. It won't run on all your site's resources unless you make it (and you shouldn't). For example on a recent site I did, the only place oversized images were being added was to the content area of blog posts, so I have imageSlim run only on the content field of the blog post template.
        3. It's only executed when the resource isn't cached; on subsequent page loads it's not run at all. Plugins attached to OnWebPagePrerender will run every time a page is accessed (though phpThumbOf won't have to resize the images every time of course).

        So I think it's an improvement at least.

        There could be an OnDocFormSave plugin which bakes the resized image into the content in the DB, but that comes with a different set of problems.
          Extras :: pThumbResizerimageSlimsetPlaceholders
        • phpThumbsUp allows you to auto-resize images when they are uploaded to specific folders through the manager in Revolution, but it isn't integrated into tinyMCE. That would be a great idea for the future though.

            Are you in the Nashville area? Join us for our next MODX meetup!
            • 44665
            • 60 Posts
            sebastian-marinescu Reply #5, 8 years, 4 months ago
            Hi Jgrant,

            does imageSlim only activate IF the picture has bigger dimensions as specified through the maxWidth-Parameter?

            I tried

            and expected/hoped that with "q=70" every image will be processed - did I expect/hope wrong?

            Thanks for any answer and best regards,
              • 23849
              • 223 Posts

              First off, great plugin.

              Secondly, I'm looking to do something slightly different than what I.S. does normally, and wanted to get your thoughts. What I'm wanting is to be able to upload images at 2X their display size (3200px wide), keep that natural width on retina devices (though only displaying at 1600), but then cut the natural width to 1600px dynamically for non-retina devices.

              Basically, I'm trying to avoid having to make two versions of every image, one 2X for retina and one at display size. Is this possible with I.S? Let me know!
                Nick Hoag
                Creative Partner
                The FutureForward

                • 44665
                • 60 Posts
                sebastian-marinescu Reply #7, 7 years, 4 months ago
                Hi @thefutureforward,

                have you sorted that one out?

                In my opinion this has nothing to do with ImageSlim.
                In the end your editor should still only crop one version of the image.

                You then only have one original image, and one ImageSlim-Object
                with the dimensions you gonna use in the front-end.

                There on the front-end you could then output your desired 1x, 2x,
                3x, Nx - versions of the image via a pThumb-call or -modifier.