CODE

Device Image Processing

Liquid snippet to process images (resize, compress, etc...) by 'Device Type' using Liquid and Treepl's ImageProcessor.

v1.0.0

  1. Capture the image processing configuration you want to use per device type.

    <!-- Treehouse CODE v1.0.0 -->
{% if request.device_type == 'Mobile' %}
    {% capture imageProcess %}?width=400&height=300&mode=crop{% endcapture %}
{% elsif request.device_type == 'Tablet' %}
    {% capture imageProcess %}?width=600&height=400&mode=crop{% endcapture %}
{% else %}
    {% capture imageProcess %}?width=800&height=600&mode=crop{% endcapture %}
{% endif %}

  2. Then apply {{imageProcess}} to your image path:

    <!-- Treehouse CODE v1.0.0 -->
<img src="/test-image-001{{imageProcess}}" alt="Test Image">
    or
<div style="background-image: url('/test-image-001{{imageProcess}}')"></div>

Comments or questions? Head over to the Treepl CMS forum to discuss with the community.