Hi,
I would like to achieve the following:
- Button for each image shown "Details"
- a method, which obtains the image filename, looks up in a file/table the specific URL for that image, and launches that URL, after the user clicks on the button.
Maybe I could use the "Default Image Link" for that.
However, I have the problem that part of the URL I am calling would be something like this:
[image specific ID]/shop/photography/[image_fielname].
Idea, I could change the filemane to [image specific ID][image_filename].
Would it be possible in the default image link, to separate the left side of the filename and the right side, and place them in different parts of the URL?
If not, how could I achieve this?
Regards,
Harald
X3Photo Gallery Forums
X3 Photo Gallery Support Forums
Button to launch external URL from an image16 postsPage 1 of 2
Re: Button to launch external URL from an image
How would I for example build a method, so that clicking on the button besides the image, the image file name is handed over to the method, and the method then looks up the URL in some file/table?
Re: Button to launch external URL from an image
Below is what bard.google.com suggested.
Question, how would I code the HTML element in X3, to set img id, src, and alt parameters?
Regards,
Harald
---
Here's how you can build a button on an HTML page that looks up an URL based on the image file name:
HTML Structure:
[color=var(--bard-color-on-surface-variant)]HTML[/color][font={defaultattr}]
[color=var(--bard-color-on-surface-variant)]Use code with caution. [color=var(--bard-color-primary)]Learn more
[/color][/font][/color]
[ltr][color=var(--mat-icon-color)]content_copy[/color][/ltr]
JavaScript Implementation:
[color=var(--bard-color-on-surface-variant)]JavaScript[/color]
Question, how would I code the HTML element in X3, to set img id, src, and alt parameters?
Regards,
Harald
---
Here's how you can build a button on an HTML page that looks up an URL based on the image file name:
HTML Structure:
[color=var(--bard-color-on-surface-variant)]HTML[/color]
Code
<img id="myImage" src="image.jpg" alt="Image description">
<button id="lookupButton">Lookup URL</button>
[color=var(--bard-color-on-surface-variant)]Use code with caution. [color=var(--bard-color-primary)]Learn more
[/color][/font][/color]
[ltr][color=var(--mat-icon-color)]content_copy[/color][/ltr]
JavaScript Implementation:
[color=var(--bard-color-on-surface-variant)]JavaScript[/color]
Code
const lookupButton = document.getElementById('lookupButton');
const image = document.getElementById('myImage');
lookupButton.addEventListener('click', () => {
// Extract the filename from the image source
const filename = image.src.split('/').pop();
// Define the lookup logic based on your file naming convention
// Here's an example:
const base_url = "https://www.example.com/resources/";
const url = base_url + filename.replace(/\..*$/, "");
// Open the URL in a new tab
window.open(url, '_blank');
});
Re: Button to launch external URL from an image
Hi, I tried with the default image link, but I am missing a 2nd parameter from the image.
Tried this:
https://xxx/artwork/{title}/shop/photog ... name}.html
Does not work, since the image title, or image caption, is not provided as a parameter here.
-> How do I get the image title or image caption from the image file into the default image link?
Could I use something like {file_name}14 chars from left, {file_name}, char 15 to end, in the default image link?
Tried this:
https://xxx/artwork/{title}/shop/photog ... name}.html
Does not work, since the image title, or image caption, is not provided as a parameter here.
-> How do I get the image title or image caption from the image file into the default image link?
Could I use something like {file_name}14 chars from left, {file_name}, char 15 to end, in the default image link?
Re: Button to launch external URL from an image
Hi. Of course, there are some possibilities here, but you kinda lost me with the below:
I kinda didn't read properly through your progress, because I like to understand what you are doing before I can assist. Of course, if you could create links directly from the clicked file name, without using an external table/database, it would not be complicated.
Where is this file/table? Is it a database? Creating a button, a link and automating the link based on file name isn't too complicated. But looking up an external file or database? That means you need an ID for each image and/or the image name needs to be an entry in the DB/file. You could store links in a JSON file with key from the image names, but this is still a Javascript job where you need to load the database (or database JSON file) into browser and use it as an array-lookup.- looks up in a file/table the specific URL for that image, and launches that URL, after the user clicks on the button
I kinda didn't read properly through your progress, because I like to understand what you are doing before I can assist. Of course, if you could create links directly from the clicked file name, without using an external table/database, it would not be complicated.
Re: Button to launch external URL from an image
I could put the two required strings for building the URL into image title or caption + image file name.
When using the standard functionality for default image link, I am missing a variable for either image title or image caption, to build the URL properly in the default image link.
-> how could image title or caption be provided as variable to be accessible in default image link?
-> alternatively, how could the URL be assembled using image filename and title or caption, using some script?
Regards,
Harald
When using the standard functionality for default image link, I am missing a variable for either image title or image caption, to build the URL properly in the default image link.
-> how could image title or caption be provided as variable to be accessible in default image link?
-> alternatively, how could the URL be assembled using image filename and title or caption, using some script?
Regards,
Harald
Re: Button to launch external URL from an image
Do you have an example of the the target link you are trying to assemble?
I don't see why you need to do this from "caption" etc, as this is meant for longer non-url compatible strings that contains html. If you are building one url from another, why can't you just do this from the file name? Why do you need to complicate it further by trying to build a link from captions? I don't see any advantage.
I don't see why you need to do this from "caption" etc, as this is meant for longer non-url compatible strings that contains html. If you are building one url from another, why can't you just do this from the file name? Why do you need to complicate it further by trying to build a link from captions? I don't see any advantage.
Variables are only for physical aspects of the image PATH and NAME, so it can easily be converted to links that can manipulate the same image. Surely your target links can also be assembled from the file name?HiFly260 wrote:-> how could image title or caption be provided as variable to be accessible in default image link?
Re: Button to launch external URL from an image
My taget link is: https://xxx/artwork/(fileID)/shop/photography/(filename).html
So, the URL needs 2 parameters.
Or, I could use a filename like Xxxxxx_yyyyyyy_string,
And would then have to assemble the url as https://xxx/artwork/xxx xx_yyyyyyy/shop/photography/string.html
So, first variable in the url would be filename, first 14 chars, and 2nd variable would be string from char15 to the end …
I assume this wont work with the standard default image link, so would somehow have to be coded?
So, the URL needs 2 parameters.
Or, I could use a filename like Xxxxxx_yyyyyyy_string,
And would then have to assemble the url as https://xxx/artwork/xxx xx_yyyyyyy/shop/photography/string.html
So, first variable in the url would be filename, first 14 chars, and 2nd variable would be string from char15 to the end …
I assume this wont work with the standard default image link, so would somehow have to be coded?
Re: Button to launch external URL from an image
Yes, X3 isn't really meant to handle something like this, because your target link isn't only using the file name (or path), but some additional fileID. And since there is both {fileID} and {filename}, we can't use file name for both.
It would have to be a Javascript fix. I would do this:
It would have to be a Javascript fix. I would do this:
- Rename your images {filename}_{fileID}.jpg (or the other way around, it doesn't matter technically.
- In your default image link, use some template format like you already mentioned:
https://xxx/artwork/(fileID)/shop/photo ... name).html - With a little Javascript that triggers on page load, we then get the file name, parse {fileID} and {filename} from the file name, and then replace the (fileID) and (filename) from the HREF link.
Re: Button to launch external URL from an image
Thanks - I have now implemented a button so far with hard wired URL
https://www.haraldreitzphotography.com/test_gallery/
Issue is, on the gallery page, some previously defined action triggers to go to a page with that one image only, and the URL does not fire.
Only on that page, the button calls the url.
Question, how do I get rid of that action, so that my button URL works directly from the gallery image?
Regards,
Harald
https://www.haraldreitzphotography.com/test_gallery/
Issue is, on the gallery page, some previously defined action triggers to go to a page with that one image only, and the URL does not fire.
Only on that page, the button calls the url.
Question, how do I get rid of that action, so that my button URL works directly from the gallery image?
Regards,
Harald
Re: Button to launch external URL from an image
Other question, how can I access. In html or JS the image parameters, filename, description, etc?
Re: Button to launch external URL from an image
What "action" is this though? Please provide a link.HiFly260 wrote:Issue is, on the gallery page, some previously defined action triggers to go to a page with that one image only, and the URL does not fire.
Only on that page, the button calls the url.
Question, how do I get rid of that action, so that my button URL works directly from the gallery image?
Re: Button to launch external URL from an image
I'm not sure how you imagined this to work. Even this was public, there would need to be an API with a JS object containing all links and their parameters.HiFly260 wrote: Other question, how can I access. In html or JS the image parameters, filename, description, etc?
No, if you want to build a Javascript fix as in my suggestion, you would simply 1. get all links, 2. loop through them, 3. parse the image they are linking to, 4. replace the HREF.
Re: Button to launch external URL from an image
On https://www.haraldreitzphotography.com/test_gallery/, when I click on button "3D", I get here:
https://www.haraldreitzphotography.com/ ... kateboard/
From there, the static ULR works, but not from test_gallery.
So there must be some event listener, making that happen, which I would like to switch off.
For the Javascript fix, I thought, I would build a JS function which would receive the image filename (maybe also image description), and then assemble the correct ULR, which would then be launched by the button.
Since I am not a JS developer, I would need to try to find some examples on the web, and/or use google bard, to build that.
Therfore my question was, how can I read the values for filename, and image description, in HTML or JS, to build that URL?
Regards,
Harald
https://www.haraldreitzphotography.com/ ... kateboard/
From there, the static ULR works, but not from test_gallery.
So there must be some event listener, making that happen, which I would like to switch off.
For the Javascript fix, I thought, I would build a JS function which would receive the image filename (maybe also image description), and then assemble the correct ULR, which would then be launched by the button.
Since I am not a JS developer, I would need to try to find some examples on the web, and/or use google bard, to build that.
Therfore my question was, how can I read the values for filename, and image description, in HTML or JS, to build that URL?
Regards,
Harald
Re: Button to launch external URL from an image
Did some more testing - seems when popup setting “images are clickabe” is on, and “open in popup” is on, click on anywher in image opens popup, which is ok, but clicking on 3D button navigates to unique image landing page, which happens when “image is clickabe” is on but popup is off, with any image click, except then, 3D button fires url.