Images in HTML Template

[Kabuliño]

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 · Accepted solution]

---

@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

[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.

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

---

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.

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

---

[SkrOYC · Accepted solution]

---

@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.

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

---

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 · Accepted solution]

Solo quedaría reportar al equipo de soporte