CODEWITHSUNDEEP
plonearchetypes
Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83338

Cropping images instead of scaling with Plone and Archetypes

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?

Upvotes: 1

Views: 337

Answers (4)

petschki
petschki

Reputation: 111

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.

Upvotes: 2

ggozad
ggozad

Reputation: 13105

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

Upvotes: 0

Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83338

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>

Upvotes: 0

toutpt
toutpt

Reputation: 5220

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

Upvotes: 0

Related Questions