2

I was just checking out the AP insights case study: I came across the LiveView Editor screenshot. I see an inline Image Transform Crop field. What is the method to add this crop field ?

enter image description here

3

It's probably just a drop down that sets the crop position setting in the image transform parameter string.

See this: https://craftcms.com/docs/image-transforms#defining-transforms-in-your-templates

2
  • Hi Steve, thanks for the link! any thoughts on how best to create it? Does the following 'position' attribute accept multiple values for crop position? {% set thumb = { mode: 'crop', width: 100, height: 100, quality: 75, position: 'top-center' } %}
    – RDMD
    Dec 3 '15 at 18:13
  • 1
    You might need to adjust, but something like this {% set cropPosition = block.imageCropPositionField %} {% set imageParams = {mode: 'crop', width: 100, height: 100, quality: 75, position: cropPosition} %} {% set image = block.imageAsset.first() %} {% if image %} <img src="{{ image.url(imageParams) }}"> {% endif %} Dec 3 '15 at 19:38
1

The content builder is very nice. I implemented this code in my project:

{% for image in content.image %}
    {% set imageTransform = { 
        width: 1000, 
        height: 700, 
        mode: 'crop', 
        position: content.focalpoint 
    } %}
    <img src="{{ image.getUrl(imageTransform) }}" alt="{{ image.title }}">
{% endfor %}

Thanks to: http://craftcookbook.net/recipes/120

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.