Why are certain features not available for Glide pages?

  • A functional Map on mobile device would be nice (showing all location pins and not defaulting to SF all the time)

  • Location component also would be great

5 Likes

@Robert_Petitto here is an alternative to a progress bar.

<div style="overflow:hidden;border-radius:15px;background-color:#DDDDDD;"">
  <div style="border-radius:15px;background-color:#29577A;height:15px;width:33%">
  </div>
</div>

9 Likes

Most needed for my work would be some kind of Image Gallery/Slider.

Just spend 2 hours in putting together an Image Array and trying to put it to work only to find out later, through the Community, that it does not work on Pages.

PS Does anybody know how to achieve this in the meantime?

So simple. Nice!

1 Like

Please check this.

1 Like

Thanks again for this. So beautiful in a Custom Collection!

5 Likes

Here is a pretty simple workaround until Glide has a Gallery feature for pages IF your images can be uploaded once and don’t require changing

Use Elfsight, a no-code widget maker to create a slider with a URL that can be shown in a WebEmbed element in pages. Elfsight has a lot of customization options that make it nice to use. You will need to upload the images to Elfsight so this is not a dynamic solution, so may or may not work for your specific project.

Here is a link to a demo I threw together to test viability: https://elfsight-gallery-test.glide.page

To make this, you need to create the widget in Elfsight, then grab the widget installation code, then add to a sandbox template url
https://sandbox.elfsightcdn.com/WIDGET_ID and then use that link as the WebEmbed link.

7 Likes

Really cool. Thanks for sharing!

1 Like

Playing around with a thought to make it easier to add images - using a social feed widget instead to show only photos from a specific twitter feed. The idea would be to create a twitter account just for image upload and then display all images uploaded to that account. Still not the real solution we need - to upload images directly in Glide pages, but a workaround that is a little more dynamic. You can see sample of this on the demo now for @glideapps twitter feed.

1 Like

Hola Jeff,

Any idea or trick to recreate what I did time ago but using Pages? Progress Bar Color - #19 by gvalero

I think I’m missing something to get what I want or Page is playing with me and I don’t realize it :roll_eyes:

Thanks!

Are you talking about the horizontal bars that are overlayed on top of the entry components? Are you trying to recreate that overlay? The bar itself would only be a slight modification of how I did it, but overlaying it might be tricky. Maybe possible if you have have a plan that enables a CSS in Pages, but I probably wouldn’t go that route and instead place the bar above or below each entry component.

Or, are you taking about recreating the vertical bars?

The vertical bars Jeff, something like this:

I think I got the settings finally but my bars move from top to bottom (the yellow one) and it’s wrong, the animation bars should move from bottom to top but I can’t find the right setting.

Any suggestion?

Gracias!

OK, I think I figured it out. Here’s something that I think should work. The key is the position:relative in the outer div container and the combination of position:absolute; and bottom:0px in the inner div container. That will make the progress climb from bottom to top.

(- If you remove margin:auto, then it will be left aligned.)
(- I also noticed an issue with low percentages, where the bar wouldn’t look right, so I added overflow:hidden to the outer div container, which makes it look a lot better by containing the inner div only within the outer div. I’ve corrected my original post above with this same change.)

<div style="margin:auto;overflow:hidden;border-radius:15px;background-color:#DDDDDD;position:relative;height:200px;width:15px;">
  <div style="border-radius:15px;background-color:#29577A;position:absolute;bottom:0px;width:15px;height:66%;">
  </div>
</div>

image

If you want to get a little bit crazy, then you can combine multiple bars in an html table, and add some headings.

image

This is what I have for the multiple bars with headings. Had to fix some issues because alignment got weird when I started adding headings, but I think it’s pretty stable now.

<table width=100%><tr>

<td style="text-align: center; vertical-align: bottom;">
Unit 1
<div style="margin:auto;overflow:hidden;border-radius:15px;background-color:#DDDDDD;position:relative;height:200px;width:15px;">
  <div style="border-radius:15px;background-color:#29577A;position:absolute;bottom:0px;width:15px;height:66%;">
  </div>
</div>
</td>

<td style="text-align: center; vertical-align: bottom;">
Unit 2
<div style="margin:auto;overflow:hidden;border-radius:15px;background-color:#DDDDDD;position:relative;height:200px;width:15px;">
  <div style="border-radius:15px;background-color:#29577A;position:absolute;bottom:0px;width:15px;height:33%;">
  </div>
</div>
</td>

<td style="text-align: center; vertical-align: bottom;">
Unit 3
<div style="margin:auto;overflow:hidden;border-radius:15px;background-color:#DDDDDD;position:relative;height:200px;width:15px;">
  <div style="border-radius:15px;background-color:#29577A;position:absolute;bottom:0px;width:15px;height:1%;">
  </div>
</div>
</td>

<td style="text-align: center; vertical-align: bottom;">
Unit 4
<div style="margin:auto;overflow:hidden;border-radius:15px;background-color:#DDDDDD;position:relative;height:200px;width:15px;">
  <div style="border-radius:15px;background-color:#29577A;position:absolute;bottom:0px;width:15px;height:100%;">
  </div>
</div>
</td>

<td style="text-align: center; vertical-align: bottom;">
Unit 5
<div style="margin:auto;overflow:hidden;border-radius:15px;background-color:#DDDDDD;position:relative;height:200px;width:15px;">
  <div style="border-radius:15px;background-color:#29577A;position:absolute;bottom:0px;width:15px;height:15%;">
  </div>
</div>
</td>

<td style="text-align: center; vertical-align: bottom;">
Unit 6
<div style="margin:auto;overflow:hidden;border-radius:15px;background-color:#DDDDDD;position:relative;height:200px;width:15px;">
  <div style="border-radius:15px;background-color:#29577A;position:absolute;bottom:0px;width:15px;height:55%;">
  </div>
</div>
</td>

<td style="text-align: center; vertical-align: bottom;">
Unit 7
<div style="margin:auto;overflow:hidden;border-radius:15px;background-color:#DDDDDD;position:relative;height:200px;width:15px;">
  <div style="border-radius:15px;background-color:#29577A;position:absolute;bottom:0px;width:15px;height:96%;">
  </div>
</div>
</td>

</tr></table>
2 Likes

Let me try… thanks!

1 Like

Amazing @Jeff_Hager … you are a crack :muscle:

I just asked for a tip or help and you gave me a whole solution. Use a table to split my bars was something brilliant.

This is how my idea is taking shape, I still have to make some improvements but I know what to do or not use
image

Gracias Jeff, ten un gran fin de semana!

1 Like

That looks great! I’ve been trying to come up with something that includes text, like you did with your percentages. Curious how you ended up doing that. I’m not having the best luck due to some weird scaling issues.

image

1 Like

jeje, I’m still fighting with all this and trying to make it simpler. :grinning:

But if I could do it time ago, I think I can repeat it in 2023 :muscle:

I will let you know when I have something decent to show

Feliz día!

1 Like

I’m really close to something I like. I have everything lining up nicely regardless of screen size and I can add and remove additional bars easily. The only issue I have is that low percentages look weird. I can correct it, but then I lose the number on the left side of the bar.

Here’s what I have right now. Notice that low percentages look good.

If I fix that issue, then I lose the number.

I’ll try some more, but I think the only solution is to remove the rounded corners, or make them less rounded.

1 Like

Here’s code for a javascript column if you want to use it. It will dynamically build as many or as few bars as you want based on the number of percentages you give it. You can specify headings if you want. If not, you still need to put in commas so it splits into an array properly. It’s not perfect, but works pretty good.
p1 = headings
p2 = percentages
p3 = bar colors

let headings = p1.split(",");
let percentages = p2.split(",");
let colors = p3.split(",");
let template = '<td style="text-align:center;"><b>{heading}<p></b><div style="margin:auto;border-radius:0px;background-color:#DDDDDD;position:relative;height:200px;width:15px;"><div style="border-radius:0px;background-color:{color};position:absolute;bottom:0px;width:15px;height:{percentage}%"></div><div style="position:absolute;bottom:0px;height:calc({percentage}% + 10px);right:18px;text-align:right;white-space:nowrap;"><a style="border: 1px solid black;padding:2px;">{percentage}%</a>→</div></div></td>';

let finalResult = [];
for (let i = 0; i < percentages.length; i++) {
finalResult.push(template.replaceAll("{heading}", headings[i]).replaceAll("{percentage}", percentages[i]).replaceAll("{color}", colors[i]));
}

return '<table style="width:100%;table-layout:fixed;"><tr>' + finalResult.join("") + '</tr></table>';
6 Likes

No way, you have created a monster!! :exploding_head:

I’m going to test it!!

1 Like