MURA: getImageURL small size cuts off the image

Question

The small size creates an image too large to fit in the box. Is there a way by which the image can be wrapped completely?

I am doing

 <div class="catimgback">
    <img src="#arguments.item.getImageURL(size='arguments.size',width=arguments.width,height=arguments.height)#" alt="#htmlEditFormat(arguments.item.getValue('title'))#" class="catimg" />
</div>

Where arguments.width = 163px; arguments.height=163px; and arguments.size = small If i make catimgback's style=height:100% then all goes well. Also, I played with keeping the size to be custom and giving custom width and height but could not get the images to work. all the small size images gets cut off.

Answer 1

I think you may be confused as to how getImageURL() works. The only time you need to pass in the height or width arguments, is if you pass in size='custom' or omit the size attribute altogether.

Also, when you use size='custom', the image gets cropped automatically based on the dimensions of the image that's been uploaded. So, in your case, you want a square image ... but what if the image that's been uploaded is not exactly square, maybe it's a rectangle. So, in that case, Mura starts at the very center of the image, then scales out from there to the outer most boundaries. If the image were a vertical rectangle, you can imagine then that the top and bottom parts of the rectangle won't make the cut. Conversely, if the image were a horizontal rectangle, then the left and right edges of the image won't make it into the cut.

What you really want in this case is a pre-defined image size called catimg with a height and width attribute of 163px. To create this:

1. Go to Site Config > Edit Site from the Admin area
2. Click the Images tab
3. Towards the bottom, click Add Custom Image Size
4. Enter a Name (for example, catimg)
5. Enter the Height
6. Enter the Width
7. Click Save (You now have a custom image size that can be used for any content items)
8. Go to the Site Manager, and add/edit a content item
9. If editing an existing content item that already has an image, click the crop marks to get to the Image Details screen. Otherwise, select an image to upload, and Publish.
10. From the Image Details screen, scroll down to the custom image size you've created, and you can now Re-Crop your image to select your desired image region.

Now, anytime you call getImageURL(size='catimg'), Mura will use this specific image to display.

Cheers!