phpthumbsup - how to get an image displayed?

Hey there!

I'm trying to get phpthumbsup running in a MODx Revo 2.3.3. install.

So far I managed to setup an auto-create-routine so that every file that gets uploaded to a specific folder several thumbnails get created in the /core/components/phpthumbsup/cache-folder...(though they seem to be gotten deleted somehow...did an upload a few hours ago and checked the folder...the files have been there...then i checked for the correct folder now for writing this post, the folder was empty and the images were gone...uploaded an image again, now the different thumbs are back again in this folder...strange).

But my main problem is to get any of the images displayed in the front end.

I'm using MIGx with the Flexslider.js, what works well so far.

I'm getting the images for the slider like this:



The chunk is looking like that:



So I changed my chunk this way:



like it's mentioned in the "tutorial" (http://www.darkstardesign.com/resources/phpthumbsup/)

The html-output for the image look like expected regarding the tutorial:



But all I get is a broken-image icon..which is quite "normal", because in real this folder "/phpthumbsup/w/980/h/316/src/images/slider/" doesn't exist. I thought phpthumbsup would use this kind or url-structure for it's settings and gets the correct path, which actually is "images/slider/slider1.png".

Any help on that available, as I'm fighting with this issue for some days now already?

Cheers in advance!

I think there is a System Setting for clearing the phpthumbsup Cache when the site cache is cleared. Have you checked that?
What happens if you create the phpthumbsup folder by yourself and attach writing permissions to it?
I guess you have installed MODX in a subfolder called "modx", right? Do you have < base href="[[++site_url]]" / > in your template? Is a media source attached to that *image TV?

Hi antzone!

And sorry for my late reply, worked on several other projects so this got out of mind for a while.

After your mention about the cache-slear system-setting I disabled this setting and the images "stay" in the cache folder.

Now i'm working on another project that needs the responsive-function as well, so i tried it again from scratch by using the mentioned tutorial. And I'm running into the same problem. Snippet and slider are working with [[+image]], but not with the addition like this:



Inbetween I installed the Notify404-Package, eah time I'm trying to run the site by using the above chunk-code I get several mails:



The wanted image is not in the folder "/img/slider-responsive/fotolia_123456.jpg", it's in folder "/core/components/phpthumbsup/cache/fotolia_123456.jpg", but with some additional characters and numbers like this: fotolia_123456.6b07dab0c514f33497db4922f2d0ba70.jpg. So I guess it must be a path issue in the system setting? Gonna have a look at that.

The < base href="[[++site_url]]" / > is set yes. But I don't get your last question, what do you mean by "media source attached to that *imageTV"?

additional info:

I just realized that I'm getting my images by using a CHUNK, in the tutorial always "snippet" is mentioned.

The example snippet code is like this with the "star"-key (*):



and i have to use the "plus"-key (+):



otherwise - by using the * - im getting no ouput.

I re-read the tutorial again, so by getting this html-output:



everything is like it's meant to be. This is how I'm understanding the tutorial:

phpThumbsUp uses a specific url format to know when it needs to generate a thumb and which filters to apply. The base URL (you can customize this in system settings) is the beginning of the url that identifies it as a phpThumbsUp thumbnail. This is followed by the filters and the source image. For example...

/phpthumbsup/w/100/h/100/src/path/to/image.jpg
...generates a 100x100px thumbnail of the image at path/to/image.jpg (relative to your site root). The /src/ indicates the end of the filters, and everything immediately following the /src/ is the path to the source image. See the examples section at the bottom of the page for more.

The above html-output's leading "/phpthumbsup" tells the script that there is a thumbnail to be coming...with a width of 1000px and height of 500px...and the scr is at "/img/slider-responsive/". Looks okay to me...

The only thing I'm not getting by the tutorial is this:

KEY
phpthumbsup.base_url
DESCRIPTION
The base URL for all images generated by phpThumbsUp. This should never be the same as an alias for one of your resources.
EXAMPLE
thumbs/

This means to me that the "thumbs/" has to be replaced with my folder which holds the slider-images. That would be "img/slider-responsive" in my example.

But what I'm getting in html-output is this:



So there is no leading "phpthumbsup" and the "img/slider-responsive"-path twice.

When I'm trying this as the phpthumbsup.base_url:

{base_url}phpthumbsup/img/slider-responsive/

I'm getting this html-output:



which seems wrong as well because of the "/img/slider-responsive" being stated twice again (there should only be the second one...

So my "phpthumbsup.base_url" is set to:

{base_url}phpthumbsup, which gives the correct html-output related to the tutorial and mentioned already above:



I have no clue anymore, looks like I have to use something different...sadly.

damn, that was hard to figure out! but a simple little thing, that made it work:

You must have at least PHP 5.3 installed! Simple as that...

Somewhere in the world wide web i stumbled upon a post that said you must have PHP 5.3 at least; didn't realize that before, although it's stated on the tutorial-site. My big fault!

My customers-provider strato has a setting for php-version, which was set to 5.3. So I switched up to 5.6 and checked the php-info. This said 5.2.17?! So additionally I had to add this to my htaccess-file:



So now I'm running PHP 5.6.8 and the images are showing up, woohoo!

Because I installed the Notify404-Package I got many many mails, related to the phpthumbs-own-source-path to the images (remember - /phpthumbsup/w/1000/h/500/src/img/slider-responsive/fotolia_123456.jpg).

I'm wondering what about Google-Bot and others, they will "see" a lot of 404-errors now?

###### not directly related to phpthumbsup ######
I added some code to the Notify404-snippet to get rid of any mails with a requested-variable containing "phpthumbsup". So no more mails regarding this "problem" are coming in...other 404-errors still get mailed though.
###### not directly related to phpthumbsup END ######

And now I ran into some other questions...I'm doing remote-debugging in Chrome with my Tablet, that has a viewport-resolution of 600 x 792 px (I guess) in Chrome in Portait Orientation. I did an inspect via the Chrome developer tools to see how big the now finally responsive images are.

Checked one image on the tablet in 600 x 792 px resolution:
41.9 kb @ 511 x 341 px (Natural 500 x 334 px) ### EDIT: my fault, uploaded image is 500 x 334 px ###

checked the same image on my desktop PC in 1200 x 800 px resolution:
41.9 kb @ 1000 x 668 px (Natural 500 x 334 px) ### EDIT: my fault, uploaded image is 500 x 334 px ###

same size as on the tablet? So it doesn't seem any different images got loaded?

Same image on Tablet Landscape Orientation: 962 x 732 px resolution:
image size 51.9 kb at 660 x 441 px (Natural 500 x 334px) ### EDIT: my fault, uploaded image is 500 x 334 px ###

So there is something happening, but what?! The thresholds in the phpthumbsup-system-setting are set to 270,480,600,768,992,1200. I expected different images getting loaded off the phpthumsup-cache folder?

I checked also that the responsive.js is in my html-output and the path is correct.

Tried it by this call:



HTML-Output:



as well as by this call:



HTML-Output:



The html-output varies by the added width and height values. And the size increases to 89.5 kb on the tablet and to 98.5 kb on the Desktop-PC by using the first call?!


EDIT:

Also checked it by remote-debugging and chrome-inspect on my smartphone (Samsung Galaxy SIII):

Portrait Orientation: 360 x 567 px
image 33.3 kb @ 310 x 207 px (natural: 480 x 320 px)

Landscape Orientation: 640 x 287 px
image 51.9 kb @ 550 x 367 px (natural: 480 x 320 px)

So finally I guess (but I'm not really sure ) it's working...thresholds set to 270,480,600,768,992,1200

Tests on antoher image:
smartphone portrait 360 x 567 px - 480px-width related image in 480 x 319 px - scaled to 310 x 206 px
smartphone landscape 640 x 287 px - 768px-width related image in 768 x 511 px - scaled to 550 x 336 px
tablet portrait 600 x 792 px - 768px-width related image in 768 x 511 px - scaled to 511 x 340 px
tablet landscape 962 x 287 px - 992px-width related image in 992 x 660 px - scaled to 660 x 439 px
desktop landscape 1200 x 768 px (emulated) - should be 1200px-width related image in 1000 x 667 px - scaled to 1000 x 667 px

looks correct...sorry for all the "spam" on here...needed to write it down and by asking questions in mind I came to several other conclusions and ways to check this all...hope it might help someone.