Image Scaling

上傳大尺寸圖檔到 Plone 之後，它會主動建立 400x400 或 200x200 不同尺寸的縮圖備份，開發者可以視需求呼叫原圖或是想要的縮圖。

從 /@@imaging-controlpanel 可以查看或設定尺寸對應

large 768:768
preview 400:400
mini 200:200
thumb 128:128
tile 64:64
icon 32:32
listing 16:16

plone.app.imaging

底層程式邏輯由 plone.app.imaging/configure.zcml @@images 處理

plone.app.imaging/scaling.py scale() tag()

plone/app/contenttypes/behaviors/leadimage.pt 檢查是否上傳圖檔: python: getattr(context.aq_explicit, 'image', False) and OO or XX

預設的尺寸名稱包括 large, preview, mini, thumb 在 Plone5 對應的尺寸值有調整。

上傳的圖檔會預期採 BitMap 格式，這樣才能建立縮圖，但 SVG 圖檔需要額外功能才支援。

PIL Scales from an animated GIF portal_properties/imaging_properties/allowed_sizes getAllowedSizes and getQuality

假設圖檔欄位名稱是 myfield，利用 {context/absolute_url}/@@images/myfield 可以讀取原圖。

其他尺寸的圖檔，可用 thumb 之類的尺寸名稱來讀取，下列的範例程式碼，第一次被呼叫時，圖檔會以快取形式儲存。

<img tal:replace="structure context/@@images/shortnameofmyfield/thumb" />

<img tal:define="scale photo_obj/@@images"
     tal:replace="structure python: scale.scale('image', width=1200, height=300, direction='keep').tag()" />

scale View 提供 getInfo() 可以查詢 UID 搭配 MIME Type 資訊可處理圖檔，並內建 Retina Image 支援。

沒有檢查 Empty Field 的話，會造成 NoneType 錯誤。搭配 condition 的方式：

<img src="" alt=""  
 tal:condition="context/image|nothing"
 tal:define="scales context/@@images;
             scale python:scales.scale('image', 'mini')"
 tal:replace="structure python:scale and scale.tag(css_class='myImage') or None" />

Image scales and __bobo_traverse__ vs plone.app.imaging's ImageTraverser

在項目列表顯示圖檔 Image Mode Optimization: Convert palette-based with a gray palette to Grayscale + Alpha Images

依據頁面或目錄來自訂圖檔 collective.contextimage

新版的圖檔存取機制是透過 plone.app.imaging 協助

<img
 tal:define="scales context/@@images;
             thumbnail python: scales.scale('image', width=64, height=64);"
 tal:condition="thumbnail"
 tal:attributes="src thumbnail/url;
                 width thumbnail/width;
                 height thumbnail/height" />

@@image: collective.upload collective.nitf collective.plonefinder

從 scale 取得原始圖檔

batch listing image

QuickUpload Viewlet

PIL 的 Image 模組名稱會和 Zope 的 Image 模組混淆。

plone.namedfile

不確定 1.x 和 2.x 版本是否有不相容 404 問題修正

自製表單 image 欄位使用 plone.app.imaging 設定值

imaging_properties 從 plone.app.imaging 移到 Products.CMFPlone 取消 plone.app.imaging 以避免 Archetypes 相依關係

imagetag

Custom Thumbnail

eea.depiction (valentine.imagescales) only tested on Archetypes

Error

Cache: when you keep outdated scales around, there is a danger that they mask newer scales: plone.scale

KeyError: plone.app.contenttypes/browser/templates/newsitem.pt

    <metal:block define-macro="content-core"
          tal:define="templateId template/getId;
                      scale_func context/@@images;
                      scaled_image python: context.image and scale_func.scale('image', scale='mini')">

workaround is to change 'mini' to 'thumb'

AttributeError: five.pt - plone.app.imaging is waiting for a list while chameleon uses a tuple instead as an speed optimization.

plone.app.imagecropping: $$ is not defined JS error when using Chameleon P4 vs P5