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

Answered Can pThumb be integrated with the Zurb Foundation Interchange plugin in an image slider managed by MIGx?

    • 19872
    • 1,078 Posts
    mmcgee Reply #1, 6 years, 4 months ago
    MODx 2.6.0
    MIGx + pThumb + Zurb Foundation Interchange Plug-in

    I have an image slider and wish to have several sizes of image files created for delivery to a responsive web page.

    pThumb is works great, but integrating it with the Interchange plugin is proving to be tricky. My code thus far seems to render only the last image file.

    This is my .tpl

    <li>
<img data-interchange="[[[+image:pthumb=`w=720&h=288&zc=1`]], small], [[[+image:pthumb=`w=1600&h=640&zc=1`]], medium], [[[+image:pthumb=`w=2000&h=800&zc=1`]], large]" alt="[[+description:htmlentities]]" title="[[+description:htmlentities]]">
</li>


    This is the resulting html source code that gets output:
    <li>
<img data-interchange=", small], , medium], [/assets/components/phpthumbof/cache/roost-nowOpen-lrg.319cef30b1918f7719e868b41ade7db5.jpg, large]" alt="The Roost" title="The Roost">
</li>


    In this scenario, the large image does load, but on smaller devices or screen sizes the medium or small version obviously does not load.

    Has anyone else used pThumb and Foundation Interchange together succesffuly?

    This question has been answered by Bruno17. See the first response.

    • discuss.answer
      • 4172
      • 5,888 Posts
      Bruno17 Reply #2, 6 years, 4 months ago
      I think, the MODX-parser gets confused by this: [[[+image
      try this:

      <img data-interchange="[ [[+image:pthumb=`w=720&h=288&zc=1`]], small], [ [[+image:pthumb=`w=1600&h=640&zc=1`]], medium], [ [[+image:pthumb=`w=2000&h=800&zc=1`]], large]" alt="[[+description:htmlentities]]" title="[[+description:htmlentities]]">
        -------------------------------

        you can buy me a beer, if you like MIGX

        http://webcmsolutions.de/migx.html

        Thanks!
        • 19872
        • 1,078 Posts
        mmcgee Reply #3, 6 years, 4 months ago

        Quote from: Bruno17 at Dec 14, 2017, 09:22 PM
        I think, the MODX-parser gets confused by this: [[[+image
        try this:

        <img data-interchange="[ [[+image:pthumb=`w=720&h=288&zc=1`]], small], [ [[+image:pthumb=`w=1600&h=640&zc=1`]], medium], [ [[+image:pthumb=`w=2000&h=800&zc=1`]], large]" alt="[[+description:htmlentities]]" title="[[+description:htmlentities]]">

        Thank you for responding. I was just thinking that Bruno probably knows the answer. This worked. I had tried adding the space after the first bracket early on without any luck, but upon reviewing my html, discovered that I had a typo elsewhere in the code.

        Everything works now. Thank you!