1

スケーリング (Archetypes ImageField) の代わりに画像をトリミングして、左上隅 (または任意の隅) が指定された比率で自動的に表示されるようにします。

Plone にはどのようなオプションやアドオンがありますか?

4

4 に答える 4

2

新しいアドオンplone.app.imagecroppingに興味があるかもしれません。これは plone.app.imaging の ggozad のブランチに基づいており、plone FTW の決定により除外されました (plip #10174を参照)。現在、利用可能なリリースはありませんが、これは近い将来変更される予定です。

于 2012-11-02T23:12:10.247 に答える
0

これを達成するためのアドオンは知りません。だから私は答えます：あなたはそれを開発しなければなりません。

于 2012-06-28T12:49:16.697 に答える
0

私は、paimaging のブランチとして、少し前にクライアントのためにこれを始めました。統合されることはありませんが、ほぼそのまま使用できることを願っています。

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

于 2012-07-08T11:02:14.157 に答える
0

サーバー側で画像をトリミングしてから、画像の BLOB コピーを維持するのは面倒です。

代わりに、Archetypes バリデーターでファイルのアップロード制限を設定して、ファイルを適度に小さく保ちます。

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

次に、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;
}

関連するタル:

<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>
于 2012-07-06T05:50:52.310 に答える