3

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:

enter image description here

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?

  • 1
    I haven't got anything handy to test on, but for a quick fix you might try hiding the text with CSS, e.g. #table-id .column-class a { display: inline-block; text-indent: -9999em; }. The text will still be read by screen readers which would probably be beneficial – Clive May 8 '13 at 16:50
5

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

  • Ah I see, that would be the clean solution: adding another field formatter which would be availabe as an option globally. – leymannx May 10 '13 at 11:03
  • @koivo Yes exactly – Aboodred1 May 10 '13 at 14:09
  • Your idea is good but this module isn't useful for me. When I enabled the module the code was printed in all pages of my website and an error was registered when I tried to edit my view. – cabita Oct 31 '14 at 4:09
  • @cabita can you create a new question for your issue and I'll try to answer it, just make sure to point it out to me, when you post your question. – Aboodred1 Oct 31 '14 at 14:20
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: drupal 7 view theme information 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).

1

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;
}
-1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.