On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • Hello Everyone,

    Many thanks goes to Ryan for sharing this bit of code which I’ve managed to wrap inside a plugin so that it can be easily applied to your modx enabled website.

    Trigger Event:
    --------------------
    OnWebPagePrerender

    Plugin configuration:
    ----------------------
    &spacer=PNG Spacer Path;string;assets/images &sm=Size Method;list;Scale,Crop,Image;Image

    Create a new plugin with the above settings. Unzip the attached zip file and copy content of pngalpha4msie.txt into the plugin. Also copy the spacer.png image file into assets/images folder.

    Here’s an example of a png-24 alpha image tested in IE 6.0:

    Note: You must be logged in before you can view images and download file attachments

    Before (plugin disabled or not installed):


    After (plugin enabled):


      xWisdom
      www.xwisdomhtml.com
      The fear of the Lord is the beginning of wisdom:
      MODx Co-Founder - Create and do more with less.
    • Thanks for great Plugin laugh

      it is really good since IE does not support PNG transparency images.

      Best wishes and regards,

      zi
        Zaigham R - MODX Professional | Skype | Email | Twitter

        Digging the interwebs for #MODX gems and bringing it to you. modx.link
      • I think this is a much needed plugin, thanks! I’m courious though on what effect do the ie hack for the png alpha transparency have on the validation of the page as far xhtml and css compliance, I saw that hack a long time ago but can’t remember exactly how it’s done any more.

        Thanks for the great plugin! Regardless there is a couple of sites that will make good use this grin
          "Don’t ask why or wither, just enjoy the icecream while it’s on your plate." - Oscar Wild

          "Stuff and nonsense for this valley to the next." - Zen Saying
        • Thank you very, very much!
            Mikko Lammi, Owner at Maagit
          • I think this is a much needed plugin, thanks! I’m courious though on what effect do the ie hack for the png alpha transparency have on the validation of the page as far xhtml and css compliance, I saw that hack a long time ago but can’t remember exactly how it’s done any more.

            I don’t think it negatively affects validation, FWIW. Also, any other ideas for a "compatibility kit" for Win IE less than the upcoming version 7.0. Hover:anything comes to mind for me...
              Ryan Thrash, MODX Co-Founder
              Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
            • Quote from: element at Jun 01, 2005, 04:27 PM

              ? I’m courious though on what effect do the ie hack for the png alpha transparency have on the validation of the page as far xhtml and css compliance

              Hi,

              Thanks to all for the feedback. I don’t see where this plugin should have any effect on xhtml and css. How it works is that it will only replace the "src" values for the necessary tags only when the IE browser is detected. So it should not change anything for FF, opera or any other browser.

              Best regards,
                xWisdom
                www.xwisdomhtml.com
                The fear of the Lord is the beginning of wisdom:
                MODx Co-Founder - Create and do more with less.
              • OK found a little bug with this cool plugin

                the plugin needs image dimentions to work or els the spacer.png wil be 0 pixels and that way wil it not show the image.

                I used the img TV to set a png but that resulted in the png file not showing and the source looked like this:

                <img src='assets/images/spacer.png' style="width: 0; height: 0; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.elisabethschaap.nl/assets/images/header/header_img_nl.png', sizingMethod=);" /
                


                then I changed the TV to a richeditor one and placed an png with that and it works fine. The source of the page rederd this way is:
                <img src="assets/images/spacer.png" style="width: 610px; height: 124px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.elisabethschaap.nl/assets/images/header/header_img_nl.png', sizingMethod=);" alt=""/>
                


                see the difference?

                This: style="width: 0; height: 0; (image not showing)
                or this: style="width: 610px; height: 124px (image showing)

                Greets Dimmy
                  follow me on twitter: @dimmy01
                • Hi Dimmy,

                  I think the reason is because the Image TV does not set the width and height of the image. You can continue to use the RichText editor for the time being.

                  TP3 will include an Image Widget which will allow you to set the Width and height of the image.
                    xWisdom
                    www.xwisdomhtml.com
                    The fear of the Lord is the beginning of wisdom:
                    MODx Co-Founder - Create and do more with less.
                  • Quote from: xwisdom at Jul 14, 2005, 05:37 PM

                    Hi Dimmy,

                    I think the reason is because the Image TV does not set the width and height of the image. You can continue to use the RichText editor for the time being.

                    TP3 will include an Image Widget which will allow you to set the Width and height of the image.

                    X,

                    I don’t know if this will help, but I tried using a bunch of different hacks to make PNGs work for me, and the one that works the best is the one at: http://homepage.ntlworld.com/bobosola/

                    FWIW, please everyone keep in mind that IE7 will support PNG transparency.
                    • Well...I’ll put my two cents in....

                      I think one thing everyone should realize is that the support for PNG alpha transparency is still not quite where it needs to be yet. Granted, the support is there for many browsers and with some hacks it can be implemented. But relying on it and designing a site around it might not be such a good thing yet. I always do everything in terms of the "lowest common denominator".

                      For example, when it comes to screen resolutions, 800x600 is about the lowest common denominator with 1024x768 quickly becoming the norms. Now, this assumes that you’re targetting the widest audience. If you know that the majority is using higher screen resolutions then 1024x768 might be your target resolution.

                      Another example would be which revision of CSS to use. Obviously, CSS 3 isn’t really an option right now. But you might want some CSS 2 stuff. So developing your style sheets to degrade properly would definitely need to be addressed.

                      The point is that if you use PNG alpha transparencies, you’ll need to think about how it’ll degrade on browser that don’t support transparencies or PNG’s for that matter. I certainly wouldn’t like to visit a site and see a nasty grey box around an image. I guess it just really depends on how you plan to use them and what your target audience will be.

                      Just some food for thought. smiley

                      Jeff
                        Jeff Whitfield

                        "I like my coffee hot and strong, like I like my women, hot and strong... with a spoon in them."