Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
GeoPal
Experienced
Topic Author
Posts: 227
Joined: 20 Dec 2007, 12:56

Dynamic link-image to contact form

29 Oct 2020, 11:00

Hi Karl,
Wanted to ask you, is there a way to make a link with dynamic parameter, like photo name, which goes into the description/header of the contact form or in the message field.
What I mean- I want to make gallery page for photo print requests, and with a link under each photo, going to the contact from and filling the name of the photos automatically, so I know what photo people request.
Is it possible with the parameters options?

https://panomagic.eu/PrintShop/

Thanks in advance for any insight!
G
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Dynamic link-image to contact form

29 Oct 2020, 22:31

I believe we discussed this in private message, but I will post here the steps I took to create a dynamic contact form that contains the clicked image from a gallery.

1. First I added the below code to Settings > Custom > Custom Javascript, as we will need it to extract url parameters.
Code
function get_param(param){
  var query =location.search.substring(1);
  var vars = query.split('&');
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split('=');
    if(pair[0] == param) return pair[1];
  }
  return(false);
}
2. For your page panomagic.eu/PrintShop/ I added the following link to page settings > gallery > caption > caption defaults > Default Image Link:
Code
/contact/?image={image_path}
Image
The above basically assigns all gallery images as a link, linking to your /contact/ page, and also forwarding ?image path as url parameter by using the dynamic {image_path} variable.

3. Finally, for your /contact/ page, I added the following code to settings > page > advanced > page javascript:
Code
var image = get_param('image');
if(!image) return;
var form = document.getElementsByClassName('contactform')[0];
if(!form) return;
form.insertAdjacentHTML('afterbegin', '<a href="' + image + '" data-popup><img src="' + image + '" class="x3-style-frame"></a><input type="text" name="image" value="' + image + '">');
The code basically checks if the ?image parameter is set, and then injects some HTML into the form based on the image parameter value. In this case, I added the image as an <img> tag into the form, as well as an <input> field with the image path, that gets forwarded in the email. The html can easily be adjusted.
 
User avatar
GeoPal
Experienced
Topic Author
Posts: 227
Joined: 20 Dec 2007, 12:56

Re: Dynamic link-image to contact form

31 Oct 2020, 07:36

Thank you for the thourough input! Very flexible gallery and I am still amazed by the things which can be done with it!
Thanks!