Display Smaller Images on Mobile

One big aspect of having your site be mobile friendly is to not display huge images when someone is using their phone. Currently, in Ghost, there is no media management and no way to do this easily. While this will come in the future, we have seen some people who want this now.

We do have a solution for this right now that will work, but it is pretty 'hackie' and requires a little bit of extra work when creating a post, but for those of you who want this feature, it is totally do-able.

This example is going to be pretty basic, but will show you how you could load different images. It may be a good idea for you to customize it for yourself by changing the media width, file names, or even adding classes to images to only affect those ones that you want smaller, but this should give you a good overview of what you can do.

  1. Create 2 images, one large for desktop and one small. Name the small image the same as the large with -small at the end. (Ex. orange-tree.jpg and orange-tree-small.jpg)

  2. Upload BOTH when creating your post. Like this (My large image is 770kb, and my small image is 15kb):

    small images upload

  3. Now that both images have been uploaded, remove the small images so you don't have duplicate images on your post.

  4. Remove all of the handlebars images syntax, and put in html img syntax with the source of the image used as the data-img attribute with no source. Like this:

     <img data-img="/content/images/2015/03/orange-tree.jpg">

    img data-img text

  5. Now we are actually going to need to edit our theme. What we are going to do, is add some javascript that checks the media width of the screen and then decides if it should change which image to show or not. So, open up your post.hbs file.

  6. In your post.hbs file (or index.hbs if you want this on the home page rather than the post page (or defualt.hbs if you want this on every page on your site)), add the following at the end of the file after </main>:

     //Grab the width of the screen
     var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
     //if the width is less than 550px, append '-small' to the end of the source
     if (width < 550) {
    		var images = document.getElementsByTagName("img");
    		for(var i = 0; i < images.length; i++) {
        		var imageSource = images[i].getAttribute('data-img');
        		imageSource = imageSource.slice(0, -4);
         		imageSource = imageSource + "-small.jpg";
         		images[i].src = imageSource;
     } else {
     	//if the width is greater than 550px, then just transfer the data-img as it is to the source
     	var images = document.getElementsByTagName("img");
     	for(var i = 0; i < images.length; i++) {
         	var imageSource = images[i].getAttribute('data-img');
        	 images[i].src = imageSource;
  7. This script will grab all of your data-img attribute and either append "-small" to it or not depending on if the screen is wider than 550px and place that into the src of the image and load the images.

Like we said above, this is not exactly a normal way to do things and is basically as hackie as you can get, but, we have seen people asking for it, and it is 'do-able'. It just takes some extra effort on your part.

If you have a better way or see a way we can improve this article, definitely let us know! We would love to know if any of you are doing anything else or if our javascript could be improved.