OL Learn

Adding an image based on a URL in a data file

#1

Hello,
I’m trying to insert an image into a Print Template based on a field in a CSV data file that contains a URL. If I insert an image, I can copy and paste the URL into the select image popup window and save it with the template. However, I can’t figure out how to do this as a variable. As an example, I would have a file below:

Record 1,https://example.jpg
Record 2,https://example.jpg
Record 3,https://example.jpg

They are all different images and I need to pull the URL image on a record to record basis.
I can find similar topics but none that specifically relate to this one.

Thank you,

#2

Hi @TSled,

In case the image element is already added to the content of your Print Context Section then you can execute the following steps:

1.) Add the attribute ID to your image element, like for example

<img src="file:///C:/images/default.png" style="width: 300px; height: 200px;">

Will become something like:

<img id="example" src="file:///C:/images/default.png" style="width: 300px; height: 200px;">

2.) And use a Standard Script like the following to change the value of the attribute “src”:

Name: Example
Selector: #example

var result = "";
var field = record.fields["filename"];

if (field != "") {
	result = ("file:///C:/images/" + field);
	
	if (resource(result)) {
		results.attr("src", result);
	}
}
#3

Sorry, I’m still getting a big X in the image. Here are screenshots of what I have:
Data file

Source

image
image.png723×68 2.8 KB

Script
image
Result
image
I can get a static image to display if I save the image with the template. Otherwise I can’t get anything to display other than that X. I am using a URL not a stored image on disk.

#4

Please note that, given the shared screenshots, you will have to change the following line of JavaScript code:

result = ("file:///C:/images/" + field);

To:

result = field;
#5

Also, have you tried you image URL in a web browser?

I tried it and this is what I get:

Capture
Capture.PNG827×316 14.5 KB

#6

Yes, I get the image without issue in my browser as well. I can also save the static URL in the template and the image works.

It seems like there’s something blocking the connection to talk directly to the website.

I updated the code and I still get the large X.

#7

Most likely some credentials issue. It must reckonize you browser as legit but not mine.
Maybe try it in a incognito tab.

#8

Incognito still works for me. It also works for a few of my colleagues. Still not sure why Pres Connect won’t pick up the Image dynamically from the URL, only when it’s saved with the template, which is a manual process.

I’m working on a work around to download the images from the Web into a local folder, then pick these images up based on a filename…somehow. Just thought this would work inside the designer directly from the URL.

#9

If you work from home, disconnect your VPN and try to url…You and your collegue are most likely seen as “valid”

#10

Hi @TSled,

Can you let us know please when the issue with the image with the red cross does occur? Is that for example when you view your Print Context Section in Design mode or Preview mode?

In case it does occur only in Design mode then I would like to ask you kindly to change the value of the attribute “src” (of the image element) so that it points to a image which you would like to add to the Print Context Section when viewing it in Design mode, this can be for example:

  • src="images/default.png" - When the image has been added to the Images folder of the Template
  • src="file:///C:/images/default.png" - When the image is stored in a directory on your disk
#11

Hi Marten,

To answer your questions in order:

We are not trying it from home over VPN, the connection fails when directly connected or remotely connected.

The Red Cross occurs in preview mode.

I have created a work around which now pulls the variable images. I download the images from the URL to a somewhat local folder using a batch cmd. I pull the name of the image from the URL in the data file with a simple script, add the local directory to the script and append the filename to pick up in the attribute “src”.

I can share code if you’d like, just let me know.
I am also using Pres Connect 1.7 still so this may an old bug that’s been since fixed in later releases.

Thanks