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

Wayfinder dropdown menu

  • benmarte Reply #11, 11 years, 2 months ago
    Just install phpthumbof and use that to resize all your images so they are all the same size, make sure to use the zoom crop property in order to crop your images accordingly.

    Good Luck.
      Benjamin Marte
      Interactive Media Developer
      Follow Me on Twitter | Visit my site | Learn MODX
      • 37984
      • 215 Posts
      designcouch Reply #12, 11 years, 2 months ago
      Ok, so since your container has a fixed width and height, I suggest an extra called phpThumbOf. It crops your images automatically, and it will reduce the image size so your pages load a little faster too (you're not loading the extra part of the image that you can't see; just the visible part.

      To do this, simply install phpThumbOf using the Package Manager in MODX, and then amend your image source include phpThumbof, so that this:

      <img class="[[+galitem.imgCls]]" src="[[+galitem.image]]" alt="[[+galitem.name]]"/>


      becomes this:

      <img class="[[+galitem.imgCls]]" src="[[+galitem.image:phpthumbof=`w=940&h=466&zc=1`]]" alt="[[+galitem.name]]"/>


      This should crop the image to fit perfectly in your slider and the "zc" part enables zoom crop, which will make sure there's never any extra space present if the image is slightly too small.

      /// UPDATE ///

      It appears that Ben beat me to the punch tongue
        Jesse Couch
        MODX Aficionado, Front-End Designer & Developer
        http://www.designcouch.com
        • 38318
        • 128 Posts
        evegate94 Reply #13, 11 years, 2 months ago
        Thanks, you're a great source of help.
        I've done that but not working. When I look in firebug its using the phpthumb but the values appear as 0. Have I missed something?
          • 37984
          • 215 Posts
          designcouch Reply #14, 11 years, 2 months ago
          What are you referring to when you say Values? Would help to see the output (whatever is in the image src parameter).
            Jesse Couch
            MODX Aficionado, Front-End Designer & Developer
            http://www.designcouch.com
            • 38318
            • 128 Posts
            evegate94 Reply #15, 11 years, 2 months ago
            Sorry, it's ouputting
            <a href="/assets/components/gallery/connector.php?action=web/phpthumb&w=0&h=0&zc=0&far=&q=90&src=%2Fassets%2Fgallery%2F5%2F40.JPG">
<img class="" alt="Cranbrook, Kent" src="/assets/components/gallery/connector.php?action=web/phpthumb&w=0&h=0&zc=0&far=&q=90&src=%2Fassets%2Fgallery%2F5%2F40.JPG">

            If it was working properly, shouldn't the width show as w=940?
              • 37984
              • 215 Posts
              designcouch Reply #16, 11 years, 2 months ago
              Quick search revealed the problem. Apparently phpThumbOf and Gallery don't play nice when you use the [[+galitem.image]] placeholder. Found the solution here:

              http://forums.modx.com/thread/50628/trying-to-use-gallery-and-phpthumbof-together#dis-post-296357

              Basically, you replace your image src with the new placeholder that uses the phpthumbof output filter. So this:

              <img class="[[+galitem.imgCls]]" src="[[+galitem.image:phpthumbof=`w=940&h=466&zc=1`]]" alt="[[+galitem.name]]"/>


              becomes this:

              <img class="[[+galitem.imgCls]]" src="[[+fileurl:phpthumbof=`w=940&h=466&zc=1`]]" alt="[[+galitem.name]]"/>
                Jesse Couch
                MODX Aficionado, Front-End Designer & Developer
                http://www.designcouch.com
                • 38318
                • 128 Posts
                evegate94 Reply #17, 11 years, 2 months ago
                That could work but I get a missing image icon. I've read the thread and it seems this can occur but a solution didn't seem to be posted.
                  • 37984
                  • 215 Posts
                  designcouch Reply #18, 11 years, 2 months ago
                  what is in your img src property now?
                    Jesse Couch
                    MODX Aficionado, Front-End Designer & Developer
                    http://www.designcouch.com
                    • 38318
                    • 128 Posts
                    evegate94 Reply #19, 11 years, 2 months ago
                    I've now got 
                    [[!+galitem.image:notempty=`
<div class="image">
  <a href="[[+galitem.image]]"><img class="[[+galitem.imgCls]]" src="[[[+fileurl:phpthumbof=`w=940&h=466&zc=1`]]" alt="[[+galitem.name]]"/></a>
</div>
`]]
                      • 37984
                      • 215 Posts
                      designcouch Reply #20, 11 years, 2 months ago
                      You've got an extra bracket on the left of your [[+fileurl]] placeholder.

                      Just a tip - always look at your chunk AND at the rendered source. That will usually help you narrow down the problem quicker.
                        Jesse Couch
                        MODX Aficionado, Front-End Designer & Developer
                        http://www.designcouch.com