Answered phpThumbsUp not working after update to 2.2.11-pl

Hi Sebastian: I am reading that article now in fact. Trying to decide between HIRSC and PictureFill. Ysanmiguel uses PictureFill. I just don't fully understand how to use pThumb in conjunction. I'm using Foundation 5. Perhaps their interchange is an option? But interchange seems to be set up for images that are already sized and stored, and the media query just determines which to grab and load.

So with pThumb do I just mark up all of the various sizes I want based on the media queries? So I have my list item for MIGx and a couple of options for the image TV (I have two because there is an option with a caption and one without. So for the various image sources, instead of them being _sm.jpg, med.jpg, etc, they would be :pthumb=`480`, :pthumb=`780` , :pthumb=`1224` or whatever I need them to be. and each would have a specific media query attached to them? Am I on the write track?

Thank you for responding so quickly Sebastian. I really appreciate the feedback.

I think you are in the right track...

I don´t use foundation, so i can´t help in this point.

If your responsive image solution is based in image versions ( maybe small, medium, large ) i think you can create the thumbs of each image:

For example: [[*imageField:pthumb=`&w=300`]] [[*imageField:pthumb=`&w=500`]] [[*imageField:pthumb=`&w=800&h=400&zc=1`]] **if cropping needed***

If you use pthumb cached each image will create only once and then stored, improves load speed.

Example: http://sebastianzahn.com/clientes/Bogar/example-for-mmcgee.html

I recommend you this website for testing speed: http://tools.pingdom.com/fpt/

By now i´m looking for a good image solution as you are, when i decide which one i will tell you



Quote from: mmcgee at Mar 18, 2014, 12:03 PM

Hi Sebastian: I am reading that article now in fact. Trying to decide between HIRSC and PictureFill. Ysanmiguel uses PictureFill. I just don't fully understand how to use pThumb in conjunction. I'm using Foundation 5. Perhaps their interchange is an option? But interchange seems to be set up for images that are already sized and stored, and the media query just determines which to grab and load.

So with pThumb do I just mark up all of the various sizes I want based on the media queries? So I have my list item for MIGx and a couple of options for the image TV (I have two because there is an option with a caption and one without. So for the various image sources, instead of them being _sm.jpg, med.jpg, etc, they would be :pthumb=`480`, :pthumb=`780` , :pthumb=`1224` or whatever I need them to be. and each would have a specific media query attached to them? Am I on the write track?

<li>
  [[+image-link-path:isnot=``:then=`
  <a href="[[~[[+image-link-path]]]]"><img src="[[+image]]" alt="[[+alt:htmlentities]]"></a>
  `:else=`
  <img src="[[+image]]" alt="[[+alt:htmlentities]]">
  `]]
  [[+description:!empty=`<div class="orbit-caption">[[+description]]</div>`]]
</li>

The cropping ability might be helpful. That's one of the things I've been reading about in that while an image looks great big, in a small setting it might not translate as well. At this point though, I'm just trying to get to a solution for delivering the best image size. With your and Ysanmiguels help, I think I'm on my way. Thanks for the link to kingdom. That will be very helpful.

Thank you for your feedback. Much appreciated.

:)

Quote from: mmcgee at Mar 18, 2014, 12:57 PM

The cropping ability might be helpful. That's one of the things I've been reading about in that while an image looks great big, in a small setting it might not translate as well. At this point though, I'm just trying to get to a solution for delivering the best image size. With your and Ysanmiguels help, I think I'm on my way. Thanks for the link to kingdom. That will be very helpful.

Thank you for your feedback. Much appreciated.

Hi Sebastian:

Thanks for posting the link to the sample page for me. Your overall layout is exactly what I am trying to build.

I almost have the pthumb and picturefill working. Wound up having to insert a height in order to get the images to display. I see in your code that it's structure a bit different than mine, so I'm planning to go back in and try some revision.

Essentially, my images load as long as I have w h and zc called out. Seems very slow on iPhone though, but that could be something with Foundation. I will try than link you sent for testing. I have in the past has instance in Foundation when I've structured some nested tables incorrectly and it's caused a big delay in loading on mobile, and I think I have an idea of what's causing the issue.