Cropping images instead of scaling with Plone and Archetypes

Question

We'd like to crop images instead of scaling (Archetypes ImageField), so that the top left corner (or any corner) would be automatically displayed in given proportions.

What options / add-ons I have for this in Plone?

Answer 1

Cropping images on the server-side and then maintaining blob copies of the images is too much pain.

Instead, just set the file upload limit with Archetypes validators to keep files reasonable small:

http://collective-docs.readthedocs.org/en/latest/content/archetypes/files.html#setting-max-file-size-to-filefield-and-imagefield

Then crop images using CSS.

Related css for top left crop:

.product-listing .info-box .main-image-wrapper {
    display: block;
    background: white;
    border: 1px solid #eee;
    width: 280;
    height: 205px;
    padding: 10px;

    margin-bottom: 30px;
    box-shadow: 0 0 3px #aaa, 0 5px 3px #aaa;

    transition: background 0.5s, box-shadow 0.5s;
    -moz-transition: background 0.5s, box-shadow 0.5s; /* Firefox 4 */
    -webkit-transition: background 0.5s, box-shadow 0.5s; /* Safari and Chrome */
    -o-transition: background 0.5s, box-shadow 0.5s; /* Opera */
}

.product-listing .info-box .main-image-container {
    display: block;
    width: 280px;
    height: 205px;
    background: transparent no-repeat top left;
}

.product-listing .info-box .main-image-wrapper:hover {
    background: #eee;
    box-shadow: 0 0 3px #aaa, 0 6px 5px #666;
}

Related TAL:

<a class="main-image-wrapper" tal:attributes="href python:view.getTargetLink(context)" tal:condition="python:getattr(product.aq_base, 'image', None) != None">
    <div class="main-image-container"
         tal:attributes="style string:background-image:url(${context/absolute_url}/@@images/image)"
         class="main-image">

         <!-- -->

    </div>

</a>

Answer 2

You might be interested in the new addon plone.app.imagecropping. It is based on ggozad's branch of plone.app.imaging and was factored out due to plone FTW decision (see plip #10174). Right now there is no release available but this will change in the near future.

Answer 3

I don't know any addons to achieve this; so I will answer: You have to develop it.

Answer 4

I had started doing this for a client a while ago as a branch on p.a.imaging. It never got integrated, but hopefully you can use it almost as is:

https://github.com/plone/plone.app.imaging/tree/ggozad-cropping