tristanojbacon tristanojbacon - 4 months ago 9
PHP Question

If an <a> link is a PDF file, style accordingly

I am working on a website for a client, who is an exam board. They have a number of content pages with summary details about their syllabuses, and need to link directly to PDF Syllabus files from within the text.
There is also a page just for PDF files, and I am currently making those Custom Post Types in WordPress, but those have their own icon setup that I don't want being affected by the PHP rule that I'm about to describe.
(This is more of a PHP question than a WordPress question, so don't worry.)

Let's say I have a link, New Syllabus. With WordPress, one is unable to add a class to the link, without knowledge of HTML, which in the case of my client and its rather old-school employees, is non-existent. They will be shown how to add links to PDF files using the Add Media button in the WordPress post or page editor, which will simply create a link to the .pdf file. This issue here is that it's just a link, and the client wants users to immediately know that it's a PDF file, and not a page, to make it easier to find the relevant syllabus files. Therefore, I've proposed creating a rule that adds a .png icon next to any link that is linking to a .pdf file, and it'll change the link colour as well.

Does anyone have any idea how I could achieve this? I've looked for WordPress plugins that do this automatically, but they're either outdated or hard to use (i.e., employees will need HTML knowledge to restyle the links.)

I found this code snippet online, but don't know if it's the right sort of direction.

$whitelist = array(".pdf");

foreach ($whitelist as $item) {

if (preg_match("/$item\$/i", $_FILES['uploadfile']['name'])) {

}
else {

redirect_to("index.php");
}
}


Thoughts?

Answer

This can be done with just CSS and it supports all major browsers including IE7+. There is no need to add any extra classes or <img> elements.

The CSS below will target any link to a .pdf, change the link color, give it some left padding and apply a background image in the space created:

a[href$=".pdf"] {
    background: url(images/pdf-icon.png) no-repeat 0 50%;
    padding-left: 25px;
    color: red;
}

Demo: http://jsfiddle.net/xuBpG/1/