# Is there a way to remove image container if there is no image or allow sorting on multiple inline lists?

**URL:** <https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517>\
**Category:** Ask for Help\
**Created:** [April 8, 2022, 12:01pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517 "2022-04-08T12:01:28Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![aosipovdev](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aosipovdev/32/41148_2.png) [@aosipovdev](https://community.glideapps.com/u/aosipovdev)\
**Post date:** [April 8, 2022, 12:01pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/1 "2022-04-08T12:01:28Z")

</div>

Dear Community!

Looking for an advice as I’m completely stuck.

I’m doing a news feed using the following flow. Tab - Details (News Posts) - Inline List (News Posts) - Cards. Some news posts are videos, some of them are with an image, some are text only. Leaving them in 1 inline list is an ugly approach as there are gray elements instead of images that are taking important place. And swap them with a dummy image or with an thumbnail or with an random image will not work as it can do a bad joke with news or just affect UE.

I was trying to build several different customized inline lists for text\_only/video/no\_image and filtering them accordingly. But in this case there is no way to present news posts in chronological order, because card-items will be sorted out inside each list and displayed based on list order.

Another possible solution is to have one inline list with cards and remove image-container if there is no img tag inside it but i dont know how to achieve that. Below code will remove all images from all cards…

.card-image-container {  
display: none;  
}

Any body come across same headake? Please please help help!!!

---

<div class="post-metadata">

**Author:** ![V88](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/v88/32/90054_2.png) [@V88](https://community.glideapps.com/u/V88)\
**Post date:** [April 8, 2022, 1:24pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/2 "2022-04-08T13:24:44Z")

</div>

> [@aosipovdev](#):
>
> And swap them with a dummy image or with an thumbnail or with an random image will not work as it can do a bad joke with news or just affect UE.

I would always use a generic image for this, but not too sure what you mean by “do a bad joke”.

---

<div class="post-metadata">

**Author:** ![aosipovdev](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aosipovdev/32/41148_2.png) [@aosipovdev](https://community.glideapps.com/u/aosipovdev)\
**Post date:** [April 8, 2022, 1:36pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/3 "2022-04-08T13:36:04Z")

</div>

Hi, thanks for the response. It was more about if filling with random image =)

Do you know if there is a way to re-size an image container in card item to make it lower in case of generic image?

---

<div class="post-metadata">

**Author:** ![Oscar\_Mijael\_Perez\_G](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/oscar_mijael_perez_g/32/30514_2.png) [@Oscar\_Mijael\_Perez\_G](https://community.glideapps.com/u/Oscar_Mijael_Perez_G)\
**Post date:** [April 8, 2022, 2:07pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/4 "2022-04-08T14:07:58Z")

</div>

Can’t do that pivot table you want.  
But if you can do that when there is no image, replace it either with an image of your business, icon, or whatever you want.  
And for videos you could use the column that brings you the thumbnail of the video.  
I hope I helped you, I’m using Google translate haha

---

<div class="post-metadata">

**Author:** ![aosipovdev](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aosipovdev/32/41148_2.png) [@aosipovdev](https://community.glideapps.com/u/aosipovdev)\
**Post date:** [April 8, 2022, 2:12pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/5 "2022-04-08T14:12:25Z")

</div>

Hi Oscar, yeah, thanks for the suggestion, i can even use news provider “avatar” but it takes so many space in the app (( Assume you are subscribing to text only news and see a feed where each post has an anvater…

---

<div class="post-metadata">

**Author:** ![V88](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/v88/32/90054_2.png) [@V88](https://community.glideapps.com/u/V88)\
**Post date:** [April 8, 2022, 3:59pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/6 "2022-04-08T15:59:06Z")

</div>

Not sure that’s possible on a “card by card” basis I’m afraid. Unless @ThinhDinh maybe knows better? He has done some interesting stuff with CSS. If not then it’s going to be separate lists, but of course losing the strict chronology.

---

<div class="post-metadata">

**Author:** ![aosipovdev](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aosipovdev/32/41148_2.png) [@aosipovdev](https://community.glideapps.com/u/aosipovdev)\
**Post date:** [April 8, 2022, 4:11pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/7 "2022-04-08T16:11:17Z")

</div>

Got you, thanks! Moved forward with the approach to put news source channel avatar into the image field. By any chance you know and could share how to move cards overlay avatars, avatar text and caption to the top of each card? I tried with CSS but all spacing between cards becomes broken after my attempt…

---

<div class="post-metadata">

**Author:** ![V88](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/v88/32/90054_2.png) [@V88](https://community.glideapps.com/u/V88)\
**Post date:** [April 8, 2022, 5:09pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/8 "2022-04-08T17:09:37Z")

</div>

There are a few useful resources maintained by other Gliders that contain lots of easily searchable CSS tricks. Here are a couple of examples:

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=d9c1f083d89f401b9a31490c7f62c480)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

> **[Code BOOK](https://code-book.glideapp.io)**
>
> share cool codes, scripts and links

You will likely find what you need in one of these. However **please be aware** that CSS tweaks are not officially supported and you are not guaranteed that they will continue to work in future versions of Glide. I generally tend to ensure that CSS is not used for “mission critical” features and that I always have a “safe fallback”.

---

<div class="post-metadata">

**Author:** ![aosipovdev](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aosipovdev/32/41148_2.png) [@aosipovdev](https://community.glideapps.com/u/aosipovdev)\
**Post date:** [April 8, 2022, 7:25pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/9 "2022-04-08T19:25:37Z")

</div>

Thanks V88! Aware of these resources, maybe missed my question , will double check it. And thanks for warning regarding CSS support!

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [April 8, 2022, 8:06pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/10 "2022-04-08T20:06:43Z")

</div>

I’ve asked for the same thing too…no image in cards in the event that it has no image. No possible with CSS unfortunately…I’ve tried.

Best to fill it with a dummy image.

You can resize image to fit the container by using Cloudinary. I typically use this in a template column.

`https://res.cloudinary.com/glide/image/fetch/c_pad,w_900,h_300/@` where @ is the image URL.

This will make the image fit a 3:1 container (900x300)

---

<div class="post-metadata">

**Author:** ![aosipovdev](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aosipovdev/32/41148_2.png) [@aosipovdev](https://community.glideapps.com/u/aosipovdev)\
**Post date:** [April 8, 2022, 8:20pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/11 "2022-04-08T20:20:58Z")

</div>

Thanks Robert! Hope there will be such opportunity someday =)

---

<div class="post-metadata">

**Author:** ![aosipovdev](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aosipovdev/32/41148_2.png) [@aosipovdev](https://community.glideapps.com/u/aosipovdev)\
**Post date:** [April 8, 2022, 8:29pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/12 "2022-04-08T20:29:40Z")

</div>

By the way @Robert_Petitto @V88 , did you manage to move card avatars from bottom of the card item to the top left corner and keeping spaces between cards? )). ([CSS Trick: Longer Card Text and Move Avatar Image - #3 by Robert\_Petitto](https://community.glideapps.com/t/css-trick-longer-card-text-and-move-avatar-image/17975/3))

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 8, 2022, 9:37pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/13 "2022-04-08T21:37:44Z")

</div>

Maybe this is what you’re looking for?

> **[Chat App](https://chat-now.glideapp.io/)**
>
> chat for Glide

---

<div class="post-metadata">

**Author:** ![aosipovdev](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aosipovdev/32/41148_2.png) [@aosipovdev](https://community.glideapps.com/u/aosipovdev)\
**Post date:** [April 8, 2022, 9:46pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/14 "2022-04-08T21:46:00Z")

</div>

Hi @Uzo! That is exactly what im looking for! By any chance you can share a hint how to achieve that? I tried with the below CSS but my it works only for 1st card and all following seems to be overlapped with each other…

```
.card-subtitle { -webkit-line-clamp: 20 !important; } [data-test="card-item"] { margin: 10px; } [data-test=app-avatar-wrap] { position: fixed !important; top: -7px !important; left: 15px !important; }
```

---

<div class="post-metadata">

**Author:** ![aosipovdev](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aosipovdev/32/41148_2.png) [@aosipovdev](https://community.glideapps.com/u/aosipovdev)\
**Post date:** [April 8, 2022, 9:47pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/15 "2022-04-08T21:47:19Z")

</div>

Does anybody know if it is possible to assign different actions to overlays or at least open different screens based on which button is pressed?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 8, 2022, 9:50pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/16 "2022-04-08T21:50:51Z")

</div>

You can add custom action. with if else condition, or filter elements depending on the button was clicked

---

<div class="post-metadata">

**Author:** ![aosipovdev](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aosipovdev/32/41148_2.png) [@aosipovdev](https://community.glideapps.com/u/aosipovdev)\
**Post date:** [April 8, 2022, 9:55pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/17 "2022-04-08T21:55:58Z")

</div>

hmmmm i am aware about custom action but how can i link it with which overlay is clicked? 🤔 🤔 🤔

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 8, 2022, 9:57pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/18 "2022-04-08T21:57:41Z")

</div>

By overlay, you mean deferent place on the card? That is impossible in glide.

---

<div class="post-metadata">

**Author:** ![aosipovdev](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aosipovdev/32/41148_2.png) [@aosipovdev](https://community.glideapps.com/u/aosipovdev)\
**Post date:** [April 8, 2022, 9:59pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/19 "2022-04-08T21:59:32Z")

</div>

Yeah, i was thinking to move user to different pages and use card overlays like buttons…

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 8, 2022, 10:02pm UTC](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517/20 "2022-04-08T22:02:11Z")

</div>

You can calculate cards, positions and put buttons on top, but each card would have to have same size

[Next page](https://community.glideapps.com/t/is-there-a-way-to-remove-image-container-if-there-is-no-image-or-allow-sorting-on-multiple-inline-lists/40517.md?page=2)
