Collection-repeate grid with scaled square images to fill width

ionic-v1
1

I’m trying to create a simple collection-repeat grid using square images. I want four of them to fill the width of the device and scale the height using the same aspect ratio. The example in the docs will skew the image height. I’ve tried many things but nothing seems to scale the photos properly.

<img collection-repeat="photo in photos"
            item-width="25%"
            item-height="25%" <!-- This is the line I need to sort out -->
            ng-src="{{photo.src}}"
            width="100%">

Raboy’s example (https://blog.nraboy.com/2015/03/make-a-gallery-like-image-grid-using-ionic-framework/) works pretty well but the width of the photos are constrained by the columns so they do not extend to the edges in an Instagram-like grid. Also, this does not seem to work with collection-repeat. This is what I used when trying his example:

<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>
2

add the images as background-image and it should work… instagram only allow squared images…
use css attribute background-size with contain or cover.
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

3

Thanks @bengtler! you set me on the right track.

I still had some issues with scaling the height properly until I found an interesting CSS trick using padding-top. By setting the padding-top to the image’s aspect ratio (100% for a square) everything seemed to fall into place.

Here’s what I ended up with. I put the style in-line to make it easier to see what I did:

<div collection-repeat="image in images" style="padding:0px;" class="col col-25"> 
            <div style="background-image:url({{image.src}});
                        background-repeat:no-repeat;
                        background-size:contain; 
                        width:100%;
                        height:0;
                        padding-top:100%"> 
            </div>
      </div>
1 Like
4

So I was looking to do exactly the same thing you are talking about. I am going to show a grid of images always with 4 columns but the number of rows will vary depending on the size of the screen. The images show scale to fill the screen.

I used the code above and it actually works perfectly and displays exactly what I want, adjusts to different screen sizes etc except that collection repeat spews exceptions into the log about not being able to calculate height.

I have this displayed within a tab, I have added a link to make each div clickable which also works perfectly. I have added the item-width to collection repeat as we know it will be 25% as we have col col-25.

My problem is that even though everything works collection-repeat is still spewing errors to the console about not being able to get the height.

Is there any way to say figure out what 25% width is in pixels and set that as the height? All my images are square so the height of each will always be 25% of the screen width in pixels.

here is my code for reference:

<ion-tab title="New" icon-on="ion-ios-mic" icon-off="ion-ios-mic-outline" on-select="getNewAlbums()">
  <ion-content class="toppadding">
      <ion-refresher pulling-text="Pull to refresh" on-refresh="doRefresh()">
    </ion-refresher>

  <div collection-repeat="album in albumList" item-width="25%" style="padding:0px;" class="col col-25">
  <a ng-href="#/app/home/{{album.id}}">
    <div style="background-image:url({{getCoverArt(album.id)}});
      background-repeat:no-repeat;
      background-size:contain; 
      width:100%;
      height:0;
      padding-top:100%">
    </div>
  </a>
</div>
5

Alright got it sorted.

I put a little bit of cope in my controller with this:

$scope.widthinPX = Math.floor($window.innerWidth / 4);
console.log($scope.widthinPX);

Change 4 for whatever number of columns you want to have on the screen and it will set widthinPX to the width of each item in pixels on whatever size screen you are using.

you then just use item-height=“widthinPX” in your collection repeat and it stops complaining :slight_smile:

Note: this assumes you are using square images, if you are trying to maintain a different aspect ratio you will need to adjust it accordingly.

6

@playgraph - How do you handle when people change the orientation of the device? my solution for calculating the height based on the screen width works fine with a fixed orientation but for example with an ipad if the user rotates it then the images are all the wrong height and overlap each other a bit.

If I refresh somehow then all is good again (easy in a browser, not so much in an app). Is it possible to “watch” the screen width and then update the scoped variable that is being used for height? would collection repeat behave or would the view have to be refreshed to make collection-repeat run again with the new height?

Just when you think you’ve got it someone goes and turns their ipad sideways…

7

@ghenry22 got any solution for different screens?
please let me know