How do I add a PDF icon next to all PDf file links?

By robshambaugh on 11 Dec 2012 at 16:12 UTC

I am looking for a module which will add a PDF icon next to all PDF links. It would be nice if it did the same for other file types (word, excel, powerpoint, etc.). I'm pretty sure I've seen a module like this before, but I can't seem to locate one. Any ideas?

Comments

Not sure about a module, but

NotGoddess commented 11 December 2012 at 17:20

Not sure about a module, but it's easy to implement in your theme's css.

a[href$=".pdf"]
{
  padding-right: 18px;
  background-image: url(/path/to/pdf-icon.png);
  background-position: 100% 50%;
  background-repeat:no-repeat;
}

a[href$=".pdf"]:after 
{
  content: url(/path/to/pdf-icon.png);
  padding-left:2px;
}

I'm unique, just like everybody else.
If I helped, please pay it forward, backward or sidelong.

Thanks! That does the trick.

robshambaugh commented 11 December 2012 at 19:33

Thanks! That does the trick. I was trying to make it more complicated than it was.

Any idea how I can make it so it doesn't add the background image if .pdf file is being linked form an image, but only from a text link?

<a href="/path/to/file.pdf"><img src="/path/to/image.jpg"></a>

.. is also trying to add the .pdf background image. How do I get rid of that?

ergh. So some are marked and

NotGoddess commented 12 December 2012 at 00:01

ergh. So some are marked and some aren't?
CSS won't handle doing something to a parent element on the conditional presence of a child. You could use some js, but...
Simplest would probably be to just hide images with the icon img src... like:

a[href$=".pdf"] > img[src="/path/to/image.jpg"]
{
  display:none;
}

That will match img tags with that src attribute that are immediate children of the matching a/href to not display.

I'm unique, just like everybody else.
If I helped, please pay it forward, backward or sidelong.

Hmmm. That didn't seem to

robshambaugh commented 12 December 2012 at 19:32

Hmmm. That didn't seem to work. I'm not sure what you mean by "some are marked and some aren't?"

---

cfox612 commented 12 December 2012 at 19:37

Ideally you'd create a custom template page and write some php code to check the file extension and add the appropriate icon. You'd then also be able to check to see if the link is text (add the icon), or an image (don't add the icon).

I took your prev. reply to

NotGoddess commented 13 December 2012 at 11:34

I took your prev. reply to mean you have some links like (attributes not needed for this expl. removed for brevity):
<a href="/path/to/file.pdf">PDF Title</a>
and some like
<a href="/path/to/file2.pdf">PDF Title 2 <img src="/path/to/icon.png" /></a>

Now in this case, the CSS to hide that 2nd image would be:

a[href$=".pdf"] > img[src="/path/to/icon.png"]
{
  display:none;
}

note- the src has to be the exact src attribute, not the filler, so a real life example:
<a href="/path/to/file2.pdf">PDF Title 2 <img src="/sites/all/themes/mytheme/images/pdf-icon.png" /></a>
The CSS would have to be one of the following to match:

a[href$=".pdf"] > img[src="/sites/all/themes/mytheme/images/pdf-icon.png"],
a[href$=".pdf"] img[src="/sites/all/themes/mytheme/images/pdf-icon.png"],
a[href$=".pdf"] img[src$="pdf-icon.png"],
a[href$=".pdf"] img[src$="mytheme/images/pdf-icon.png"]
{
  display:none;
}

The 2nd not requiring it be an immediate child, the 3rd just checking the actual filename, not the path; could conflict if you have multiple files in different paths, but useful if you aren't sure how the src is written, e.g. sometimes relative, sometimes absolute. 4th trying to do the same but adding a bit of the path that you know will be present.

I'm unique, just like everybody else.
If I helped, please pay it forward, backward or sidelong.

Well, here's the simple

robshambaugh commented 17 December 2012 at 14:47

Well, here's the simple solution I ended up using...

For any images that were linking to a PDF file, I didn't want the extra .pdf icon to appear next to it (mainly because it was throwing off the alignment of other elements nearby. I only wanted the .pdf icon to appear next to text links. I used NotGoddess' suggestion and created the new CSS class to style all of the links, but I created a new class called .imgtopdf with a style of {background-image: none; padding: 0}. Then I simply apply that class to any image link which points to a pdf file. It's a pretty simple solution since there are just a handful of images throughout my site which point to pdf file.

Thanks so much for all you help!