Welcome, Guest

TOPIC: Upload Files: How to show a file icon in grid view

Upload Files: How to show a file icon in grid view 14 Jul 2016 09:16 #14245

organicwebs
Offline
Premium Member
Chris
Posts: 133
Thank you received: 21
Karma: 4

Hi,

In Grid View, I would like to show a file icon - instead of the filename for the upload files. I need this because there is not much space available when I have a lot of columns to show.

I have looked at the default_grid.php file, but it refers to the JDom, and I get lost after that.

<?php echo JDom::_('html.fly.file', array(
	'attrs' => array('format:png'),
	'dataKey' => 'datasheet',
	'dataObject' => $row,
	'height' => 'auto',
	'indirect' => false,
	'preview' => 'modal',
	'root' => '[DIR_DEVICES_DATASHEET]',
	'width' => 'auto'
	));?>

Cheers

Just call me Chris

The administrator has disabled public write access.

Upload Files: How to show a file icon in grid view 14 Jul 2016 22:03 #14249

admin Offline Administrator Chef Posts: 3711 Thank you received: 984 Karma: 140	What do you mean ? A thumb, of an file icon (always the same ?)
	Coding is now a piece of cake The administrator has disabled public write access.

Upload Files: How to show a file icon in grid view 15 Jul 2016 05:46 #14257

organicwebs
Offline
Premium Member
Chris
Posts: 133
Thank you received: 21
Karma: 4

Yes - that would be great.

We would have a word icon, excel icon, pdf icon, text icon. Eventually you would have an icon for each Mime type.

I realise you are busy - so just point me in the right direction and I can hack the code.

Later this might make a nice feature for other users - that is - have the option to show an icon, or filename, or icon and filename.

(Sorry to hear about Nice in today's news

- our thoughts are with you).

Just call me Chris

Last Edit: 15 Jul 2016 05:47 by organicwebs. Reason: spelling!

The administrator has disabled public write access.

Upload Files: How to show a file icon in grid view 15 Jul 2016 08:19 #14260

admin Offline Administrator Chef Posts: 3711 Thank you received: 984 Karma: 140	Yep. Not so Nice. State of emergency is extended.
	Coding is now a piece of cake The administrator has disabled public write access.

Upload Files: How to show a file icon in grid view 15 Jul 2016 12:32 #14263

organicwebs
Offline
Premium Member
Chris
Posts: 133
Thank you received: 21
Karma: 4

Hi Chef,

For a PDF file, file field, grid view, properties - when selecting thumb, a thumb is not actually created. Instead it shows the filename.

Same happens for word docs too.

I guess JCook cannot create a thumb of a pdf and doc files - but that is OK.

So instead of displaying the filename when a thumb cannot be created - can JCook show a generic file icon?

That is a quick fix and will probably do for most people.

If we want it changed, we can override it perhaps with CSS.

Just call me Chris

The administrator has disabled public write access.

Upload Files: How to show a file icon in grid view 15 Jul 2016 14:20 #14265

vlemos
Online
Elite Member
Posts: 295
Thank you received: 41
Karma: 21

Hello Chris

I think I had found a better way along time ago but don't currently have the time required to dig for it.

However, you may want to try the approach below and play with it to make it fit your needs.

Good luck
vlemos

Note: "datasheet-icon.png" must exist in <component front-end>/files/datasheet_image

<?php 
	$item = new stdClass();
	$item->datasheet = 'datasheet-icon.png';

	echo JDom::_('html.fly.file', array(
	'attrs' => array('center','format:png'),
	'dataKey' => 'datasheet',
	'dataObject' => $item,
	'height' => 32,
	'indirect' => false,
	'root' => '[DIR_DATASHEETS_IMAGE]',
	'route' => array('view' => 'datasheetitem','layout' => 'datasheetitem','cid[]=null'),
	'width' => 32
));?>

Last Edit: 15 Jul 2016 14:38 by vlemos.

The administrator has disabled public write access.

The following user(s) said Thank You: organicwebs

Upload Files: How to show a file icon in grid view 15 Jul 2016 17:55 #14269

vlemos
Online
Elite Member
Posts: 295
Thank you received: 41
Karma: 21

BTW: you can also create the same effect and eliminate the blank object in the view. Just add a select in the model like:

//SELECT
$this->addSelect('(SELECT \'datasheet-icon.png\') AS `datasheet`');

If you had an icon folder with your assets "[DIR_ICON_IMAGE]", you could change the icon-type by passing the name based on a condition.

$this->addSelect('(SELECT \'' . $icontype . '.png\') AS `_icon_image`');

Hope this helps, good luck
vlemos

The administrator has disabled public write access.

The following user(s) said Thank You: organicwebs

Upload Files: How to show a file icon in grid view 15 Jul 2016 18:10 #14272

admin
Offline
Administrator
Chef
Posts: 3711
Thank you received: 984
Karma: 140

<?php echo JDom::_('html.fly.file', array(
	
// The image (should also work with the ROOT path in the data value)
	'dataValue' => '[DIR_DATASHEETS_IMAGE]/datasheet-icon.png',

// The size. You do not call any attributes because your file is static file already optimized and in it correct sizes.
	'height' => 32,
	'width' => 32

// Still JDom is in indirect mode per default (will be changed for false in future) : False required
	'indirect' => false,

// For the link
	'route' => array(
            'view' => 'datasheetitem',
            'layout' => 'datasheetitem',
            'cid[]' => $item->id
        ),

));?>

Coding is now a piece of cake

Last Edit: 15 Jul 2016 18:10 by admin.

The administrator has disabled public write access.

The following user(s) said Thank You: vlemos, organicwebs

Upload Files: How to show a file icon in grid view 17 Aug 2016 17:49 #14463

organicwebs
Offline
Premium Member
Chris
Posts: 133
Thank you received: 21
Karma: 4

Hi Chaps,
Thankyou for your efforts on the JDOM, but this didn't work for me. I ended up with the text link again and no icon.

I wanted a pdf/file icon in the grid view - which when clicked would download the pdf.

But the dataValue attribute was a good tip - so I worked off that to develop my custom code...

if ($row->datasheet_pdf <> null){
	$link = "<a href='components/com_sqid/files/devices_datasheet_pdf/".$row->datasheet_pdf."'>
		<img src='components/com_sqid/files/datasheet-icon.png'>
		</a>";
	echo JDom::_('html.fly.file', array(
	'dataValue' => $link,
	'height' => 'auto',
	'indirect' => false,
	'preview' => 'modal',
	'width' => 'auto'
	));
}

And this is what I get...

When we click on icon, the file downloads.

I had to hardcode the path for my component ("components/com_sqid/files/devices_datasheet_pdf"). I wanted to avoid that.

How do I call up the path of [DIR_DATASHEETS_IMAGE] ?

Just call me Chris

Last Edit: 17 Aug 2016 17:53 by organicwebs.

The administrator has disabled public write access.

Upload Files: How to show a file icon in grid view 17 Aug 2016 19:21 #14466

vlemos
Online
Elite Member
Posts: 295
Thank you received: 41
Karma: 21

You can try this where $field->value is the file name

'root' => '[DIR_DEMO_IMAGE]',

<?php echo JDom::_('html.fly.file', array(
	'attrs' => array('center','format:png'),
	'dataValue' => $field->value,
	'height' => '32',,
	'indirect' => false,
	'root' => '[DIR_DEMO_IMAGE]',
	'width' => '32'
));?>

However, you will need an entry for DIR_DATASHEETS_IMAGE in:

com_demo/helpers/helper.php

/**
* Return the directories aliases full paths
*
* @access	public static
*
*
* @since	2.6.4
*
* @return	array	Arrays of aliases relative path from site root.
*/
public static function getDirectories()
{
     .
     .
     .

and in here:

com_demo/helpers/file.php

/**
	* Define the files directories fields
	*
	* @var array
	*/
	public static $directoriesFields = array(
		'Datasheets:image',

Never had to manually set it up from scratch so let me know if I missed something

BTW: it would be best to fork these routines

Good luck
vlemos

Maybe Admin can weigh-in on this and share the best way to establish an image directory.

Last Edit: 17 Aug 2016 19:27 by vlemos.

The administrator has disabled public write access.

The following user(s) said Thank You: organicwebs