Get variable image-source on the front-end

Kirby 2 Solved ✅
1

This is my situation;

  1. My clients wants a dynamic slider on the front-page - populated with images of his own choice.
  2. So I can not simply referrer (from the front-end) to “slider-image-1.png”, because the name is always different.
  3. That’s why I created a simple custom field in the back-end, where my client can drag & drop an image of his choice.
  4. It’s easy to refer to that field from the front-end, but the fields returns the “Kirby Tag” of the selected image (e.g. “(image: parallax-3.jpg)”).
  5. I need to write down the unique URI of that specific image in the “background-image : url(…)”-tag of my slider.
  6. How do I get that URL, using strict Kirby code?

By the way - I was able to make my own “drag and drop slider-builder”, but I had to create my own controller / custom-field / etc…

That’s no problem (it works fluid, also on other elements - like parallax background, which can be filled from the back-end), but is there a Kirby-code for “converting” the image on the back-end, into a plain image-src in the front-end?

See the image below, of my solution - just drop an image on the custom “image source” field, and that image is placed in your dynamic style-sheet or javascript.

To make it simple…

I query the field “slider-image-1”, which contains “(image:home-mobile.png)”.

How do I get the full path of that specific image?

I can not use the default Kirby-tag to place an image, because I never know which image is active, also I do not need to render the image on the canvas, but do need the “src”-element of the image.

I managed to create my own solution, using a custom-made controller - but I want to stay as close to Kirby as possible (without writing own solutions).

2

I’d recommend using the Selector field.

1 Like
3

Cool - I didn’t know that “plug-in” (wasn’t listed on the official page?).

Guess I wrote my own Selector-plug-in :slight_smile: …but it only took me half an hour to create the dynamic slider-builder, so no problem.

The only back-draw is the homepage (where the slider is placed) contains a lot of images… so the interface becomes a bit crowded, with both the images on the left - and in the new custom-field;

I was hoping for a “gentle” code-solution, so may be I have to stick with my own slider-builder, when Kirby can’t parse the URI of a image on the front-end :’(

4

(Revolution-slider, created fully in the back-end - both text and “background” (which is a dummy right now)…

5

The alternative would be a simple select, with the drawback of not having a visual guide.

6

You can customize the field to filter the items or you can limit the height of the field on the page.

Do you know http://getkirby-plugins.com? It is an unofficial list of Kirby plugins, but it contains a lot of interesting ones.

7

Thanks for the plug-in page - the strange thing was that this particular page was down for me, the last two days (sometimes up, sometimes not reachable at all).

I want to have the slider-builder be visual ('though this is against Kirbies principle of being not a WYSIWYG-CMS), because it’s easier for my client to “drag and drop” the preferred background for it’s slider from the back-end…

…that’s why I ended up with a simple custom-field (called “imagesrc”) in the back-end.

When all is working well, I’ll publish it to Git - but it’s a simple field… just drag… and drop :stuck_out_tongue:

8

Alright. I’m marking this as solved for now. If you have any further questions, you can change it back to “Questions” yourself.

9

If your images have consistent names, like if they all start with “parallax”, you could filter them (the Visual Selector linked above can filter with regular expressions) but judging from the gif it doesn’t seem to be the case.

Another problem that could be solved if we had “buckets” in the sidebar? :wink:

10

“Buckets” (or Groups, or Categories) would be cool.

The problem is that I’ve a slider on the homepage, and this particular homepage has a lot of images (sliders, testimonials, parallax-backgrounds, icons, clients, etc…).

So I want to make it easy for my client;

Just upload a picture, drag it to the “dynamic slider-builder” and that’s it…

Once the selected picture is in place (e.g. “in the right form-field”), I need to “access” it’s URI / SRC from the back-end…

Now I use “$page->slider-image-1->kt()” but that gives me something like “nice-image.png” (depends on the image, that the client has dropped in the “slider-image-1” field…

And I want the full URI / SRC of the image, so I can write it down in the javascript-variable, used for the slider.

But, hey! :slight_smile: I did wrote a controller myself, using a WYSIWYG-custom-field in the back-side… so it’s not a big issue… I only was wondering if there was a “standard” API-call to “convert” an Kirby-image (“nice-image.png”) to it’s full path…

I hope my English isn’t that bad…

11

If you have just the filename, you can get the image like this:

$page->image($page->slider_image_1())->url();

But of course this will not work with an image tag.

12

I don’t need the image-tag; writing down an image within an image-tag is easy :stuck_out_tongue:

I really need the “source-uri” of an image, determined from the back-end…

Your solutions looks promising, but is not working in my case.

  1. I have a “custom field”, called “slider_image_1”.
  2. That field has a value of something like (image:nice_image.png)

And I just want to get the full path of that particular image…

…when I try to look up the “src” of that image, using your code - I get an error;

(washed out the image, for security reasons).

13

That’s what I said, the problem is that your field does not just contain a filename but an image tag … If your field value was just “nice_image.png”, you could use the solution posted above. As it is, you can’t. However, you could extract the filename as a substring from the value.

14

As it is, you can’t. However, you could extract the filename as a substring from the value.

That’s how I solved it, initially… so this case can be closed :stuck_out_tongue: