icon and filesize on links to media items

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Balram Narad 37 posts 89 karma points

Dec 05, 2022 @ 12:51

0

Icon and filesize on links to media items

We have recently had an accessibility audit and were told to add filesizes to all links to files. Is it possible to automatically add filetype icons and filesizes to media links.

For example, if an editor was to create a link to a pdf icon in the rich text editor the system would add a pdf icon and the file size automatically to the end of the link

Thanks

Balram

Copy Link
Huw Reddick 1929 posts 6717 karma points MVP 2x c-trib

Dec 05, 2022 @ 13:53

0

never heard that one before, indicating filtype yes, but not size!

adding a pdf icon wouldn't really help screen readers, you should probably just append the word PDF to the link title.

Copy Link

Huw Reddick 1929 posts 6717 karma points MVP 2x c-trib

Dec 07, 2022 @ 16:13

Hi Balram,

This is an example of how we display our links to documents

@{
    foreach (var upd in updates)
    {
        var linkurl = ((Umbraco.Core.Models.PublishedContent.PublishedContentWrapped)upd.Value("document")).Url;
        var filesize = ((Umbraco.Web.PublishedModels.File)((Umbraco.Core.Models.MediaWithCrops)((Umbraco.Core.Models.PublishedContent.PublishedContentWrapped)upd.Value("document"))).MediaItem).UmbracoBytes / 1024;
        DateTime issuedDate = upd.Value<DateTime>("issued");
        <div class="row">
            <div class="col-md-6">
                <div>
                    <div><strong>Reference:</strong> @upd.Value("title")<br><strong>Issued:</strong> @issuedDate.Date.ToString("MMM yyyy")<br><strong>Description:</strong> @upd.Value("description")</div>
                </div>
            </div>
            <div id="Contentplaceholder1_C650_Col01" class="sf_colsIn col-md-6" data-sf-element="Column 2" data-placeholder-label="Column 2">
                <div>
                    <div class="media">
                        <div class="media-left">
                            <span class="fa-stack fa-2x">
                                <i class="fa fa-file-pdf-o fa-2x"></i>
                                <span class="fa fa-stack-1x" style="color:red;">
                                    <span style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; height:26px;font-size:0.5em;margin-top:20px; margin-left:30px;background-color:red;color:#fff;padding-left:8px;padding-right:8px;">
                                        pdf
                                    </span>
                                </span>
                            </span>
                        </div>
                        <div class="media-body">
                            <div>
                                <a href="@linkurl" target="_blank" title="download @upd.Value("title")" rel="tooltip">@upd.Value("title") Download</a>
                                <span class="text-muted">(pdf)</span>
                            </div>
                            <span class="text-muted">@filesize KB</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr />
    }
}

Flag this post as spam?