Forums

I created a form to let students fill personal data and an image. Works fine with file upload. Then i built a connection and a editing form with model id's. I'm able to see a records table with an edit column that retrieves the editing form with all the submitted data except the image that has been uploaded to the server.
The purpose of this is that the teachers are able to see the list of student records and open each record to see the data including the student image.
I've read for a long time but I'm not able to do this. I only need to show the image, editing o deleting is not needed, indeed the "editing"form has no save action because I only want the teacher let consult the data not editing them.
Can you help please.
Image where stored in the default folder of CF5.
Thank you in advance.Regards,
Andrés.

Hi Andrés,

I think that I would do this by using an <img> tag in the HTML box of the Front List > Settings tab.

Bob

Sorry but I have no idea of html. I looked up for examples but still imposible for me. Could you help with this?
Thank you.

And another question, your proposal will show the image in the editing from? Or in a column in the connection table?

What I'm really looking for is to show the image in the editing form. I think this could be posible by adding a custom code element in the designer tab that retrieves and shows the corresponding image for that specific record (it indeed finds the file name, i put a text field with the model and column name of the uploaded image and it retrieves the correct file name). But I have no idea how to do it.
The model is "ConsultaFichasResis"
The field name of the image upload in the initial form is "SubirFoto"
The file is stored in the default folder and the name of the form (and definite containing folder) is: "FichadeResidenteDef"

Thank you again.

Hi Andrés,

Sorry, I missed the Image box - you can use that: Model.field:http://path_to_image e.g.

Data.image_name:http://mydomain.com/components/com_chronoforms/uploads/form_name/

Bob

Sorry but you mean that I should use that code in a custom code element in the editing form?

Hi Andrés,

No - in the Images box of the Listing -
I see you posted more detail

ConsultaFichasResis.SubirFoto:http://mydomain.com/components/com_chronoforms/uploads/FichadeResidenteDef/

but replace mydomain.com with the name of your domain.

Bob

I've tried your proposal but there is something that I'm missing. I entered this code with the appropriate path (you can check it in the following screen capture) in the appropriate place, as far as I know (in Frontlist in the box named "images". I also added a column with the appropriate modelID for "SubirFoto". As you can see it appear an icon of an image but it doesn't show the image.
Any suggestions?

I've tried different paths but with no better results.
Thanks

Hi Andrew,

Please remove the home/urgencia/public_html/ from the URL - those are folders above the level of your site.

Bob

Doesn't work. Look

I've also tried to put this code:

<?php
$path='http://urgenciasprincesa.com/components/com_chronoforms5/chronoforms/uploads/FichadeResidenteDef/';
$file= $row['ConsultaFichasResis']['SubirFoto'];
echo "<img src='{$path}{$file}' />";
?>

That I found in this post: https://www.chronoengine.com/forums/posts/t97234/chronoconnectivity-v5-view-image.html?keywords=img%20tag%20frontlist
I put that code in List Display/Custom/Body code

No better results with that approach

Ok I did it, found a solution you gave bob in another post:

https://www.chronoengine.com/forums/posts/t101068/image-pathproblem.html?keywords=edit%20form%20view%20image%20file

I put the following code in the Settings/HTML box of the connection:

ConsultaFichasResis.SubirFoto:<img src='http://urgenciasprincesa.com/components/com_chronoforms5/chronoforms/uploads/FichadeResidenteDef/{ConsultaFichasResis.SubirFoto}' />

And in the column list: ConsultaFichasResis.SubirFoto: Foto

The missing code was that in the end that refers to the file in every row: {ConsultaFichasResis.SubirFoto}.
That worked now for me.
The only little problem i've found is that every image has different sizes. How could I apply any code to resize all the images to have the same format in every row of the "Foto" column?

And if it is useful for another user. it felt very difficult for me to show the image in an editing form, only showing the image with no need to edit it. Finally using in the designer tab of the editing form I put a custom element with the same code as before:

<img src='http://urgenciasprincesa.com/components/com_chronoforms5/chronoforms/uploads/FichadeResidenteDef/{ConsultaFichasResis.SubirFoto}'

And worked fine for that simple purpose.
Still the problem with resize images but maybe someone can help and leave this post finally closed.
Thanks in advance.