Skip to content. | Skip to navigation

Personal tools


You are here: Home / Tips / Image Scaling

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

底層程式邏輯由 @@images 處理 scale() tag()

plone/app/contenttypes/behaviors/ 檢查是否上傳圖檔: 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: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's ImageTraverser

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

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

新版的圖檔存取機制是透過 協助

 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 模組混淆


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

自製表單 image 欄位使用 設定值

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


Custom Thumbnail

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


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


    <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: - is waiting for a list while chameleon uses a tuple instead as an speed optimization. $$ is not defined JS error when using Chameleon P4 vs P5