Description

I recently set up a page of downloadable resources for our staff and ended up creating a couple of re-usable Lava Shortcodes for displaying file metadata.

  • filesize takes a numeric size in bytes, converts it to the most human readable unit of measurement, and then outputs it in a clean format. For example, 100000 bytes becomes '97KB', 10000000 bytes becomes '9.5MB' and so on.
  • filetypeicon takes a file extension and outputs HTML for the appropriate FontAwesome icon.

How To

Set up is pretty simple. Just go to Admin Tools > CMS Configuration > Lava Shortcodes, click the plus icon at the top right, and then copy the following settings in for each of the shortcodes.


Friendly File Size

Friendly File Size shortcode settings

Here's the shortcode markup:

{%- assign m = 1024 -%}
{%- assign p = 10 -%}

{%- assign length = sizebytes | AsString | Size -%}
{%- assign trimmed = false -%}
{%- if length >= 10 -%}
    {%- assign trimLength = length | Minus: 6 -%}
    {%- assign sizeNum = sizebytes | Slice: 0, trimLength | AsDecimal | Plus: 1 | DividedBy: 100, p -%}
    {%- assign trimmed = true -%}
{%- else -%}
    {%- assign sizeNum = sizebytes | AsDecimal -%}
{%- endif -%}

{%- if sizeNum > 999999999 or trimmed and sizeNum > 9.99 -%}
    {%- assign fileSize = sizeNum | DividedBy: m, p | DividedBy: m, p | DividedBy: m, p -%}
    {%- if trimmed -%}
        {%- assign fileSize = fileSize | Times: 100000000 -%}
    {%- endif -%}
    {%- assign formattedSize = fileSize | Format:'#,##0.#' | Append:'GB' -%}
{%- elseif sizeNum > 999999 -%}
    {%- assign fileSize = sizeNum | DividedBy: m, p | DividedBy: m, p -%}
    {%- assign formattedSize = fileSize | Format:'#,##0.#' | Append:'MB' -%}
{%- elseif sizeNum > 999 -%}
    {%- assign fileSize = sizeNum | DividedBy: m, p | Ceiling -%}
    {%- assign formattedSize = fileSize | Format:'#,##0' | Append:'KB' -%}
{%- else -%}
    {%- assign formattedSize = sizeNum | Format:'#,##0' | Append:'B' -%}
{%- endif -%}
{{ formattedSize }}

File Type Icons

File Type Icon shortcode settings

Here's the shortcode markup:

{%- case ext -%}
    {%- when 'pdf' -%}{%- assign iconClass = 'far fa-file-pdf' -%}
    {%- when 'doc' or 'docx' -%}{%- assign iconClass = 'far fa-file-word' -%}
    {%- when 'xls' or 'xlsx' -%}{%- assign iconClass = 'far fa-file-excel' -%}
    {%- when 'zip' or 'rar' or 'gz' or 'tar' or '7z' or 'bin' or 'arj' -%}{%- assign iconClass = 'far fa-file-archive' -%}
    {%- when 'jpg' or 'jpeg' or 'png' or 'gif' -%}{%- assign iconClass = 'far fa-file-image' -%}
    {%- when 'mp4' or 'mov' or 'webm' or 'ogv' or 'avi' or 'wmv' or 'flv' -%}{%- assign iconClass = 'far fa-file-video' -%}
    {%- when 'mp3' or 'wav' or 'ogg' or 'aiff' or 'flac' or 'wma' or 'aac' or 'au' -%}{%- assign iconClass = 'far fa-file-audio' -%}
    {%- when 'ppt' or 'pptx' or 'potx' or 'pptm' or 'pps' or 'pps' or 'odp' -%}{%- assign iconClass = 'far fa-file-powerpoint' -%}
    {%- when 'htm' or 'html' or 'js' or 'css' -%}{%- assign iconClass = 'far fa-file-code' -%}
    {%- when 'csv' -%}{%- assign iconClass = 'far fa-file-csv' -%}
    {%- when 'txt' -%}{%- assign iconClass = 'far fa-file-alt' -%}
    {%- else -%}{%- assign iconClass = 'far fa-file' -%}
{%- endcase -%}

The included extensions are just the ones I quickly thought of off the top of my head, so there are probably some missing ones that are a lot more relevant than what I included. Leave a comment if you think of some I missed.