Image resize and optimization¶
Go Mobile for Plone provides facilities to automatically optimize images for mobile screens. This includes shrinking chosen images, modifying HTML content to handle floating images better and caching the resulting optimized images.
Since mobile screen come in various sizes and shapes, this is necessary for optimal page viewing experience.
Automatic resizing is based on browser :doc:'user agent detection </user-manual/sniffing>'_.
This is applied to page body text containing images.
- All images are defloat
- Images are centered
- The image is resized to browser screen width
- 10 px padding is added around image borders, so that scrollbar etc. user interface elements won't overlap the image
By default, all page body text is run through the resizer
- All <img> tags are rewritten so that images go through mobile resizer, this is done by gomobiletheme.basic document_view template overriding the default Plone template for pages
- Also external image sources with full http:// address are supported in <img> tags. In this case, Python urllib is used to retrieve the external image to your own server.
You can also explicitly use resizer on specific site elements, like logo, in your theme code. For more information, see Transformations in Developer Manual.
File system based cache is used for resized images. The following cache keys are used
- image width
- image height
meaning that the same result image should not be generated twice.
Image cache folder is defined by image_resize_cache_path setting. It is full path to the folder. Plone user must have write and read access to that path.
Currently cache must be cleaned manually using a cron job if it grows too much. There is no cache garbage collection.
You can clear the cache if you know your image_resizer_secret in settings. Navigate to URL:
This triggers gomobile.mobile.imageprocessor.ClearCacheView code.