Resize image in Article template

29 Posts

magzzs Reply #1, 10 years, 5 months ago

Hi

I am used to Wordpress so I am new to Modx but I am stuck with the resizing of images on the website.

I have successfully resize image on this page: http://ftc.followthecamino.modxcloud.com/blog/

But i am having issue with the blog page: http://ftc.followthecamino.modxcloud.com/blog/2015/11/27/charity-testimonials-camino-portuguese-september-2015-oia-to-santiago-de-compostela-by-console/.

I would like a banner but zc=1 with the restriction height of 350px and the width if possible 100%

This is my template file

<h1>[[*pagetitle]] <small class="metadata">posted: [[*publishedon]]</small></h1>

[[pthumb? &input=`[[*image]]` &options=`h=350&w=150&zc=2` &s3output=`6`]]<br />
[[*content]]<br /><br />
</article>

Would appreciate if anyone can help

Thanks

Mags

48 Posts

patrickappelman Reply #2, 10 years, 5 months ago

It looks like your code has the property &zc=2. Try changing that to &zc=1.

zc = zoom-crop. Will auto-crop off the larger dimension so that the image will fill the smaller dimension (requires both "w" and "h", overrides "iar", "far") Set to "1" or "C" to zoom-crop towards the center, or set to "T", "B", "L", "R", "TL", "TR", "BL", "BR" to gravitate towards top/left/bottom/right directions (requies ImageMagick for values other than "C" or "1")

From phpthumb readme.

Also pthumb is going to generate an image for you. It doesn't know how wide your template is so 100% will not work. You will need to measure your template and specify the px width. The link you sent shows your column is about 685px wide. Maybe try this:

[[pthumb? &input=`[[*image]]` &options=`h=350&w=685&zc=1` &s3output=`6`]]

[ed. note: patrickappelman last edited this post 10 years, 5 months ago.]

29 Posts

magzzs Reply #3, 10 years, 5 months ago

Hi Patrick,

Thank you for your reply, It didnt work for my template for some reason but i end up adding the container and size. it is not ideal but it works.

<article id="article[[*id]]" class="article">
<h1>[[*pagetitle]] <small class="metadata">posted: [[*publishedon]]</small></h1>
<div id="artcontainer1" class="artcontainer">
[[*image]]</div>

#artcontainer1{
width: 100%;
max-height: 250px;
}

.artcontainer{
	position: relative;
	overflow: hidden;
	width: 100%; /* default pan container width */
	height: 250px; /* default pan container height */
margin-bottom: 20px;
}

.artcontainer img{
	
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

Thanks

Mags

97 Posts

sspind Reply #4, 10 years, 5 months ago

Try this:

 <img src="[[*image:phpthumbof=`w=350&h=150&zc=1`]]">

You have to set the output of the image TV to "text", then it should work.