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

Ask for Help
1

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

2

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

3

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?

4

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

5

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…

6

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.

1 Like
7

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…

8

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

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”.

9

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

1 Like
10

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)

4 Likes
11

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

12

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)

13

Maybe this is what you’re looking for?

14

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;
}
15

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?

16

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

17

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

18

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

19

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

20

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