CODEWITHSUNDEEP
pythonimageplone
Frankline
Frankline

Reputation: 40995

Plone: Scaling images

I have the following code in my plone page template:

<img 
tal:define="folderimagetitle python:context.getField('folderimagetitle').getAccessor(context)()"
tal:condition="folderimagetitle" 
src="" 
alt="" 
tal:replace="structure python:context.getWrappedField('folderimage').tag(context, alt=folderimagetitle, css_class='photo')" 
/>

Basically I want to show the image next to a H1 tag. The image will work and display fine, but it will show the full image size not aligned with the text. I also don't want to just add a height and width attribute because this results in a image with a ragged edge that does not scale well.

How can I scale it down to one of the default sizes available in Plone i.e. listing, icon, tile, thumb, mini, preview, and large?

Upvotes: 1

Views: 1300

Answers (2)

Doug
Doug

Reputation: 35136

The accepted answer is pretty much perfect, but here's an extra hint for how it works:

The /@@images context is gettable on any object type, but the first param to scales.scale() is a field name that must be gettable using .getField(name) on that context.

So for example if you had a gallery view which exposed a list of images on view/images, you might use:

<li tal:repeat="image view/images">
<img tal:define="scales image/@@images;
                 img python: scales.scale('image', width=100, height=100);"
     tal:attributes="src img/url">
</li>

Note specifically that you can't just pass an image instance in as:

scales context/@@images; <--- Don't do this. You need the @@images for an Image
scales.scale(instance, width=10, height=10);

If for some reason you need to do this in a language other than TAL, the trick is to use restrictedTraverse() to get the '@@images' context, something like:

%if request.context.children.has(0, 'ATBlob'):
    <%
        # NB. The 'ATBlob' is the concrete Image instance
        image = request.context.children.nth(0, 'ATBlob')  
        scales = image.restrictedTraverse('@@images')
        scaled_image = scales.scale('image', width=100, height=100)
    %>
    ${scaled_image} 
%endif

Upvotes: 5

user2665694
user2665694

Reputation:

The "modern" way is using plone.app.imaging.

Example

<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" />

http://plone.org/products/plone.app.imaging/

Upvotes: 5

Related Questions