Responsive Image Solution: Interchange meets phpThumbsOf

Desperate for a workable solution for responsive image deployment I'm wondering it I could integrate phpThumbOf and Interchange with my current MIGx and Orbit setup. Bruno17 and Menno had provided some excellent support for getting my initial Orbit / MIGx to function.

Now... I need big images to get to big screens and small and medium to be deployed as needed.

Interchange seems to work by having access to multiple sizes of a particular image. phpThumbsOf sounds like just the ticket for creating the various sizes.

My current .tpl for the list item that MIGx inserts images into is:



If phpThumbOf works on "[[+image]]", then I should be able to create several size variations that will meet my general goals of iPhone, iPad, medium size desktop, and big desktop displays.

Maybe might code to call up the various sizes would be like so:



I could be naive but am willing to give it a try. Would be interested in knowing what others are doing for being able to have an easy to use backend for users to input photos into a slider.

None of this addresses your core question, but I would highly recommend pThumb in place of phpThumbOf as it performs better, has fixed some bugs, and uses the same syntax. It's a drop in replacement so you don't have to change your syntax.

Would also recommend reading this blog post that addresses performance issues when using element modifiers for conditional code.

Wow! Excellent and informative blog post. Thanks for sharing. I will be up bright and early with a fresh brain to review pThumb.

I understand what the blog post is getting at. Don't run the resize function and create multiple sizes of photos if you only need one image. Certainly, not at the moment that the image is needing to be deployed.

Interchange I believe is working under that premise, but is also probably assuming a jpeg already exists. Makes me wonder if hangups or conflicts might occur by my trying to interject a function on [[+image]]. For interchange though I just need to be able to provide it with [[+thisImage]] or [[+thatImage]] or even [[+anotherImage]], but I need this to be set up such that my client can upload and image, and have it automatically propagated out to +this, +that and +another.

Perhaps this responsive image puzzle can be solved with pThumb alone, which would be great.

Proceeding the reading on pThumb now.

OK. So I read the notes over at GitHub. pThumbs seems very promising.

I'm not seeing how you actually apply it to an image. I only see reference to what the "after" path would look like. I'll keep looking but wonder if to applying it to an image just requires :pthumb

In my scenario [[+image:pThumb]]

I'll try it there and apply a specific size for a starter. Then attempt to see if it will family with Interchange. I can let pThumb size the image, and let Interchange determine which size to display.

dont forget pThumb works *exactly* the same as phpThumbOf, same syntax for outputting images.

It might be worth also looking at phpThumbsUp - as that works with responsive images based on criteria set in the settings.

For now, I was unable to get phpThumbsUp to work and currently seeking alternative solutions.

Supposedly phpThumbsUp it did work in 2.2.10, but not for me. Perhaps I am missing a cache folder? I don't see one in my directory. Where would the cache folder be if there was supposed to be one. The "View Details" gave me the impression that one would be created. What permissions should it have— 755, 777, ?

phpThumbsUp generated a path in the page source code, but no image appears.
here's a path that gets generated after modifying my list item in my .tpl from [[+image]] to [[+image:phpthumbsup]]



is /phpthumbsup/ a directory? I don't have that directory in the root of my site.

Because I have MIGx, Orbit, and multiple TVs and Chunks, I don't know if it's my code or the add-on. Where do I start? My setup works without phpThumbsUp, but not with. In my simple brain that suggests to me that all is OK up until the add-on.

I'm a novice, and the more details the better with some of the add-ons. I understand and admire that many on the forum are extremely skilled at various coding formats, and their feedback, patience, and tenacious desire to jump in and lend a hand is immensely appreciated.

You need to set the core path, in the settings and create the directory in the location you want it and set the permsissions.

for example my settings are:

base URL:

{base_url}phpthumbsup/

Responsive threshold:

480, 768, 1024

Cache path:

{core_path}components/phpthumbsup/cache/

Core Path:

{core_path}components/phpthumbsup/

The CMS has write permissions to the cache. I created and set these myself

my tpl has the image called as

Hmmm? Did I must have overlooked that tidbit in the View Detials section for the Add-On.

Silly question:
Does core path, mean core > components/phpthumbsup/cache ?
I also have another components directory at assets/components

Core is for the actual files needed to run the program - this shouldnt change.

Your cache path could be assets/images/cache if you wanted to for example, but i was already in the folder in SSH so just created my cache there.