How to link the file icon to the file and to hide the filename?

Question

I have uploaded files to be displayed in a table together with some other informations (title, tags etc). One row of this table the filename which links to the downloadable file. Next to the filename a file icon is displayed be daefault, which isn't linked.

That's how it looks now:

I want the filename to be hidden and the file icon linked to the downloadable file.

What functions would I have to override to make that happen? Or what other way may exist?

Answer 1

The problem with generic file display is that icon is not linkable, therefor a CSS solution is useless.

So in order to make the icon linkable you need to create another file display formate or alter theme_file_link

My solution is to add additional display formate, code as follow:

/**
 * Implements hook_field_formatter_info().
 */
function mymodule_field_formatter_info() {
  return array(
    'mymodule_link_icon' => array(
      'label' => t('Linkable icon'),
      'field types' => array('file'),
    ),
  );
}

/**
 * Implements hook_field_formatter_view().
 */
function mymodule_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items, $display) {
  $element = array();

  switch ($display['type']) {

    case 'mymodule_link_icon':

      foreach ($items as $delta => $item) {

        $file = (object) $item;

        $url = file_create_url($file->uri);

        $icon_directory = variable_get('file_icon_directory', drupal_get_path('module', 'file') . '/icons');

        $icon = theme('file_icon', array('file' => $file, 'icon_directory' => $icon_directory));

        $options['attributes']['title'] = check_plain($file->filename);

        $options['html'] = TRUE;

        $link_icon = '<span class="file">' . l($icon, $url, $options) . '</span>';


        $element[$delta] = $element[$delta] = array('#markup' => $link_icon);
      }

      break;
  }

  return $element;
}

After you implement the above code in a module and enable it, make sure to change field formatter option in your view to Linkable icon

Answer 2

Finally with a lots of help, I created a views-view-field--nameofmyview--nameofmycontenttypefield.tpl.php inside the sites/all/themes/mytheme/templates folder.

First I clicked on that link inside that view: There a lot of templates are suggested referring to different fields of that view. I had to choose and create one template as suggested from field content: file (id: nameofmycontenttype_field).

Every suggested template has another range, where to take effect. Clicking on field content: file (id: nameofmycontenttype_field) also shows you the default code you have to add to that template file.

As said in the beginning, I created views-view-field--nameofmyview--nameofmycontenttypefield.tpl.php and after some dpm($rows) and finding out which variables, obects and arrays I need I had to add the following code inside that template file:

<?php
if (!empty($row->field_nameofmycontenttype_field["0"]["raw"]["fid"])) {

  $file = file_load($row->field_nameofmycontenttype_field["0"]["raw"]["fid"]);
  $icon = theme("file_icon", array("file"=>$file));
  $url = file_create_url($file->uri);

  $output = l($icon, $url, array("html"=>true));

  print $output;
}
?>

...and that works fine for me. Clickable icons linking to the original file. Only visible in the frontend though, not in the backend preview.

That one helped me a lot, too: http://drupal.org/node/600798 (but it's for D6).

Answer 3

I tried a little trick to solve this. Cause I had the same problem.

• I override theme_file_link() and place the icon inside the .

• To hide the file name, I use CSS, and hide the text-link.

   function ufdesign_file_link($variables) 
   {
    $file = $variables['file'];
     $icon_directory = $variables['icon_directory'];
  
    $url = file_create_url($file->uri);
    $icon = theme('file_icon', array('file' => $file, 'icon_directory' =>            $icon_directory));
    // Set options as per anchor format described at
    // http://microformats.org/wiki/file-format-examples
    $options = array(
    'attributes' => array(
    'type' => $file->filemime . '; length=' . $file->filesize,
    ),
   );
  
    // Use the description as the link text if available.
   if (empty($file->description)) {
     $link_text = $file->filename;
    }
    else {
     $link_text = $file->description;
     $options['attributes']['title'] = check_plain($file->filename);
     }
      return '<a href=' . $url . '>' . $icon . ' <span class="file">' .    l($link_text,    $url, $options) . ' </span></a>';
    }
  

---

//And the CSS

.brochurelink {
 float: left;
 padding: 0.5em;
 text-align: left;
 width: 176px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 11px;
}

Answer 4

Edit file file.module in path /modules/file

Returns HTML for an image with an appropriate icon for the given file.

• @param $variables
• An associative array containing: -file: A file object for which to make an icon.
• • icon_directory: (optional) A path to a directory of icons to be used for files. Defaults to the value of the "file_icon_directory" variable.
• • alt: (optional) The alternative text to represent the icon in text-based browsers. Defaults to an empty string.

• @ingroup themeable

function theme_file_icon($variables) {
  $file = $variables['file'];
  $alt = $variables['alt'];
  $icon_directory = $variables['icon_directory'];

  $mime = check_plain($file->filemime);
  $icon_url = file_icon_url($file, $icon_directory);
  $url = file_create_url($file->uri); /*Thêm đường dẫn file */
  return '<a href='.$url.'><img class="file-icon" alt="' . check_plain($alt) . '" title="' . $mime . '" src="' . $icon_url . '" /></a>'; /* Thêm link vào icon */
}

Then using css to hide the filename. Thanks Mahyar Farshi for share.