Hello,
it there any way to add an image that open a link if clicked??
Thank You for your help!
Best regards,
Diego.
Suggested Articles
Re: Clickable image with link behind
Hello Diego,
Yes, what you want to achieve is possible.
First of all, we have to enable the "Enhanced User Interface" option from "Themes Page", under "Settings" tab.
After doing so, we will now create the custom action which will be triggered upon pressing the "Image Button" that you are willing to place on the dialog. To do so, you can go to "Custom Actions" page and add an "OpenUrl" custom action without sequence.
Now, you can go to "Dialogs" page, click on the dialog on which you want to add the control, press the "Control" button from the toolbar and add an "Image Button" control to your dialog. Upon clicking on the earlier created control, a "Properties" pane will appear on the right side, where you can configure the button. For example, under "Display", you can set the patch to the image you want to display on the dialog and also the text that is displayed on the button.
After configuring the button, we now have to create the event which will trigger our earlier created custom action. To do so, click on the button and then, under "Published Events" tab, click on the "New..." button --> select "Execute custom action" --> in the "Argument" field, select the earlier created OpenUrl custom action --> leave the "Condition" field unchanged if you do not want to condition the execution of your custom action.
Another way to do this is to use a "Command Link Button" control instead of "Image Button" control. This can be useful if you want to also have a description for your button. The steps that must be taken are the same as those presented above. The only thing that needs to be mentioned here is the fact that by using the "Control Link Button", you can only use Icon Files (which have .ico extension), while for the "Image Button" you can use any type of image files (.JPG, .PNG, etc.).
Hope this helps!
Regards,
Catalin
Yes, what you want to achieve is possible.
First of all, we have to enable the "Enhanced User Interface" option from "Themes Page", under "Settings" tab.
After doing so, we will now create the custom action which will be triggered upon pressing the "Image Button" that you are willing to place on the dialog. To do so, you can go to "Custom Actions" page and add an "OpenUrl" custom action without sequence.
Now, you can go to "Dialogs" page, click on the dialog on which you want to add the control, press the "Control" button from the toolbar and add an "Image Button" control to your dialog. Upon clicking on the earlier created control, a "Properties" pane will appear on the right side, where you can configure the button. For example, under "Display", you can set the patch to the image you want to display on the dialog and also the text that is displayed on the button.
After configuring the button, we now have to create the event which will trigger our earlier created custom action. To do so, click on the button and then, under "Published Events" tab, click on the "New..." button --> select "Execute custom action" --> in the "Argument" field, select the earlier created OpenUrl custom action --> leave the "Condition" field unchanged if you do not want to condition the execution of your custom action.
Another way to do this is to use a "Command Link Button" control instead of "Image Button" control. This can be useful if you want to also have a description for your button. The steps that must be taken are the same as those presented above. The only thing that needs to be mentioned here is the fact that by using the "Control Link Button", you can only use Icon Files (which have .ico extension), while for the "Image Button" you can use any type of image files (.JPG, .PNG, etc.).
Hope this helps!
Regards,
Catalin
Re: Clickable image with link behind
Hello Catalin,
can you tell me a little bit about the expected dimensions for a custom image that is added in such a dialog. For example, when I try to add this image
it looks in the installer like this:
What am I doing wrong? I assume that it comes from the fact that the image should slightly change when it has a mouse over, but I could not find any specifications for that...
Best regards,
Simon
can you tell me a little bit about the expected dimensions for a custom image that is added in such a dialog. For example, when I try to add this image
- calendar@256px.png (1.43 KiB) Viewed 6346 times
- customimage.PNG (21.95 KiB) Viewed 6346 times
Best regards,
Simon
Re: Clickable image with link behind
Hello Simon,
First of all, as it can be seen in our "Enhanced User Interface - Image Button" article, the image you are adding for the "Image Button" control is not quite a simple image.
It is basically formed from 6 images, all of the same sizes, each image representing a state of the button.
At first, this may indeed be quite confusing, this being the reason why I will forward an improvement request to our Technical Writing team so we can rethink the way we explain this in our User-Guide.
Until then, please accept my apologies for this inconvenience.
That being said, please allow me to explain this.
Basically, what we need to have here is an image that consists of 6 other images (the images should be quite different in our case - e.g. different colors). In our scenario, we can make 5 more copies of the same image, edit each of that accordingly (e.g. change the colors) and then, from those 6 images, create a single one.
Obviously, as I am not a Design specialist, I could not achieve much, but I have tried to create a sample picture for you so we can better understand the scenario here.
Below, you can find attached an archive containing all the pictures:
As you can see, we basically have 6 copies of the same image, just in different colors, and then another picture which contain all of those.
Here is how I have achieved this:
- I have opened Paint and I have copied the image there:
I have used the "Resize" button to resize the image
After doing so, I have used the other 2 tools (marked in red in my first picture) to:
1. select the portion that I wanted recolored (the tool from the bottom)
2. recolor the portion (the tool from the top)
I have repeated this step 5 times to create 5 different pictures.
- I have then opened Paint3d and inserted all my pictures there by using the "Menu" (top left corner) --> "Insert" option
- I have alligned the pictures accordingly, cropped the white part of the picture and then I have saved it as an image (2D Picture (PNG))
What is inportant to note here: each of the small picture was resized from 256x256 to 128x128 pixels. I have done this because the smaller piece of the bigger picture should have the same Height and Width as our Image Button control. Making the button of a 256 Height and a 256 Width is unfortunately impossible, as that would exceed the boundaries of the dialog.
With that being said, the button in our case should have a Height of 128 and a Width of 128.
In addition to the images, please also find attached a sample project which uses the earlier attached picture:
Now that I hopefully explained this well enough, the reason why your picture looks like that is because the logic (algorithm) behind this custom control tries to split the picture in 6.
Hope the explanation helps.
Best regards,
Catalin
First of all, as it can be seen in our "Enhanced User Interface - Image Button" article, the image you are adding for the "Image Button" control is not quite a simple image.
It is basically formed from 6 images, all of the same sizes, each image representing a state of the button.
At first, this may indeed be quite confusing, this being the reason why I will forward an improvement request to our Technical Writing team so we can rethink the way we explain this in our User-Guide.
Until then, please accept my apologies for this inconvenience.
That being said, please allow me to explain this.
Basically, what we need to have here is an image that consists of 6 other images (the images should be quite different in our case - e.g. different colors). In our scenario, we can make 5 more copies of the same image, edit each of that accordingly (e.g. change the colors) and then, from those 6 images, create a single one.
Obviously, as I am not a Design specialist, I could not achieve much, but I have tried to create a sample picture for you so we can better understand the scenario here.
Below, you can find attached an archive containing all the pictures:
As you can see, we basically have 6 copies of the same image, just in different colors, and then another picture which contain all of those.
Here is how I have achieved this:
- I have opened Paint and I have copied the image there:
- Explanation.png (133.14 KiB) Viewed 6335 times
I have used the "Resize" button to resize the image
- Resize.png (18.2 KiB) Viewed 6335 times
After doing so, I have used the other 2 tools (marked in red in my first picture) to:
1. select the portion that I wanted recolored (the tool from the bottom)
2. recolor the portion (the tool from the top)
I have repeated this step 5 times to create 5 different pictures.
- I have then opened Paint3d and inserted all my pictures there by using the "Menu" (top left corner) --> "Insert" option
- I have alligned the pictures accordingly, cropped the white part of the picture and then I have saved it as an image (2D Picture (PNG))
What is inportant to note here: each of the small picture was resized from 256x256 to 128x128 pixels. I have done this because the smaller piece of the bigger picture should have the same Height and Width as our Image Button control. Making the button of a 256 Height and a 256 Width is unfortunately impossible, as that would exceed the boundaries of the dialog.
With that being said, the button in our case should have a Height of 128 and a Width of 128.
In addition to the images, please also find attached a sample project which uses the earlier attached picture:
Now that I hopefully explained this well enough, the reason why your picture looks like that is because the logic (algorithm) behind this custom control tries to split the picture in 6.
Hope the explanation helps.
Best regards,
Catalin
Re: Clickable image with link behind
Hi Catalin,
thank you very much for your very detailed description. I tried your approach with another image and it now works as expected.
Best regards,
Simon
thank you very much for your very detailed description. I tried your approach with another image and it now works as expected.
Best regards,
Simon
Re: Clickable image with link behind
Hello Simon,
Thank you for your followup on this.
You are always welcome!
This is awesome news! I am really glad everything works as expected now.
Best regards,
Catalin
Thank you for your followup on this.
You are always welcome!
This is awesome news! I am really glad everything works as expected now.
Best regards,
Catalin