CODE

Device Image Processing

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

Aaron Macdonald's:
CODE Items Profile

v1.0.0

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

   {% comment %}<!-- Treehouse CODE v1.0.0 -->{% endcomment %}
   {% 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:

   {% comment %}<!-- Treehouse CODE v1.0.0 -->{% endcomment %}
   <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.