Solved: Are there an away to format size of an image insid...

neemias · 05-13-2022 06:21 PM

Guys i tried set a two images in my template (size medium). Follow my code...

<<If: ISNOTBLANK([6.1 Visão panorâmica.])>>

<<[Nome do segurado]>> - <<[Número do sinistro]>>

ITEM <<[a) Item ou gleba]>>

<<[6.1 Visão panorâmica.]>>

Figura 1. Visão panorâmica.

<<If: ([192. Mostrar as coordenadas obtidas pelo AppSheet na legenda das fotos do relatório fotográfico]="Sim")>>Coordenadas: (<<[1006.1]>>)<<EndIf>>

<<[6.2 Visão panorâmica.]>>

Figura 2. Visão panorâmica.

<<If: ([192. Mostrar as coordenadas obtidas pelo AppSheet na legenda das fotos do relatório fotográfico]="Sim")>>Coordenadas: (<<[1006.2]>>)<<EndIf>>

<<EndIf>>

The result is not satisfactory. Some times one image goes to the next page. The small size is discarded because the images are very small to my pretentions. Yes, i use a table to try limitate the content. Some one have an idea to help me improve my report file?

Joseph_Seddik

After you finish setting your template in Google Docs, click on File menu --> Download and choose: Webpage HTML. Your template will be converted to HTML file saved on your PC.

Open the downloaded HTML file using a text editor, check the width of the cell containing the image. You can do that by locating the <td> HTML tag preceding the <img src=.. > tag.

If your image is the first element in the cell, you'd normally find a <span tag ending just before <img begins. At the end of this <span tag, you'd find something like width: 400.00px; hight: 300.00px, or whatever numbers. These are the dimensions of your cell containing the image.

Based on these dimensions you can adjust the size of your image (inside the <img tag) to match the hight OR the width of the cell, or slightly less. Do NOT use both hight and width to adjust the size of your image; use only one of them to preserve the image's aspect ratio.

After you finish, upload the modified HTML file to your Google Drive, and use it instead as your template in the task.

View solution in original post

Joseph_Seddik

My friend, why are you complicating things for yourself? We gave you different solutions but you haven't tried any of them and you just keep trying the same thing and keep running into problems. I told you for example not to put HTML code inside GDoc template and gave you more than one alternative. @Suvrutt_Gurjar gave you excellent advice and provided captures of real examples showing how they display nicely, did you see it?

Would you please read the comments again slowly and at ease, try them, and tell us if you face difficulties implementing any of our proposals?

View solution in original post

neemias

Friend, that was a long road, but we have success!!!

1. We need create a data action (watch the video)

https://www.youtube.com/watch?v=hwKCURgk4hE

2. Settings to access the files and images

https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/File-Column-Should-Store-Google-Drive-URL/m-p/3...

3. Code html

<!DOCTYPE html>
<html>
<head>
<title>Relatório Fotográfico</title>
<style>
.logo {
width: 160px;
height: 90px;
}
.image {
width: 700px;
height: 400px;
}
hr {
width: 90%;
align: center;
}
body {
width: 210mm;
height: 297mm;
margin-top: 25px;
margin-bottom: 25px;
margin-right: 25px;
margin-left: 25px;
}
td {
width: 20%;
}
</style>
</head>
<body>
<table style="width:90%" align="center">
<tr>
<td rowspan="3">TESTE</td>
<td align="center">Empresa:</td>
<td align="center">Periseg</td>
<td align="center">Regulador:</td>
<td align="center"><<[Perito]>></td>
</tr>
<tr>
<td align="center">Email:</td>
<td align="center">neemias@periseg.com.br</td>
<td align="center">Fone:</td>
<td align="center">(51) 980259832</td>
</tr>
<tr>
<td align="center">Segurado:</td>
<td align="center"><<[Nome do segurado]>></td>
<td align="center">Sinistro:</td>
<td align="center"><<[Número do sinistro]>></td>
</tr>
</table>
<hr>
<h3 align="center">Item</h3>
<table style="width:100%">
<tr>
<td align="center"><img src="<<[2]>>" class="image"></td>
</tr>
<tr>
<td align="left">           Figura 1. Visão panorâmica.</td>
</tr>
<tr>
<td align="center"><img src="<<[3]>>" class="image"></td>
</tr>
<tr>
<td align="left">           Figura 2. Altura das plantas.</td>
</tr>
</table>
<hr>
<p align="center">Emitido em <<_TODAY>></p>
</body>
</html>

Output (*only column 2 is setting as above - first image)

My apologies for insisting! Thanks all for the help!!! @Joseph_Seddik

View solution in original post

diogolupcosta

https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/Workflow-template-format-Image-format/m-p/32661...

Check this out, maybe it helps you

neemias

How i did use the html template... he used icon class... what i need use and how many pixels is necessary? Sorry for many questions...

neemias

I still tried the best solution to me, what is use html code... but still now, my html code does not show an image (workflow settings: text). e.g. <img src="<<[6.1 Visão panorâmica.]>>" class="image">. Yes, [6.1 Visão panorâmica.] is a column type image.

Joseph_Seddik

What type of template you are currently using? Google Docs? Other?

neemias

pdf... here i am again... i tried this code:

<img src=”<<6.1 Visão panorâmica.>>” alt="image" width=”400” height=“300”>

neemias

input:

<html><img src=”<<6.1 Visão panorâmica.>>” alt="image" width=”400” height=“300”></html>

output:

Joseph_Seddik

What is the type of template you are using to generate the PDF file?

neemias

This is my task...

neemias

i'm using google docs... to edit the template. Follow my template content...

Joseph_Seddik

After you finish setting your template in Google Docs, click on File menu --> Download and choose: Webpage HTML. Your template will be converted to HTML file saved on your PC.

Open the downloaded HTML file using a text editor, check the width of the cell containing the image. You can do that by locating the <td> HTML tag preceding the <img src=.. > tag.

If your image is the first element in the cell, you'd normally find a <span tag ending just before <img begins. At the end of this <span tag, you'd find something like width: 400.00px; hight: 300.00px, or whatever numbers. These are the dimensions of your cell containing the image.

Based on these dimensions you can adjust the size of your image (inside the <img tag) to match the hight OR the width of the cell, or slightly less. Do NOT use both hight and width to adjust the size of your image; use only one of them to preserve the image's aspect ratio.

After you finish, upload the modified HTML file to your Google Drive, and use it instead as your template in the task.

neemias

I will try this solution... i think it will works. thx, Joseph.

Joseph_Seddik

Welcome! This is how I've been doing it. Tell me please how it turns out for you. Thanks.

Joseph_Seddik

@neemias

By the way, another thing you can try is to remove the <html> .. </html> code from inside your template, and just insert the image in your Google Doc using the URL (Menu Insert --> Image --> URL). Adjust the image size manually in your template and its position before downloading the HTML file.

Also, with this manual image insertion and resizing, test the Google Docs template as is and see the results. Depending on the image, this might be sufficient and you wouldn't need to download/adjust/upload a new HTML file.

neemias

Joseph, let me ask you. Are there an example of html template that i can adapt to my reality? The idea is to create a photographic report to use in field areas.

Joseph_Seddik

I'd say, just create your report in Google Doc, the way you like it, without any html code in the template; do everything manually using the menus and the formatting options provided, then download it as an html webpage, and there you have your html template.

I'm sorry I don't have much experience in html; I just know few things to manage my way around. Surely @SkrOYC can offer you better help and service.

Suvrutt_Gurjar

Maybe you want to take a look at the below post as well.

Basically , you could include the image column expression in a table cell in a template and then you could control the width of the cell to control the size of the image. However in this approach you cannot change the aspect ration of the image. So please select a height that matches the width in terms of aspect ratio. So if your image is 400 pixel (width) by 200 pixel ( height) and if you choose to have cell width of 2 inches , then cell height will need to be at least 1 inch

https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/Workflow-Output/td-p/271698

neemias

If i understood, the size of image in a column can be set through size of height of the cell... is it?

neemias

Hi, friend. That solution will it limitate the height in that proportion? for example, if i take a photo as portrait, the height will not extrapolate de height?

Suvrutt_Gurjar

Width of the cell.

neemias

@Joseph_Seddik, I create a new code in HTML... Pass in test of bot run, but... Images are not showed in pdf file. Look that! Dear God!

<!DOCTYPE html>
<html>
<head>
<title>Relatório Fotográfico</title>
<style>
.logo {
width: 160px;
height: 90px;
}
.image {
width: 700px;
height: 400px;
}
hr {
width: 90%;
align: center;
}
body {
width: 210mm;
height: 297mm;
margin-top: 25px;
margin-bottom: 25px;
margin-right: 25px;
margin-left: 25px;
}
td {
width: 20%;
}
</style>
</head>
<table style="width:90%" align="center">
<tr>
<td rowspan="3"><img src="Final2_Images/Logo.jpg" class="logo"></td>
<td align="center">Empresa:</td>
<td align="center">Periseg</td>
<td align="center">Regulador:</td>
<td align="center"><<[Perito]>></td>
</tr>
<tr>
<td align="center">Email:</td>
<td align="center">neemias@periseg.com.br</td>
<td align="center">Fone:</td>
<td align="center">(51) 980259832</td>
</tr>
<tr>
<td align="center">Segurado:</td>
<td align="center"><<[Nome do segurado]>></td>
<td align="center">Sinistro:</td>
<td align="center"><<[Número do sinistro]>></td>
</tr>
</tr>
</table>
<hr>
<h3 align="center">Item</h3>
<table style="width:100%">
<tr>
<td align="center"><img src="<<[6.1 Visão panorâmica.]>>" class="image"></td>
</tr>
<tr>
<td align="left">           Figura 1. Visão panorâmica.</td>
</tr>
<tr>
<td align="center"><img src="<<[6.2 Altura de planta.]>>" class="image"></td>
</tr>
<tr>
<td align="left">           Figura 2. Altura das plantas.</td>
</tr>
</table>
<hr>
<p align="center">Emitido em <<_TODAY>></p>
</body>
</html>

Joseph_Seddik

As I told you, I'm not the best person to help you with an html code. I gave some solutions based on Google Doc and converting it to html and do a little modification, not building an html page from scratch. I don't know how to do it.

I'd say you have to src your images using URLs, not column values. This surely won't work.

neemias

Joseph, column values refers to an URL in text mode... i do not understand why does not works. I am use a rule to get an URL...

I set a rule to return images as text/url's. Look below...

Joseph_Seddik

My friend, why are you complicating things for yourself? We gave you different solutions but you haven't tried any of them and you just keep trying the same thing and keep running into problems. I told you for example not to put HTML code inside GDoc template and gave you more than one alternative. @Suvrutt_Gurjar gave you excellent advice and provided captures of real examples showing how they display nicely, did you see it?

Would you please read the comments again slowly and at ease, try them, and tell us if you face difficulties implementing any of our proposals?

neemias

I understand you, but that solutions does not solve my problem...

Here is a method that i am testing

https://www.youtube.com/watch?v=hwKCURgk4hE

Input

concatenate("https://www.appsheet.com/image/getimageurl?","appname=",encodeurl("VistoriaPreliminar-3646590"),"&tablename=",encodeurl("ReportAppSheet"),"&filename=",encodeurl([1]))

output (what i will use in my <img src="... >

https://www.appsheet.com/image/getimageurl?appname=VistoriaPreliminar-3646590&tablename=ReportAppShe...

In my case, i have an error message

Error retrieving file 'ReportAppSheet_Images/deb51c77.1.195333.jpg': URL has an invalid signature. Why?

Joseph_Seddik

Sorry I don't speak the language of the video so I can't follow.

Your URL is not working on it's own. This is not related to the template. I don't know why it is not working, but at least any image you'd src in a template should be publicly accessible through its indicated URL, and the URL should be working.

neemias

I call support... Thx!

neemias

Joseph, I found that I create my app on an account and my spreadsheet is on a drive shared with me with the file folders, images... I don't think this app accesses the file storage on another drive/google account. How i can change the local of storage the files to my drive? I can't make a mistake...

Joseph_Seddik

URLs in the template have nothing to do with the app. The URL destination has to be publicly accessible. Just log out of all of your Google accounts, use a private browser window, then test the URL, is it accessible? can you see the destination image? If not, then you cannot use it.

In this case, you might need to move your image to another publicly-accessible location.

Or, again, you can just insert your image manually in your Google Doc sheet and resize it using the cursor. What is the problem with that?

neemias

Friend, that was a long road, but we have success!!!

1. We need create a data action (watch the video)

https://www.youtube.com/watch?v=hwKCURgk4hE

2. Settings to access the files and images

https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/File-Column-Should-Store-Google-Drive-URL/m-p/3...

3. Code html

<!DOCTYPE html>
<html>
<head>
<title>Relatório Fotográfico</title>
<style>
.logo {
width: 160px;
height: 90px;
}
.image {
width: 700px;
height: 400px;
}
hr {
width: 90%;
align: center;
}
body {
width: 210mm;
height: 297mm;
margin-top: 25px;
margin-bottom: 25px;
margin-right: 25px;
margin-left: 25px;
}
td {
width: 20%;
}
</style>
</head>
<body>
<table style="width:90%" align="center">
<tr>
<td rowspan="3">TESTE</td>
<td align="center">Empresa:</td>
<td align="center">Periseg</td>
<td align="center">Regulador:</td>
<td align="center"><<[Perito]>></td>
</tr>
<tr>
<td align="center">Email:</td>
<td align="center">neemias@periseg.com.br</td>
<td align="center">Fone:</td>
<td align="center">(51) 980259832</td>
</tr>
<tr>
<td align="center">Segurado:</td>
<td align="center"><<[Nome do segurado]>></td>
<td align="center">Sinistro:</td>
<td align="center"><<[Número do sinistro]>></td>
</tr>
</table>
<hr>
<h3 align="center">Item</h3>
<table style="width:100%">
<tr>
<td align="center"><img src="<<[2]>>" class="image"></td>
</tr>
<tr>
<td align="left">           Figura 1. Visão panorâmica.</td>
</tr>
<tr>
<td align="center"><img src="<<[3]>>" class="image"></td>
</tr>
<tr>
<td align="left">           Figura 2. Altura das plantas.</td>
</tr>
</table>
<hr>
<p align="center">Emitido em <<_TODAY>></p>
</body>
</html>

Output (*only column 2 is setting as above - first image)

My apologies for insisting! Thanks all for the help!!! @Joseph_Seddik

Are there an away to format size of an image inside the template file?