How do I refer to one image id in {{imageIds}} in Template

[nil]

I am writing a template and have a quick question that I can find the answer from

https://www.espocrm.com/documentation/user-guide/printing-to-pdf/

It's possible to print image fields:
<img src="{{file imageId}}"> where imageId – the name of custom image field, concatenated with the suffix Id.


when I use the above line it doesn't show any photos, when I use {{imageIds}} it returns 5cbf164eb8f245ae8,5cbf165be263d61e6,5cbf16654f0f60 6d8,5cbf1668e50359b69,5cbf166c60013a7 a3,5cbf187aa2ae037c7,5cbf187ec89466199

How do I get just the first image id in Template?

Thanks

[telecastg]

{{file imageId}} means the name of the field (image type) where the image is contained concatenated with the string "Id".


So for example, if you have an entity with a field type IMAGE named "myImage" the template line should be <img src="myImageId"> and this will display the image.

Espo stores images as files in the data/upload folder and assigns an ID string to refer to them, so the actual content of the "myImage" field is the ID string assigned by the system to the file.

The reason why you have to concatenate "Id" to the field name is because the actual mysql table field name is "my_image_id"

[esforim]

Having trouble using this. Just learn about it, I get this error:

TCPDF ERROR: [Image] Unable to get the size of the image: 5e14147c43d

Is there a standard type of format of the image that we must use for this to work? This is a .jpg file I'm testing it with. Saved the image from irfanview.

[telecastg]

I am not familiar with TCPDF errors but I am printing image fields to PDF without a problem using the following code in a template, my image field id is "landlordSignatureId" maybe it can help:

<img style="width: 132.83px; height: 83.95px;" src="?entryPoint=image&amp;id={{landlordSignatureId}}">

I don't think that the error has to do with the type of image.

[esforim]

I am not familiar with TCPDF errors but I am printing image fields to PDF without a problem using the following code in a template, my image field id is "landlordSignatureId" maybe it can help:

<img style="width: 132.83px; height: 83.95px;" src="?entryPoint=image&amp;id={{landlordSignatureId}}">

I don't think that the error has to do with the type of image.

Using your code, I stop getting the error and PDF was able to continue being produced. It weird, I cannot get it to work, it just blank where the code is.

The field type should be "Image" right? So it correct, without using the image code it produce the #ID string so it can retrieve the code but it cannot display image.

Then I noticed that I been using the Header section, thinking that is the mistake I tried do same code in the Body but it still didn't work.

I guess I give this up for now.

[telecastg]

Perhaps you can verify if the image is actually loaded, Espo keeps track of images as "attachments" by creating one attachment record for each file where the record id is the same as the file name.

The actual file exists in the "data/upload/" folder

[esforim]

It work, I can visibly see the image (I add the company logo by using the image field). But I just can't export that logo using Print PDF/PDF Template

[esforim]

After almost a month, I started using PDF again, and finally manage to get it to work. I am guessing it due to the mod_security issue that I fixed up.

I can confirm that the code <img style="width: 132.83px; height: 83.95px;" src="?entryPoint=image&amp;id={{landlordSignatureI d}}">
Work without issue now and finally I can have image in my PDF.

[yuri]

In the next version it will be possible use imageTag https://github.com/espocrm/documenta...-pdf.md#images

[telecastg]

Excellent improvements ! specially the Custom Template Helpers.

I look forward to 5.8.0 and try to see if "css classes" can be defined as custom template helpers and thus they will be correctly rendered by TCPDF.

[sandra6012]

Someone could support me, in my case the image does not appear

[esforim]

I see the <img=src>

That mean you didn't put that in the code (click the <> button), so right now your template is just a "text" not a code.

[jflores]

I'm on version 7.0.8 and trying to Print to PDF using the most current documentation and this forum. I feel like I must be making some bonehead mistakes....

This is what I currently have as my tests:

Fields:

• Image: testImage
• Attachment Multiple: roofPhotos

{{imageTag testImageId}}

{{imageTag '61ae3dd11439bb3e4' width=50 height=50}}

{{#each roofPhotosIds}} roof Photo ID: {{imageTag './this'}}{{/each}}

this is test image: <img src="?entryPoint=image&amp;id={{testImageId}}">

And this is what shows up in my PDF (attached). The `{{#each}}` rendering is what I'm most interested in, the rest are my attempts to just get something to work properly. But, to no avail...

[rabii]

Hi @jflores

you can try code below:

// Specify some width and height for Image 
{{imageTag testImageId width=50 height=50}}

// Use ./this without brackets and it should reference each object in the iteration
{{#each roofPhotosIds}}
    Roof Photo ID: {{imageTag ./this width=50 height=50}}
{{/each}}

This code works well for me, i have tested it.

Cheers

[jflores]

rabii - Thank you for the suggestion, but it still didn't work. Are you also using the most current version of Espo? Do you have any sense about whether there may be anything particular to my environment that I should investigate? I'm baffled b/c even looking at the raw code, it seems like it should be working properly...

[esforim]

Make sure you click the <> button (code mode view), then paste rabii code in?

[rabii]

Hi jflores

I have tested the code and it worked fine, i am using latest version of espocrm 7.0.8

Make sure you configure the file / multi-attachment fields to accept img/*

thanks

[jflores]

rabii , esforim - So, I have a clue...I stood up another blank install and got it to work. The difference with the main install I was implementing this on was that the original is using AWS S3 as the storage provider vs. the default file system.

When I use AWS S3: image doesn't render.

When I use default storage: image renders.

Have you guys tried using the PDF imageTag renderer on AwsS3? I'm trying to figure out if it could be my AWS config or if maybe I need to file a bug in github with the PDF image renderer not working with AwsS3 storage provider.

Or maybe I need to write a new implementation...?

Thank y'all so much for your help!

[jflores]

Ok, I have a solution:

Instead of using the {{imageTag imageId}} approach, I actually added an image tag with the Object URL hardcoded in the "src" attribute:

<img src="INSERT_AWS_S3_OBJECT_URL/{{./this}}">

Of course, there have to be permissions on the bucket that grant read access to the folder so that the system can actually access the resource.

Given that {{./this}} is appropriately parsing the ID, it further confirms for me that when AWS is the storage mechanism, then the default request isn't correct. Instead, the request root needs to be AWS Object URL, with the {{imageId}} suffixed to the URL.

I'm open to correction and if my kluge is unnecessary, I'm happy to use a more 'appropriate' response. At a minimum, this approach does require me to let anyone who edits the PDF know that they have to use this Object URL format instead of relying on the helper methods that currently exist "out of the box."

One suggestion for the development team might be to create another helper method "awsImageTag" that uses the "bucketName" from "config-Internal.php" to create the appropriate baseUrl for the 'src' string. Or maybe add a 'config-internal' setting attribute 'baseObjectUrl' that is referenced as the 'src' prefix when defaultFileStorage is AwsS3. That might be a more scalable implementation (e.g., if someone wanted to use Dropbox vs AWS, for instance). But, I'm purely speculating.

In either case, I have a kluge that seems to be working for me now and I just wanted to share it with others since there is no error messaging or failure messages that let you know why it's failing if using Aws for storage.

rabii thank you so much for your help; it prompted me to try a 'clean' install, which is what led me to realize the configuration difference between using the default file system and AWS. Much appreciated!

[esforim]

I think you are far more knowledgeable at this point and exhausted all possible method to get it working. When it reach this point, I just go for, "it probably bugged". Perhaps Yuri can give more insight. I will Like the Github and hopefully it raise some attention.

[rabii]

sorry been away. glad you found the solution, using AwsS3 would require different config to properly render the image. i think it would be great if they could mention on documentation.

[rvorsten]

All,

I have been doing a lot of trial and error on this today, and finally found a (relatively simple) solution. I wanted to print in my PDF the pictures which I had included in my 'Case' objects.

The following line shows all attached photo's in the PDF:

{{#each attachmentsIds}} {{imageTag ./this }} {{/each}}

Hope this helps somebody!
Ronald

[shalmaxb]

This is indeed very helpful. I do a lot of trial and error as well, because there are many uncommented possibilities and "do not" in the template creation. I do not use the WYSIWYG anymore at all, because it only produces a mess. And working in HTML code, you must be aware of many things as well. I regularly need ten times as much to get a result as in plain HTML.
So, every hint or "trick" is really appreciated.