Creating a pipe to get the URL of image fields

I’m looking to get the URL’s of multiple image fields per record, and saving the URL’s as individual text fields to use in an HTML component.

Any ideas?

Can I get some context of what you’re looking to achieve? Maybe that’ll help find a potential solution.

Image carousel.

I have this one working with sample images on a record details page - https://materializecss.com/carousel.html

I’m looking to use images stored in the record I’m viewing the details for. {Image1}, {Image2}, {Image3}.

I tried using {!!Image1.src}, etc. inside the img tag but that’s not working. Since the value of {!!Image1.src} is //res.cloudinaryxxxxxx, I also tried <img src=“https:{!!Image1.src}”> I’m assuming at this point I just can’t use an image field inside a div element.

Here’s the carousel working with sample images - https://www.loom.com/share/c811a37c742a41b7877327441e40b437

I have to test this further, but just to confirm are you doing this: {!!Image1.src} or {!!Image1.src!!}

There must be !! in the inside the end of the brackets too.

Off the top I think you might be able to achieve this with a Text Pipe.

Using the text pipe pass the image as the Text parameter, then for the action use ensureLeft(‘https:’).

What will happen is it will get the image URL that was uploaded and then add https: to the beginning so it gets formatted correctly.

I just tested this and this does indeed work to convert the values to https:// with the url.

However, I haven’t tested it with the slider. If you upload your code here I can take a look and find a way to make it work (if the above approach doesn’t work).

Thanks Moe,

Sorry for the confusion, I had the image.src formatted correctly. Just typed it out wrong on my phone.

I’ll definitely try the text pipe tomorrow. For the code I was using, I just copied the html straight from materializecss (https://materializecss.com/carousel.html) and replaced the image url with all the different field variations I was trying.

    <div class="carousel">
        <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
        <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
        <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
        <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
        <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
      </div>

12 posts were split to a new topic: Image Carousel / Slider