resize image and display attributes

180 Posts

troubadour Reply #1, 10 years, 1 month ago

hi all !

i have a little question.
is it possible to use phpthumbof or pthumb to resize an image and also have the attributes of this image automatically written ?

for example :

<img src="[[+tv.image:pthumb=`&w=263`]]" alt="xxx"  width="263" />

thanks !

353 Posts

pepebe Reply #2, 10 years, 1 month ago

Quote from: troubadour at Mar 07, 2014, 10:53 AM

hi all !

i have a little question.
is it possible to use phpthumbof or pthumb to resize an image and also have the attributes of this image automatically written ?

for example :
<img src="[[+tv.image:pthumb=`&w=263`]]" alt="xxx" width="263">
thanks !

As far as I know you can't do that with phphumb*, but you could easily calculate image dimensions with a tiny custom snippet.

I wrote this one about two years ago, but I can't remember if it actually worked.

https://gist.github.com/pepebe/2466887

Try it anyway. If you encounter problems, I'll help you to fix them.

Regards,

pepebe [ed. note: pepebe last edited this post 10 years, 1 month ago.]

Homepage: pepebe.de | MODX snippets (and other stuff) at github: https://gist.github.com/pepebe

180 Posts

troubadour Reply #3, 10 years, 1 month ago

hi thanks i will have a try now !

☆ A M B ☆
191 Posts

jgrant Reply #4, 10 years, 1 month ago

I'm going to add this feature in the next version of pThumb, likely later this month.

I'm still thinking on the best way to implement it, probably create a placeholder for each generated image on a page: [[+pt.X]] where X starts at 1 and increments for each subsequent image on the page. This works fine for handcoding as well as—in many cases—getResources/pdoResources templates where you can use the [[+idx]] placeholder to get the proper number. That's easy enough to do in most cases, but not ideal for everything.

<img src="[[*image:pthumb=`w=263`]]" [[+pt.1]] alt="xxx">

or in a getResources tpl:

<img src="[[+tv.image:pthumb=`w=263`]]" [[+pt.[[+idx]]]] alt="xxx">

which will become

<img src="/image-cache/something.eff892b0.jpg" width="263" height="200" alt="xxx">

Another idea is to have variant of the pthumb snippet which returns src, width and height all at once:

<img [[*image:pthumbDims=`w=263`]] alt="xxx">

Now that I think about it, this might be the better way to go...

Extras :: pThumb • Resizer • imageSlim • setPlaceholders

353 Posts

pepebe Reply #5, 10 years, 1 month ago

@jgrant: As far as I understand each call to pThumb would set new values for [[+pThumb.height]] and [[+pThumb.width]]. Why would it be necessary to add numbers to the placeholders?

I would even go so far as optionally returning the value of pThumb in a special placeholder [[+xxx.image]]. This would allow to do all the image processing outside the actual img tag.

[[pthumb?
   &input=`[[*imageTV]]`
   &options=`height=500&width=400`
   &toPlaceholder=`small.`
]]
[[pthumb?
   &input=`[[*imageTV]]`
   &options=`height=1000&width=800`
   &toPlaceholder=`big.`
]]

[[+small.image:notempty=`
<img 
   src="[[+small.image]]" height="[[+small.height]]" width="[[+small.height]]" 
   data-big-src="[[+big.image]]" data-big-width="[[+big.image]]" data-big-height="[[+big.image]]"
   alt="" 
/>
`]]

Just my 5 cents.

pepebe [ed. note: pepebe last edited this post 10 years, 1 month ago.]

Homepage: pepebe.de | MODX snippets (and other stuff) at github: https://gist.github.com/pepebe

☆ A M B ☆
191 Posts

jgrant Reply #6, 10 years, 1 month ago

That's a good suggestion. I added a &toPlaceholder property in 2.3.1 which works mostly like you describe. It offers two ways of outputting image dimensions. In certain cases one way will be more convenient than the other.

Via placeholders

[[pthumb? &input=`[[*imagetv]]` &options=`w=200` &toPlaceholder=`thumb`]]

<img src="[[+thumb]]" width="[[+thumb.width]]" height="[[+thumb.height]]">

Directly
Adding dims=1 to the options string returns src, width and height all together

<img [[*imagetv:pthumb=`w=200&dims=1`]]>

becomes:

<img src="/image-cache/test.d39f9375.jpg" width="200" height="300">

Extras :: pThumb • Resizer • imageSlim • setPlaceholders

180 Posts

troubadour Reply #7, 9 years, 9 months ago

Hi !
i thank you very much for the update!
i just tried to add the dims parameter, but this causes me error 500 on my server... without dims everything works.

do you have any idea why ?

thanks!

60 Posts

DasItsch Reply #8, 9 years, 9 months ago

How about templating pThumbs output with a chunk?

pThumb call:

[[pThumb?
&src=`[[*imgTV]]`
&tpl=`imgTag`
&options=`w=200`
&attribs=`alt="[[*imgTValt]]"||class="myClass anotherClass"||id="myId"||foobar="baz"`
]]

$src = required, path to original image

&options = required, normal pThumb options

&tpl = optional, a minimal template should be shipped with pThumb (<img src="[[+processedImg]]" width="[[+processedImg.width]]" height="[[+processedImg.height]]" alt="" />)

&attribs = optional, pThumb will set a placeholder for each given attribute

Chunk imgTag:

<img src="[[+processedImg]]" width="[[+processedImg.width]]" height="[[+processedImg.height]]" alt="[[+alt]]" class="[[+class]]" id="[[+id]]" foobar="[[+foobar]]" />

Output:

<img src="path/to/myProcessedImg.jpg" width="200" height="100" alt="myimg alt text" class="myClass anotherClass" id="myId" foobar="baz"/>

[ed. note: DasItsch last edited this post 9 years, 9 months ago.]

☆ A M B ☆
79 Posts

hartus Reply #9, 9 years, 7 months ago

Hello,

i've tried to ouput this in a chunk :

[[pthumb? &input=`[[+image]]` &options=`w=320` &toPlaceholder=`thumb`]]
 [[+thumb.height]]

It displays only once if I refresh the page, it does not appear anymore. [ed. note: hartus last edited this post 9 years, 7 months ago.]