Connect with us

Published on: 31 Jul 2014

If you follow responsive web design at all you will have noticed the topic of responsive images.

Just a few articles about the responsive images topic

All this talking and discussing about responsive images did privide some nice solutions already, but most of them are pretty complicated to implement and require changes on the server side or Javascript skills.

Some responsive images solutions:

The MODX responsive images solution: phpThumbsUp

phpThumbsUp

As usually MODX provides a easy solution for the responsive images topic. This using phpThumbsUp from the amazing people of Dark Star Design.

Dark Star Design

You can use phpThumbsUp to create thumbnails images for galleries, automatically size user-uploaded images for mobile devices, or automatically add complex image filters to photos.

How it works

With phpThumbsUp you simply activate the responsive feature and select your image breakpoints, from that moment on any image that is uploaded to the MODX manager will have various sizes automatically created. The phpThumbsUp extra will then will check the client's screen size and automatically adjust the width/height of the image based on thresholds defined in the setting.

Using phpThumbsUp

Using the extra is very easy.

  1. simply download and install the phpThumbsUp package via the package installer
  2. Go to 'System' > 'Settings' > filter to 'phpThumbsUp'
  3. Select 'Yes' for 'Responsive Enabled'
  4. Add your pixel breakpoints under 'Responsive Threshold'
phpThumbsUp settings

Add your phpThumbsUp image tags

Almost done, now just add this tag to any image that you want to be responsive.

For image Template Variables:
		
		[[*image:phpthumbsup]]
		
		
As a snippet:
		
		[[phpthumbsup? &input=`assets/images/photo.jpg`]]
		
		

What it does now

Any image that is uploaded to the MODX manager will now have various version of it is automatically created. The phpThumbsUp then detects the screen size of the device being used when requesting a thumb and delivers smaller images for devices with smaller screen sizes.

You can use phpThumbsUp to create thumbnails images for galleries, automatically size user-uploaded images for mobile devices, or automatically add complex image filters to photos. If you want you can check out all the options here.

Thanks to Dark Star Design

As a responsive web design specialist I absolutely love phpThumbsUp. It solves one of the bigges problems with modern web design: delivering the correct image to devices with any screen size.

I am using phpThumbsUp in my Flexibility 4 template for MODX and it provides a amazing feature!


Feel free to contact us to find out if we can help you improve your website.

Lets chat free of charge