How do I customize Display Suite?

Question

I know that Display Suite change its features due to limitation of PHP script within DS in Drupal 8.

What I want is customize the uploaded file which display something like this:

Code File: sample_file.zip

Into:

Download Code

In which, Download Code is a link the same with the original output as sample_file.zip.

I created a token field in Display Suite and put the following code to no avail:

<a href="[node:field_code_file]">Download Code</a>

The output of this is a plain text:

<a href="/drupal8/sites/default/files/2016-11/sample_file.zip">Download Code</a>

Instead of Download Code.

So, how can I link the downloadable File as shown in the image below into something like Download Code with the original link of the file?

Answer 1

The File output (Generic File) is rendered from "file-link.html.twig" template file. To update the Link Text, you can override template_preprocess_file_link() in your theme's themename.theme file. So suppose if my theme name is bartik then function name will be bartik_preprocess_file_link(). Check example below:

use Drupal\Core\Template\Attribute;
use Drupal\file\Entity\File;
use Drupal\Core\Url;

/**
 * Implements hook_preprocess_HOOK() for file-link.html.twig.
 */
function [THEME_NAME]_preprocess_file_link(&$variables) {
  $file = $variables['file'];
  $options = array();

  $file_entity = ($file instanceof File) ? $file : File::load($file->fid);
  // @todo Wrap in file_url_transform_relative(). This is currently
  // impossible. As a work-around, we currently add the 'url.site' cache context
  // to ensure different file URLs are generated for different sites in a
  // multisite setup, including HTTP and HTTPS versions of the same site.
  // Fix in https://www.drupal.org/node/2646744.
  $url = file_create_url($file_entity->getFileUri());
  $variables['#cache']['contexts'][] = 'url.site';

  $mime_type = $file->getMimeType();
  // Set options as per anchor format described at
  // http://microformats.org/wiki/file-format-examples
  $options['attributes']['type'] = $mime_type . '; length=' . $file->getSize();

  // Use the description as the link text if available.
  if (empty($variables['description'])) {
    // Add new Link text here.
    $link_text = 'Download Code';
  }
  else {
    $link_text = $variables['description'];
    $options['attributes']['title'] = $file_entity->getFilename();
  }

  // Classes to add to the file field for icons.
  $classes = array(
    'file',
    // Add a specific class for each and every mime type.
    'file--mime-' . strtr($mime_type, array('/' => '-', '.' => '-')),
    // Add a more general class for groups of well known MIME types.
    'file--' . file_icon_class($mime_type),
  );

  // Set file classes to the options array.
  $variables['attributes'] = new Attribute($variables['attributes']);
  $variables['attributes']->addClass($classes);

  $variables['link'] = \Drupal::l($link_text, Url::fromUri($url, $options));
}

Or, you can create a custom field formatter which can be selected on Managed Display Page. as per example provided here, Create a custom field formatter.