Image Render in Detailed View

Hi everyone!

I have been following the DoingITeasy channel on youtube in order to learn this framework. Completing lecture 17 on how to upload a file I managed to get the upload of the file working right as a bonus but I’m struggling to get the image displayed on the detail view widget. Any help would kindly be appreciated.

Hi!

Here is a tutorial:

Seriously.

Please: Always use google / search function first.

DetailView::widget([

	'model' => $model,

	'attributes' => [

		// other attributes ...


		[

			'attribute'=>'My Picture',

			'value'=>'@web/my_uploads/'.$model->name, // WEB ACCESSABLE PATH + FILENAME 

			'format' => ['image',['width'=>'100','height'=>'100']],

		],


		// other attributes ...

	],

]) 

Regards

I have tried your response before posting this thread. It has always showed me a broken image. I have followed the tutorial to upload closely and just wanted some advice.

Hi,

Okay, then some additional info:

Have you compared the path of the "broken image" with your uploaded-path to track down what is going wrong?

You say your upload is working already?

Where are the files you upload located in your project?

Your image file needs to be in a web-accessible folder…

For example I name it "uploads"

Means for basic template:

app/web/uploads/

For Advanced template:

frontend/web/uploads/

backend/web/uploads/

Now try following:

1. Copy a picture file under one of the above paths.

(for example I named it: my-test-pic.png)

2. Do what I described above in your Detail View, for example:

DetailView::widget([

	'model' => $model,

	'attributes' => [

		// other attributes ...


		[

			'attribute'=>'My Picture',

			'value'=>'@web/uploads/my-test-pic.png', 

			'format' => ['image',['width'=>'100','height'=>'100']],

		],


		// other attributes ...

	],

]) 

3. Now your detail-view should always show the "my-test-pic.png".

4. Once you got above working => modify it to use it with your uploaded / different pictures.

Regards

Hi,

I have tried your code for the test picture and it worked. So I conclude that the path on my code is correct. I have a folder named ‘uploads’ on the web directory. The problem is what to write next to the $model on the value of the array.

Hi,

Sorry, I do not understand what you mean with:

Please describe your problem more specific…

Do you upload the pictures with ActiveRecord?

Means: Does every file has a DB-entry?

You could read:

http://www.yiiframework.com/doc-2.0/guide-input-file-upload.html

Maybe this helps you make further progress.

Regards

Ok this was the solution I came up with:

[

            'attribute'=>'Company Logo',


            'value'=>'@web/uploads/' .$model->company_name.'.jpg',


            'format' => ['image',['width'=>'100','height'=>'100']],


        ],

Basically I added a ‘jpg’ to the end. It works but only exclusively to jpg files.

I store the url path of the file in the db.

Did it just like on this tutorial…

Thank you for your time.

Best regards.

Hi,

Have not seen the vid…

But you can save the extension of the file also in db.

Then it will also work with other image-types.

For example:

$model->imageFile = UploadedFile::getInstance($model, 'imageFile');


// following attributes are available when you have catched the file

$model->imageFile->name;

$model->imageFile->baseName;

$model->imageFile->tempName;

$model->imageFile->size;

$model->imageFile->extension;

$model->imageFile->type;

Regards