# Ionic "List of Images" using class="list" instead of ion-list **URL:** \ **Category:** uncategorized\ **Created:** [July 28, 2014, 4:42pm UTC](https://forum.ionicframework.com/t/ionic-list-of-images-using-class-list-instead-of-ion-list/7444 "2014-07-28T16:42:40Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![ascended](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ascended/32/108140_2.png) [@ascended](https://forum.ionicframework.com/u/ascended)\ **Post date:** [July 28, 2014, 4:42pm UTC](https://forum.ionicframework.com/t/ionic-list-of-images-using-class-list-instead-of-ion-list/7444/1 "2014-07-28T16:42:41Z")
Hello, Using Ionic user’s @maximilian list of images example (found here [http://codepen.io/mhoernis/pen/fiInm](http://codepen.io/mhoernis/pen/fiInm) ) I was able to create a simple list of images that looks and fits nicely in my app. Then there’s this post by @matias [Ionic List Syntax](http://forum.ionicframework.com/t/ionic-list-syntax/3210) that seems to address the functionality loss between using the list class instead of ion-list. I want my image list to retain some features from ion-list (ex: darkens on touch, swipe to show buttons, delete, ect.) So my question is: Is it possible to create @maximilian’s list using ion-list and not the list class to retain ionic functionality? If not, what’s the best ionic component I should be using? I’m using the Ionic app ChefsSteps as inspiration, and they seemed to do an awesome job with their menu on the app. [https://itunes.apple.com/us/app/chefsteps/id816731096?mt=8](https://itunes.apple.com/us/app/chefsteps/id816731096?mt=8) Thanks! ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [July 28, 2014, 6:40pm UTC](https://forum.ionicframework.com/t/ionic-list-of-images-using-class-list-instead-of-ion-list/7444/2 "2014-07-28T18:40:49Z")
Soo what exactly are you asking? Is it possible to make a list with background images using `ion-list` and `ion-item`? ---
**Author:** ![ascended](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ascended/32/108140_2.png) [@ascended](https://forum.ionicframework.com/u/ascended)\ **Post date:** [July 28, 2014, 7:02pm UTC](https://forum.ionicframework.com/t/ionic-list-of-images-using-class-list-instead-of-ion-list/7444/3 "2014-07-28T19:02:46Z")
Yeah, essentially I want to create a dynamic list of items each with their own specific background image. The example above works, but most functionality is lost. Is using a list the right way to go, or should I try a different method or component for creating a list of images? Thanks! ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [July 28, 2014, 8:05pm UTC](https://forum.ionicframework.com/t/ionic-list-of-images-using-class-list-instead-of-ion-list/7444/4 "2014-07-28T20:05:53Z")
You can definitely use a list for this. As far as adding a dynamic background image, take a look at this post. > **[Ion List Item Background image?](http://forum.ionicframework.com/t/ion-list-item-background-image/5741/2)** > > You could make a directive for this. .directive('backImg', function(){ return function(scope, element, attrs){ var url = attrs.backImg; var content = element.find('a'); content.css({ 'background-image':... ---
**Author:** ![ascended](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ascended/32/108140_2.png) [@ascended](https://forum.ionicframework.com/u/ascended)\ **Post date:** [July 30, 2014, 9:14pm UTC](https://forum.ionicframework.com/t/ionic-list-of-images-using-class-list-instead-of-ion-list/7444/5 "2014-07-30T21:14:04Z")
Thanks for the info. But for some reason, I just can’t quite seem to get this directive to work…I think I need to read up a bit more about how directives work. When I add it to my project, which currently has a left, right, and tab menu structure, the app doesn’t form up right. It end up only showing the right menu. ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [July 31, 2014, 1:40am UTC](https://forum.ionicframework.com/t/ionic-list-of-images-using-class-list-instead-of-ion-list/7444/6 "2014-07-31T01:40:42Z")
Hmm, want to put together a codepen or plunker? I can take a look at it. ---
**Author:** ![ascended](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ascended/32/108140_2.png) [@ascended](https://forum.ionicframework.com/u/ascended)\ **Post date:** [September 4, 2014, 1:40am UTC](https://forum.ionicframework.com/t/ionic-list-of-images-using-class-list-instead-of-ion-list/7444/7 "2014-09-04T01:40:34Z")
Hello! I’m back. 🙂 So I did some more reading up on AngularJS programming and found out I was doing a few things wrong. A combination of coding errors and assumptions was crashing my app. I was able to get that example running and it works like a charm. I have only one gripe. When the user presses down on a list item, the background image fails to turn grey on touch/tap. Is there some CSS trickery that have to apply here in order for the background image of a single list item to change when activated? Thanks for all your help! I’m loving the framework! ---
**Author:** ![swaroop](https://avatars.discourse-cdn.com/v4/letter/s/85e7bf/32.png) [@swaroop](https://forum.ionicframework.com/u/swaroop)\ **Post date:** [October 30, 2014, 11:12pm UTC](https://forum.ionicframework.com/t/ionic-list-of-images-using-class-list-instead-of-ion-list/7444/8 "2014-10-30T23:12:15Z")
Hi, I am trying to achieve the same and somehow not able to get it work. Would you be willing to share your code? Thanks. ---
**Author:** ![ascended](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ascended/32/108140_2.png) [@ascended](https://forum.ionicframework.com/u/ascended)\ **Post date:** [November 3, 2014, 6:55pm UTC](https://forum.ionicframework.com/t/ionic-list-of-images-using-class-list-instead-of-ion-list/7444/9 "2014-11-03T18:55:36Z")
I’m still not able to get it to work like I want…It’s hacky. Using CSS I’m just changing the background image of the button to the another image that looks exactly the same as the previous, except a little darker… While I’m getting up to speed on AngularJS just fine, Web Development is something brand new to me, and I run into a lot of weird issues. I want my front menu to look and behave much like [Sworkit](http://ionicframework.com/blog/built-with-ionic-sworkit/) and [Chefsteps](https://itunes.apple.com/us/app/chefsteps/id816731096?mt=8) which are both Ionic based, but I can’t seem to get the same effect…I think I just need to look into it more. I just don’t find the current “default” lists very malleable at this point. Maybe @mhartington can shed some light on how the Sworkit and Chefsteps menus are created? 😉 ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [November 3, 2014, 7:12pm UTC](https://forum.ionicframework.com/t/ionic-list-of-images-using-class-list-instead-of-ion-list/7444/10 "2014-11-03T19:12:06Z")
Finally have a solution to this 😄 > **[List: 1.0.0-beta.6](https://codepen.io/mhartington/pen/oIAuK)** > > An Ionic list directive Forked from \[Ionic\](/ionic)'s Pen \[List: 1.0.0-beta.6\](/ionic/pen/JsHjf/).... ---
**Author:** ![ascended](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ascended/32/108140_2.png) [@ascended](https://forum.ionicframework.com/u/ascended)\ **Post date:** [November 3, 2014, 7:42pm UTC](https://forum.ionicframework.com/t/ionic-list-of-images-using-class-list-instead-of-ion-list/7444/11 "2014-11-03T19:42:48Z")
Works great! Thanks for sharing @mhartington! ---
**Author:** ![ascended](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ascended/32/108140_2.png) [@ascended](https://forum.ionicframework.com/u/ascended)\ **Post date:** [November 3, 2014, 11:06pm UTC](https://forum.ionicframework.com/t/ionic-list-of-images-using-class-list-instead-of-ion-list/7444/12 "2014-11-03T23:06:16Z")
I feel like I’ve made a lot of progress here…Might have to change a few things about this app I’m writing now that I got this… Small question, but how can I get this example so that the change in opacity doesn’t affect the contents of the item? i.e. - During the item press, how can I keep the text fully white? Is that even possible? ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [November 4, 2014, 2:32am UTC](https://forum.ionicframework.com/t/ionic-list-of-images-using-class-list-instead-of-ion-list/7444/13 "2014-11-04T02:32:54Z")
Yeah, just add a z-index of -1 I’ve updated the codepen to show this ---
**Author:** ![ascended](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ascended/32/108140_2.png) [@ascended](https://forum.ionicframework.com/u/ascended)\ **Post date:** [November 4, 2014, 2:58am UTC](https://forum.ionicframework.com/t/ionic-list-of-images-using-class-list-instead-of-ion-list/7444/14 "2014-11-04T02:58:07Z")
You’re the man! Thanks for all your help. ---
**Author:** ![umeshionic1234](https://avatars.discourse-cdn.com/v4/letter/u/c37758/32.png) [@umeshionic1234](https://forum.ionicframework.com/u/umeshionic1234)\ **Post date:** [February 22, 2018, 5:33am UTC](https://forum.ionicframework.com/t/ionic-list-of-images-using-class-list-instead-of-ion-list/7444/15 "2018-02-22T05:33:23Z")
![Screenshot_2018-02-22-08-58-59_1](https://global.discourse-cdn.com/ionicframework/original/3X/d/2/d21d3af43275692a75c1a28c8d7f06d072655441.jpg) hello all am making one project in ionic in which task is taking picture through camera or choose image from list of images (in horizontal scroll bar list ) and send it to server …so here am facing one problem is how can i show on page that choose image from list…solution to choose image from list please thanks in advance …you can see my above link for excepted output