How Does One Implement a Responsive Image Solution

I have been hovering over this issue for quite some time now and frankly have spent too much time in the huddle. I've been reading up on pThumb which has been recommended by some others on the forum, but I am unable to ascertain how it might fit in as part of a responsive image solution. I have some MIGx sliders set up, and then some basic images here and there. Most of the images though are big, full screen width.

I've seen reference to picture fill, but don't understand if it works on it's own resizing images or whether I need to use pThumb to generate the various sizes, and then picture fill uses the media queries to determine which image to deliver.

I'd like to only have to upload one image through the manager, and not rely on outside sites for processing and delivering the images. I looked into Adaptive-Images, but messing with my htaccess makes me very nervous & suspicious.

At this point, rather than getting better at swimming, I feel like I'm just floating out into deeper water. Does anyone have any tips, or tutorials they can point me too?

I think I understand that if I use pThumb and since I'm working in foundation, I can follow my image TV with :pthumb=`w=960` and get a 960 px wide image generated. I'm stuck though as how to get the proper size image to load based on a media query. Foundation 5 has a feature called interchange works by choosing from several already pre-sized variations of an image. I connect pThumb to the interchange method, then isn't pThumb just generating all of the sizes, when only one is needed?

This is my tpl list item code below. I haven't tried this just yet. Still need to uninstall phpThumbsUp and then install pThumb.

Hi! Check this article, maybe helps:

http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/

Goes from server side solutions, js solutions and cloud solutions. Fine one that fit your needs.

Cheers.

Sebastian.

Quote from: mmcgee at Mar 18, 2014, 06:10 AM

I have been hovering over this issue for quite some time now and frankly have spent too much time in the huddle. I've been reading up on pThumb which has been recommended by some others on the forum, but I am unable to ascertain how it might fit in as part of a responsive image solution. I have some MIGx sliders set up, and then some basic images here and there. Most of the images though are big, full screen width.

I've seen reference to picture fill, but don't understand if it works on it's own resizing images or whether I need to use pThumb to generate the various sizes, and then picture fill uses the media queries to determine which image to deliver.

I'd like to only have to upload one image through the manager, and not rely on outside sites for processing and delivering the images. I looked into Adaptive-Images, but messing with my htaccess makes me very nervous & suspicious.

At this point, rather than getting better at swimming, I feel like I'm just floating out into deeper water. Does anyone have any tips, or tutorials they can point me too?

Hi over here too Sebastian. Thanks for responding. I put feedback/questions on the other post.

At this point, it sounds like I just need to jump in. I don't really know jQuery, and have a very very limited understanding of PHP. I tend to be a very visual person which allows me to adapted quickly in many instances, but also to get in way over my head in others. I looked forever for how to's with pThumb only to resolve that I just do everything like phpThumbOf.