裁剪图像,而不是使用Plone和原型进行缩放

裁剪图像,而不是使用Plone和原型进行缩放,plone,archetypes,Plone,Archetypes,我们希望裁剪图像而不是缩放(Archetypes ImageField),这样左上角(或任何角)将自动以给定的比例显示 在Plone中,我有哪些选项/插件可以实现这一点?我不知道有什么插件可以实现这一点;因此,我将回答:您必须开发它。在服务器端裁剪图像,然后维护图像的blob副本太痛苦了 相反,只需使用Archetypes验证器设置文件上载限制,以使文件保持合理的小: 然后使用CSS裁剪图像 左上裁剪的相关css: .product-listing .info-box .main-image-

我们希望裁剪图像而不是缩放(Archetypes ImageField),这样左上角(或任何角)将自动以给定的比例显示


在Plone中,我有哪些选项/插件可以实现这一点?

我不知道有什么插件可以实现这一点;因此,我将回答:您必须开发它。

在服务器端裁剪图像,然后维护图像的blob副本太痛苦了

相反,只需使用Archetypes验证器设置文件上载限制,以使文件保持合理的小:

然后使用CSS裁剪图像

左上裁剪的相关css:

.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;
}
相关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>

不久前,作为p.a.imaging的一个分支,我开始为一个客户做这件事。它从未被集成,但希望您可以按原样使用它:


您可能对新插件感兴趣。它基于ggozad的plone.app.imaging分支,并根据plone FTW决策(见plip)进行了分解。目前还没有发布版本,但这将在不久的将来发生变化。

只需动态裁剪,原始图像将保持不变。这将剪辑它以适合比例,允许您编辑一幅atimage。感谢发布您的答案!请务必仔细阅读本手册。另外请注意,每次链接到自己的网站/产品时,都需要发布免责声明。安德鲁,请冷静。答案是非常有用的,我看不出它是如何自我提升的。