Anyone out there able to help with pThumb / picturefill / fotorama

1,078 Posts

mmcgee Reply #1, 11 years, 11 months ago

Built a MIGx slider that works until I try to implement pThumb and picturefill for resizing the images for a responsive site.

Fooled around here and have it almost working except there are no images.

  <div data-img="">

I assume that their should be an image path in between the quotation marks.

"Oh where or where did my image file go? Oh where oh where could it be"

Are there issues when using pThumb in temporary url mode? [ed. note: mmcgee last edited this post 11 years, 11 months ago.]

1,078 Posts

mmcgee Reply #2, 11 years, 11 months ago

Perhaps I must use ul instead of div?
Fotorama structure uses div for each slide.
This is a puzzle indeed?

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 11 years, 11 months ago

I do believe that there are issues with phpthumb and temporary URLs.

Your getImageList tpl should have the structure that the slider expects.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

1,078 Posts

mmcgee Reply #4, 11 years, 11 months ago

Hi Susan:

Actually, last night, I removed and outer wrapper of code and got images to resize and load. Unfortunately all of them loaded. But they resized and everything. Thus pThumb and picutureFill are doing everything. It's just

So I have narrow it down to something I've done with the way I have this coded. More after coffee.

1,078 Posts

mmcgee Reply #5, 11 years, 11 months ago

Here is my code. If I remove the first wrapping div

<div data-img="[[

and the closing one

]]">

Everything loads fine and the images are resized and given the cache name. But the

<div data-img="[[

is the slide. I know this is something so simple. I'm close. Maybe more coffee will help.

 

<div data-img="[[
  <div data-picture data-alt="[[+alt:htmlentities]]">
  <div data-src="[[+image:pthumb=`w=640&h=360&zc=1`]]"></div>
  <div data-src="[[+image:pthumb=`w=640&h=360&zc=1`]]" data-media="(min-width: 400px)"></div>
  <div data-src="[[+image:pthumb=`w=800&h=450&zc=1`]]" data-media="(min-width: 800px)"></div>
  <div data-src="[[+image:pthumb=`w=1000&h=562&zc=1`]]" data-media="(min-width: 1000px)"></div>
  <div data-src="[[+image:pthumb=`w=1824&h=1025&zc=1`]]" data-media="(min-width: 1824px)"></div>

  <noscript>
  <img src="[[+image:pthumb=`w=400&h=225&zc=1`]]" alt="[[+alt:htmlentities]]">
  </noscript>
  </div>
]]">


  <div class="fotorama_box">
  <h2><a href="[[+billboard_headline-link-path]]">[[+billboard_headline]]</a></h2>
  <p><a href="[[+billboard_tagline-link-path]]">[[+billboard_tagline]] ></a></p>
  </div>

</div>

☆ A M B ☆
1,031 Posts

Jako Reply #6, 11 years, 11 months ago

I think the [[ and ]] are the cause of your issue. They are recognized as a snippet call and everything inside is removed because the Snippet is not found. Try to replace them by [ [ and ] ].

1,078 Posts

mmcgee Reply #7, 11 years, 11 months ago

Quote from: Jako at Oct 28, 2014, 09:49 AM

I think the [[ and ]] are the cause of your issue. They are recognized as a snippet call and everything inside is removed because the Snippet is not found. Try to replace them by [ [ and ] ].

Thanks Jako. Your're exactly correct! My code that I was bringing in did have a snippet to account for a scenario of if an image had and image link and if it didn't. Made a difference of which code to load. I don't have that with this scenario.

Close but still no banana, but at least the image paths are loading. Thank you for pointing that out!

<div class="fotorama"
  data-autoplay="true"
  data-width="100%"
  data-height="86%"
  data-fit="cover"
  data-keyboard="true"
  data-nav="false"
  data-click="false"
  data-transition="slide"
  data-clicktransition="crossfade">

  <div data-img="
  <div data-picture data-alt="Washington Park">
  <div data-src=".......76e3efd7.jpg"></div>
  <div data-src=".......76e3efd7.jpg" data-media="(min-width: 400px)"></div>
  <div data-src=".......cee524a.jpg" data-media="(min-width: 800px)"></div>
  <div data-src=".......2bead4.jpg" data-media="(min-width: 1000px)"></div>
  <div data-src=".......76e3bfc.jpg" data-media="(min-width: 1824px)"></div>

  <noscript>
  <img src="/assets/components/phpthumbof/cache/hp-washingtonpark.e934d4430cce14369893dfd7485c3379.jpg" alt="Washington Park">
  </noscript>
  </div>
">

  <div class="fotorama_box">
  <h2><a href="index.php?id=8">Washington Park</a></h2>
  <p><a href="index.php?id=8">Learn more about Washington Park ></a></p>
  </div>

</div>

[ed. note: mmcgee last edited this post 11 years, 10 months ago.]

1,078 Posts

mmcgee Reply #8, 11 years, 11 months ago

Of course. When I look at the source code I just posted, it looks to me like all of those variations of the image download. However, I "think" the pictureFill.js is actually only picking the one needed based on the screen size.

At any rate, first I need to continue reviewing my structure to see why the images and not appearing. I still have a missing item that is preventing the whole process from being completed.

Thanks Jako. Your tip has definitely helped.

1,078 Posts

mmcgee Reply #9, 11 years, 11 months ago

Jako tip definitely helped. I'll still mulling Susan's comment cause there's something there that's eluding me.

Basically I have this code

<div data-img="">

  <div data-picture data-alt="[[+alt:htmlentities]]>
    <div data-src="[[+image:pthumb=`w=640&h=360&zc=1`]]"></div>
    <div data-src="[[+image:pthumb=`w=640&h=360&zc=1`]]" data-media="(min-width: 400px)"></div>
    <div data-src="[[+image:pthumb=`w=800&h=450&zc=1`]]" data-media="(min-width: 800px)"></div>
    <div data-src="[[+image:pthumb=`w=1000&h=562&zc=1`]]" data-media="(min-width: 1000px)"></div>
    <div data-src="[[+image:pthumb=`w=1824&h=1025&zc=1`]]" data-media="(min-width: 1824px)"></div>

    <noscript>
    <img src="[[+image:pthumb=`w=400&h=225&zc=1`]]" alt="[[+alt:htmlentities]]">
    </noscript>
  </div>

  <div class="fotorama_box">
  <h2><a href="[[+billboard_headline-link-path]]">[[+billboard_headline]]</a></h2>
  <p><a href="[[+billboard_tagline-link-path]]">[[+billboard_tagline]] ></a></p>
  </div>

</div>

What I am trying to accomplish is to get the product of:

 <div data-picture data-alt="[[+alt:htmlentities]]>
    <div data-src="[[+image:pthumb=`w=640&h=360&zc=1`]]"></div>
    <div data-src="[[+image:pthumb=`w=640&h=360&zc=1`]]" data-media="(min-width: 400px)"></div>
    <div data-src="[[+image:pthumb=`w=800&h=450&zc=1`]]" data-media="(min-width: 800px)"></div>
    <div data-src="[[+image:pthumb=`w=1000&h=562&zc=1`]]" data-media="(min-width: 1000px)"></div>
    <div data-src="[[+image:pthumb=`w=1824&h=1025&zc=1`]]" data-media="(min-width: 1824px)"></div>

    <noscript>
    <img src="[[+image:pthumb=`w=400&h=225&zc=1`]]" alt="[[+alt:htmlentities]]">
    </noscript>
  </div>

to be inserted between the quotes in

<div data-img="">

Perhaps this is impossible, or I am approaching it with the wrong tools or methods. When set up with one image path between the quotes, that image is static and doesn't change. What I am attempting to accomplish is to allow pthumb and pictureFill to supply various sizes of the image based on the device screen size.

Basically, one master image is loaded into the MIGx form. pthumb and pictureFill handle the rest. I have confirmed that indeed that pthumb pictureFill is working simply by removing the outer div data-img... but then fotorama doesn't function. Images are simply stacked vertically on the page.

I had started with a different version of pictureFill that uses span instead of div. Maybe I need to switch back to that version as I have not tried it since Jako mentioned removing the brackets.

1,078 Posts

mmcgee Reply #10, 11 years, 11 months ago

Just ran across a post where someone was combining picturefill with Royal slider with great success. http://help.dimsemenov.com/discussions/suggestions/15407-royalslider-and-picturefill-v2-adaptive-retina-images