Ionic "List of Images" using class="list" instead of ion-list


Using Ionic user’s @maximilian list of images example (found here ) 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 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.


Soo what exactly are you asking? Is it possible to make a list with background images using ion-list and ion-item?

1 Like

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?


You can definitely use a list for this. As far as adding a dynamic background image, take a look at this post.


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.

Hmm, want to put together a codepen or plunker? I can take a look at it.

1 Like

Hello! I’m back. :slight_smile: 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!

I am trying to achieve the same and somehow not able to get it work.
Would you be willing to share your code?


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 and Chefsteps 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? :wink:

Finally have a solution to this :smile:

1 Like

Works great! Thanks for sharing @mhartington!

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?

Yeah, just add a z-index of -1

I’ve updated the codepen to show this

1 Like

You’re the man! Thanks for all your help.

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