Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Make A Gallery-Like Image Grid Using Ionic Framework

TwitterFacebookRedditLinkedInHacker News

I recently started making an application with Ionic Framework that made heavy use of images both remotely and locally. During this time, my goal was to present the images in a grid that looks good for all device sizes and orientations.

One might think this would be an easy task because Ionic offers both grids and a responsive class, however, trivial was far from the case. Instead I had to go to my programming roots and create some display logic when looping through my arrays of images. The following guide will show exactly what I had to do.

My goal was to create an image grid that looked like the following:

Ionic Image Grid

It wasn’t so simple though. To demonstrate what I’m talking about, let’s go through the process of creating a fresh Ionic Android and iOS project:

ionic start IonicApp blank
cd IonicApp
ionic platform add android
ionic platform add ios

Remember, if you’re not using a Mac, you cannot add and build for the iOS platform.

At this point we don’t need any additional libraries or plugins. We will be using pure CSS and JavaScript.

To start, we’re going to go through a pretty vanilla scenario where we use the CSS resources provided from the Ionic Framework documentation. Open your project’s www/js/app.js file and make it look something like this:

var ionicApp = angular.module('starter', ['ionic']);

ionicApp.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
});

ionicApp.controller("ExampleController", function($scope) {

    $scope.images = [];

    $scope.loadImages = function() {
        for(var i = 0; i < 100; i++) {
            $scope.images.push({id: i, src: "http://placehold.it/50x50"});
        }
    }

});

The above JavaScript code will be used in each of our two scenarios. It is very basic in the sense that we are loading 100 generic images into an array that we’ll eventually loop through.

Now in your www/index.html file let’s check out the responsive class for grids:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Ionic Blank Starter</h1>
            </ion-header-bar>
            <ion-content ng-controller="ExampleController" ng-init="loadImages()">
                <div class="row responsive-md">
                    <div class="col col-25" ng-repeat="image in images">
                        <img ng-src="{{image.src}}" width="100%" />
                    </div>
                </div>
            </ion-content>
        </ion-pane>
    </body>
</html>

Based on the above code, one would hope that only four columns appear on the screen and the rest would float below because we set each column to 25%. This is not the case. Instead four images appear on the screen when the screen is large and only when the screen becomes small do the images stack. However, when the images stack it becomes one image per row rather than the four images per row that we had hoped for.

This is where we are going to jump in with some beautiful AngularJS code.

Back in your www/index.html code, edit the <ion-content> tags to contain the following:

<ion-content ng-controller="ExampleController" ng-init="loadImages()">
    <div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
        <div class="col col-25" ng-if="$index < images.length">
            <img ng-src="{{images[$index].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 1 < images.length">
            <img ng-src="{{images[$index + 1].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 2 < images.length">
            <img ng-src="{{images[$index + 2].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 3 < images.length">
            <img ng-src="{{images[$index + 3].src}}" width="100%" />
        </div>
    </div>
</ion-content>

Notice in the above code we are doing the following:

  1. When we are on every forth image, we are going to show the row class, thus creating a new row
  2. We pre-allocate four columns for our row, but we first check to see if it will ever be filled to prevent an undefined exception
  3. If the image exists at the specified index, then add it to the column

Just like that we have many rows with four images per row.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Support This Site