Display custom style on PDF type links from CMS

Design help Custom code
1

Is there any way to display the ‘file type’ in a link?

For example, if I have a link to a .pdf file - can it be recognised as: filename [PDF].

Appreciate any help, thanks!

2

You could add a combo class manually to an element and style away. It’s possible to also use custom code to style all links that include a .pdf extension.

3

Thanks @webdev.

I am attempting to get the effect as shown below (Icon, file name and extension type) - but working from a Collection List. The only way I can see to achieve this is to add three fields in the list:

  1. File Upload
  2. File Name
  3. File Type

I then use Conditional Visibility to select the icon and file type. This is not ideal as I require three fields per file (so to allow for 10 files requires 30 fields) - was wondering if there is an easier way?

example
example758×206 30.1 KB

4

Create a class on a link block. Example pdfdoc. Style as desired.

Add custom code to before body close.

<script>
$( document ).ready(function() {
    $('a[href$=".pdf"]').addClass('pdfdoc');
});
<script>

jQuery will add your class to each link that exists on the page. The class will style the link.

1 Like