Still struggling with this pThumb fotorama thing. Have attempted to use interchange instead of pictureFill. I am getting the pThumb to create the various size images. Fotorama seems to hold the space for the image on the webpage, but does not display the image. I wonder if there is a js conflict.
I have an image tv named "image" to handle the image input from the MIGx form. If the image TV output is set to default, I get all the code on the page and space made for the image, but no image displays on screen. Results in a foundation js error which I don't understand.
TypeError: undefined is not an object (evaluating 'el[0].nodeName')
replace (foundation.interchange.js, line 47)
resize (foundation.interchange.js, line 125)
(anonymous function) (foundation.interchange.js, line 103)
(anonymous function) (foundation.min.js, line 438)
If I set output for the image TV to be default, the images display, but they are the original file, not the optimize pThumb size. Plus, I have to click the next and previous arrows multiple times to get the slide to change. I can go forward and backward, so I know some limited functionality is present.
My Chunk call is:
<img data-interchange="[ [[+image:pthumb=`w=640&h=360&zc=1`]], (default)], [ [[+image:pthumb=`w=640&h=360&zc=1`]], (small)], [ [[+image:pthumb=`w=1024&h=576&zc=1`]], (medium)], [ [[+image:pthumb=`w=2000&h=1125&zc=1`]], (large)]">
<noscript><img src="[[+image]]"></noscript>
The source code output is:
<img data-interchange="[ /assets/components/phpthumbof/cache/image01.72bcd8a05505496b0c882de70a697e36.jpg, (default)],....and so on.
I do notice in the source code there is a space between the left bracket and the forward slash. Maybe that's the problem. If I remove that space from the chunk, no image cache paths are inserted into the source code.
I believe when interchange is working, the final rendered result is actually <img src=".... path to image to be displayed. My setup does not seem to be able to get far enough along to complete the task.
Knowns:
I know data-interchange and pThumb works on this site with a single image. Have tested and all renders out as expected. I can insert the chunk code into another chunk used for a single image display and then change +image to the path to the original image file to be used.