Uploaded image for project: 'phpBB'
  1. phpBB
  2. PHPBB-16497

Large filenames overflow on other columns in the UCP attachments table

XMLWordPrintable

      It's not rare for filenames to have numerous characters without space (ex: files downloaded elsewhere from the web and, then, uploaded to the board). Often, regular spaces are replaced by underscore (_).  The result is there is no natural line breaking in the filename.

      In the attachments table (User Control Panel), it can create a hideous overflow (see the attached screenshot "before_modification.png"). The content of next columns - number of downloads and post time - could become barely readable.

      Here is the problematic part in ucp_attachments.html template file:

      <a href="{attachrow.U_VIEW_ATTACHMENT}" class="topictitle attachment-filename ellipsis-text" title="{attachrow.FILENAME}">{attachrow.FILENAME}</a>
      

      Although "ellipsis-text" is an associated class, it doesn't work at all (at least with Edge, and probably with any other Blink-based browsers such as Chrome).

      The wrong overflow disappears simply by removing the ellipsis-text class (see the attached screenshot: "faultry_css_class_removed.png").

      To recreate an ellipsis effect with long names, there is an alternative way : phpBB template engine is now compatible with twig syntax. You can replace the {attachrow.FILENAME} with a twig expression, like below (it's just an example, you probably can use a somewhat different expression)

      <a href="{attachrow.U_VIEW_ATTACHMENT}" class="topictitle attachment-filename" title="{attachrow.FILENAME}">{{ attachrow.FILENAME|length > 20 ? attachrow.FILENAME|slice(0, 20) ~ '...' : attachrow.FILENAME }}</a>
      

      Filenames with more than "x" characters (20 in the example) will be truncated and an ellipsis will add. The results can be seen in the attached screenshot "ellipsis_twig.png".

      Another solution is obviously recreate that effect by changing the outpout of {attachrow.FILENAME} : no change in template file, except the remove of ellipsis-text class, change in PHP files of phpBB instead.

       

        1. before_modification.png
          48 kB
          Big Monstro
        2. ellipsis_twig.png
          44 kB
          Big Monstro
        3. faultry_css_class_removed.png
          76 kB
          Big Monstro

            Unassigned Unassigned
            Big Monstro Big Monstro
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated: