Solved: Re: Images in HTML Template

Kabuliño · 04-18-2023 09:52 AM

I've been testing and learning how to use HTML templates to generate PDFs, but my problem is with the images, which don't always load into the document and I don't understand why.

1.- I understand that if I have an image saved in Drive and enable anyone with the link to access it, it should be enough to use it in the HTML.

This is how I'm adding the image to the HTML.

<p><img src="https://drive.google.com/drive/folders/123c9A0xHPtBcqDUdPD5EbGSm3iGiNRUM"></p>

2.- As for the images that I attach to the HTML from appsheet, this is how I managed to visualize them...

 <p>&lt;&lt;Start: [Related Imagenes EcoCardios]&gt;&gt;
    <table>
        <tr>
        &lt;&lt;[Imagen]&gt;&gt;
        </tr>
        <tr>
        &lt;&lt;If:ISNOTBLANK([Referencia])&gt;&gt;<td>Referencia</td> 
        <td class="blod">&lt;&lt;[Referencia]&gt;&gt;</td> 
        &lt;&lt;EndIf&gt;&gt;
        </tr>
        <tr>
        &lt;&lt;If:ISNOTBLANK([Descripción])&gt;&gt;
        <td>Descripción</td>
        <td class="blod">&lt;&lt;[Descripción]&gt;&gt;</td> &lt;&lt;EndIf&gt;&gt;
        </tr>
   </table>
   &lt;&lt;End&gt;&gt;</p>

The problem is that it doesn't let me wrap the images in <td> or <th> so that they appear within the table.

I hope someone can guide me, thanks

SkrOYC

@Marc_Dillon wrote:

As for #2, why exactly isn't it letting you wrap the images in <td> or <th>? @SkrOYC can probably help there

Echa un vistazo a esta info:

Re: I'm looking for dificult template use cases! - Google Cloud Community

View solution in original post

SkrOYC

Solo quedaría reportar al equipo de soporte

View solution in original post

Marc_Dillon

@Kabuliño wrote:

1.- I understand that if I have an image saved in Drive and enable anyone with the link to access it, it should be enough to use it in the HTML.

This is how I'm adding the image to the HTML.
<img src="https://drive.google.com/drive/folders/123c9A0xHPtBcqDUdPD5EbGSm3iGiNRUM">

You need to use the correct URL though. For one, that's a URL to a GDrive folder, not even a file. Even if you grab the sharing link for the file itself, its actually a link to a GDrive "viewer" of the file, not directly to the file. Take the id of the file (from the share link) and append it to this URL base:

https://drive.google.com/uc?export=view&id=

As for #2, why exactly isn't it letting you wrap the images in <td> or <th>? @SkrOYC can probably help there.

Kabuliño

@Marc_Dillon wrote:
You need to use the correct URL though. For one, that's a URL to a GDrive folder, not even a file. Even if you grab the sharing link for the file itself, its actually a link to a GDrive "viewer" of the file, not directly to the file.

okay I understand

@Marc_Dillon wrote:
Take the id of the file (from the share link) and append it to this URL base:
https://drive.google.com/uc?export=view&id=

when i try it gives me the following error

apparently it refers to the = of id=
I try changing the = to ; but it gives me the following error

Kabuliño

Update:
The image shared from GDrive can have one of 3 roles.

With the read role I was able to upload the image to the PDF using the way I had previously described.

@Kabuliño wrote:
This is how I'm adding the image to the HTML.
<img src="https://drive.google.com/drive/folders/123c9A0xHPtBcqDUdPD5EbGSm3iGiNRUM">

SkrOYC

@Marc_Dillon wrote:

As for #2, why exactly isn't it letting you wrap the images in <td> or <th>? @SkrOYC can probably help there

Echa un vistazo a esta info:

Re: I'm looking for dificult template use cases! - Google Cloud Community

Kabuliño

@SkrOYC wrote:

Echa un vistazo a esta info:
Re: I'm looking for dificult template use cases! - Google Cloud Community

Al agregar el format rule en la [Imagen] se soluciono el problema de las etiquetas <td> y logre agregar las imágenes a la tabla sin problema.

El problema que ahora me tiene vuelto loco es la imagen del logo, ya que la imagen no está dentro de ninguna de mis tablas, estaba usando:

@Kabuliño wrote:
This is how I'm adding the image to the HTML.
<img src="https://drive.google.com/drive/folders/123c9A0xHPtBcqDUdPD5EbGSm3iGiNRUM">

pero no me está funcionando esa forma de agregar la imágen

@SkrOYC me recomiendas agregar la imágen del logo a alguna de mis tablas, aplicarle el formato de texto y finalmente llamarla en el HTML con...

<p><img src="&lt;&lt;ANY(Select(Tabla[Imagen],[Imagen]=Logo))&gt;&gt;"></p>

?
ó qué sintaxis me recomiendas usar?

SkrOYC

Te recomiendo lo que mencionas al final, meterla a través de la app.
AppSheet va a generar una URL pública cada vez que hagas un llamado a un campo de contenido, como los File o Image

Kabuliño

Lo he estado intentando pero el PDF nunca se genera, en el monitor de automatización me da el siguiente error:

SkrOYC

Comparte la expresión que estás usando.

Ten cuidado con los caracteres especiales en HTML o CSS

Kabuliño

he probado con las siguientes:

1.- <p><img src="&lt;&lt;ANY(SELECT(Características[Imagen],[Órgano] = Logo))&gt;&gt;"></p>

2.- <p><img src="&lt;&lt;ANY(SELECT(Características[Imagen],[Órgano] = "Logo"))&gt;&gt;"></p>

3.- <p><img src="&lt;&lt;ANY(SELECT(Características[Imagen],[Órgano] = &#34;Logo&#34;))&gt;&gt;"></p>

4.- <p><img src="&lt;&lt;ANY(SELECT(Características[Imagen],[Órgano] &#61; &#34;Logo&#34;))&gt;&gt;"></p>

5.- <p><img src="&lt;&lt;ANY&#40;SELECT&#40;Características[Imagen],[Órgano] &#61; &#34;Logo&#34;&#41;&#41;&gt;&gt;"></p>

SkrOYC

<p><img src="&lt;&lt;ANY(SELECT(Características[Imagen],[Órgano]='Logo'))&gt;&gt;"></p>

-

Kabuliño

ya probé tu sugerencia pero sigo obteniendo el mismo error.
Me llama la atención que cuando borro esta linea del html, todo funciona con normalidad

creo que mi falta de conocimiento en html y css puede estar causando el problema, aquí te dejo una copia del html que estoy usando https://drive.google.com/file/d/12sQM1pFK2uHVDSqzpKeoDSlMrODgSZJF/view?usp=sharing
yo sé que es un desastre pero tenme paciencia es mi primer reporte en html

SkrOYC

Aplicaste el format rule en esa columna?

Kabuliño

sí, tanto para la imagen de logo como para las imágenes de los ecocardios

SkrOYC

He estado revisando y no logro encontrar problemas con el código.

Intenta darle un Width después del src

Kabuliño

@SkrOYC wrote:
Intenta darle un Width después del src

Lo intenté, y sigo intentando con todas las formas que se me ocurren de llamar a una imagen que no esté directamente relacionada con la tabla que acciona el bot, he intentado distintas fórmulas y en todos los casos se presenta el mismo inconveniente.

SkrOYC

Mete la expresión dentro de un P sin el IMG para ver qué está retornando

Kabuliño

Regresa la imagen casualmente centrada

Me parece muy raro porque tengo activado el format rule que convierte a texto la imagen del logo y aún así me muestra la imagen.
No se puede controlar el tamaño de la imagen ni su alineación desde la etiqueta IMG ya que no existe

si meto la expresión en un TEXT() me regresa
Características::Características_Images/LOGO.Imagen.021222.png

En cuanto a las otras imágenes ([Related Imágenes]) funciona de forma esperada, quitando la etiqueta IMG regresa texto

SkrOYC

Por favor, envíanos un screenshot de la configuración de tu Format Rule para esa columna

Kabuliño

SkrOYC

Intenta eliminando y recreando ese format rule. Parece ser un BUG. No debería insertarse una imágen sino indicar el link al no usar un IMG

Kabuliño

Ya lo intenté pero el bug continua

SkrOYC

Solo quedaría reportar al equipo de soporte

Jurian

Have you found a solution? I'm having the same issue. My code:

<b>Melding:</b>
  <blockquote style="margin: 0 20px;">
    <p>Volledig adres:<br><<[Full address]>></p>
    <p>Situatie:<br><<[Related Meldings][Situatie]>></p>
    <p><<Start:[Related Foto situaties]>></p>
    <img src="&lt;&lt;[Foto]&gt;&gt;" style="width: 200px; height: auto;">
    <p><<End>></p>
    <p>Maatregel:<br><<[Related Meldings][Maatregel]>><br><<Start:[Related Foto maatregels]>><<[Foto]>><<End>></p>
    <p>Communicatie:<br><<[Related Meldings][Communicatie]>></p>
  </blockquote>

Everything works fine but it won't insert the image. The image column is formatted as TEXT, via a format rule.

When I paste the link that is returned from "<<Start:[Related Foto situaties]>><<[Foto]>><<End>>", into the "<img src=" it does work fine.

On another note, how come I don't need "<<" everywhere for the html template to work?

Jurian

My workaround for now is:

    <p>Maatregel:<br><<[Related Meldings][Maatregel]>><br>
    <<Start:[Related Foto maatregels]>>
    <a href="<<[Foto]>>" target="_blank">Foto maatregel</a>
    <<End>></p>

Where I make a hyperlink from the image column. Apparently the '<<[Foto]>>' syntax does work within href, while it doesn't in src.

Kabuliño

I haven't played with HTML images in a long time, but checking one of my old apps I found that the last syntax I used was the following

<style>
 .flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
  }
</style>

<body>
<div class="flex-center"> &lt;&lt;[Imagen]&gt;&gt; </div>
</body>

apparently it works well

wadu

Can anyone shed light on why images intermittently fail to load in HTML templates for PDFs, especially when sourced from Google Drive or AppSheet? Also, any tips on ensuring images display within table cells in the HTML code? I'm facing a similar challenge with a webcam image.

SkrOYC

@Jurian wrote:

On another note, how come I don't need "<<" everywhere for the html template to work?

What do you mean?

Is your template a .html or .txt?

Jurian

Thanks for your response, and sorry for my unclear explanation.

I'm using an .html filetype. So I noticed I didn't need the encoded brackets i.e. "<<" instead of "<<". But then when I went to insert the "<<[column]>>" brackets into an <img> tag, Appsheet gave an error. So I assumed I did have to use the encoded brackets inside an <img> tag. Which also didn't work.

When using the "<<[column]>>" syntax inside the <img> tag, Appsheet gave the following error message:

"Error encountered in step with name [Send an email]: Error: Task 'Send an email' Body template. Expression '[Foto]/' is invalid due to: Expression '[Foto]/' was unable to be parsed: Expression '[Foto]/' does not match the expected format of an AppSheet expression."

Apparently Appsheet thinks there is a '/' after my column, while there isn't.

So now for me I can't get it to work to insert images directly in the output of my template. Therefore I use the hyperlink approach. Which does work with the "<<[column]>>" brackets inside a <> tag.