Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

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



    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

  • #2
    {{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"
    Last edited by telecastg; 05-01-2019, 02:21 AM. Reason: Added explanation about image storage

    Comment


    • #3
      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.

      Comment


      • #4
        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:

        Code:
        <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.

        Comment


        • #5
          Originally posted by telecastg View Post
          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:

          Code:
          <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.

          Comment


          • #6
            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

            Comment


            • espcrm
              espcrm commented
              Editing a comment
              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

            • espcrm
              espcrm commented
              Editing a comment
              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.

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

            Comment


            • #8
              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.

              Comment


              • #9
                Someone could support me, in my case the image does not appear
                Attached Files

                Comment


                • espcrm
                  espcrm commented
                  Editing a comment
                  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.

              • #10
                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

                Code:
                {{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...

                Attached Files

                Comment


                • rabii
                  rabii commented
                  Editing a comment
                  Hi @jflores

                  you can try code below:

                  Code:
                  // 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
                  jflores commented
                  Editing a comment
                  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...

                • espcrm
                  espcrm commented
                  Editing a comment
                  Make sure you click the <> button (code mode view), then paste rabii code in?

              • #11
                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

                Comment


                • #12
                  rabii , espcrm - 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!
                  Attached Files
                  Last edited by jflores; 12-30-2021, 12:54 AM. Reason: Reference my second comment when trying to get the image to render while using AWS as storage provider.

                  Comment


                  • jflores
                    jflores commented
                    Editing a comment
                    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!

                  • espcrm
                    espcrm commented
                    Editing a comment
                    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
                    rabii commented
                    Editing a comment
                    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.

                • #13
                  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

                  Comment


                  • shalmaxb
                    shalmaxb commented
                    Editing a comment
                    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.
                Working...
                X