Placeholder center image on scaling

Posted on 24/03/2011 15:29:31

Hi DW,

I am using the scaling of the product pictures as found in:

control panel > ecom > adv. > pictures.

But it says in the manual : "If the scaling parameters are larger than the original picture size, then the image will not be resized. An image placeholder will still be rendered displaying the excess pixels.".

But the small original picture is then placed in the top left corner of the placeholder. Is it possible to center this image to Hcenter/Vcenter? its not very graphical, and I know the designers will point this out.

http://manual.dynamicweb-cms.com/Dynamicweb-Online-manual/Management-Center/eCommerce-indstillinger/Billeder.aspx

thanks :-)

Replies

Nicolai Høeg Pedersen

Posted on 24/03/2011 15:47:06

What the feature does is creating a link to Getimage.aspx

This can also be done by hand, and you can then change offset so it will be centered instead.

You can configure GetImage.aspx by accessing it in your browser /Admin/Public/Getimage.aspx

Posted on 24/03/2011 16:02:18

Hi Nicolai,

that sounds great. how can I change the offset by changing the string? I am not familiar with the commands in the getimage.aspx string.

/Admin/Public/GetImage.aspx?Image=%2fminor_product.jpg&Width=236&Height=236 ?

Posted on 24/03/2011 16:04:39

I think I found the commands here:

http://engage.dynamicweb-cms.com/Show-Article-361.aspx?PID=2472&ArticleID=129

thanks I will give it a try :-)

Posted on 24/03/2011 16:06:55

As Nicolai suggested, request /Admin/Public/Getimage.aspx
in your browser. You then get a dialog where you can enter the CropOffset:. For example: http://devierkoeden.com/Admin/Public/Getimage.aspx

If you enter the image details / settings and click OK, you get a complete URL to the scaled image.

However, it seems that when the requested dimensions are larger, the image is not placed in the middle of the canvas.

Imar

Posted on 24/03/2011 16:24:17

hi Imar,

that is the exact problem, you can try this picture and the try to scale it to 260x260. It will be placed in the top left corner, and not in the center.

I have a client which have like 10.000 pictures which all are to small.

Posted on 24/03/2011 16:30:33

You may be able to hande it client side. E.g. render a transparant image of the requested size in an img tag and show your image as a centered background image using CSS. Although it's a background image, you'll still see it as the top image is transparant.

If all your images have the same dimensions, you could use pure CSS as well to position the image in a larger container.

Imar

Posted on 24/03/2011 16:38:04

You can center the image horizontally and vertically using CSS:

div.image-wrapper {
   width: 500px;
   height: 500px;
   line-height: 500px;
   text-align:center;
}

div.image-wrapper img {
vertical-align: middle;
}

Create a div with class="image-wrapper" around the img tag.

Make sure you specify a DOCTYPE to make this work.

Posted on 24/03/2011 16:38:35

yes.

I also think that I might do a script that checks for the size, and the change the link from getimage, to clean, if its to small though..

thanks for the input, I will work something out.

You must be logged in to post in the forum

Developer forum

Placeholder center image on scaling

Replies