WordPress.org

Forums

[resolved] PDF icon with pdf upload (18 posts)

  1. oldbag66
    Member
    Posted 7 years ago #

    when i upload a PDF with a post is it possible to have a PDF icon appear with it.

  2. 4k
    Member
    Posted 7 years ago #

  3. oldbag66
    Member
    Posted 7 years ago #

    ok its seems as if i can use the PDF icon according to their terms, any tips on how i can do this?

  4. Joni
    Member
    Posted 7 years ago #

    Download the small PDF icon here:
    http://www.adobe.com/misc/linking.html#producticons

    Save it to your hard drive and upload it to the /images directory of your theme.

    In your stylesheet, create a class:

    .pdf {
         background-color: #fff;
         background-image: url(images/pdficon_small.gif);
         background-position: bottom left;
         background-attachment: scroll;
         padding-left: 20px;
    )

    The left padding allows some air between the image and the link text, since the image is 17x17 pixels.

    When you want to link to a pdf file, just do this:

    <a class="pdf" href="http://yourcoollink.com">Your Cool Link</a>

    That should do it!

  5. 4k
    Member
    Posted 7 years ago #

    this is how I used the icons creating this site

    http://ndphklb.ca/?page_id=16

  6. Joni
    Member
    Posted 7 years ago #

    Why? That's kind of a klunky way to do it. For one thing, there's no need to link to the image as you have done there. And in any case, if all the file links on the page will be PDFs, there's no need for a PDF anchor image for each link. You can just put a blurb in your intro paragraph that says the newsletters are in PDF format and offer the link to download the free reader. Less clutter on the page. The technique I posted above works better when there are links on the page that are a mixture of doc types. :)

  7. oldbag66
    Member
    Posted 7 years ago #

    thanks for your replys, basically im setting it up so a user can upload the PDF newsletters as attachments to posts, this has to be simple and automated so the user doesnt have to think about code.

    Assigning the class sounds a good idea but i suppose it means the user has to enter HTML and my users wont have a clue about that.

    4K how did you do it on your site? what you have done is sort of what im trying to achieve but with posts.

    ta all.

  8. Joni
    Member
    Posted 7 years ago #

    Well if you dispense with the class code and just do what my other recommendation was, and that is to just note that all the links are to PDF files, which you need Adobe's free reader to view and print, then you really don't NEED that icon next to each link, do you? And your users don't have to enter anything but the link itself. Doesn't get more simple than that.

  9. 4k
    Member
    Posted 7 years ago #

    Not sure why the crankiness but I did it that way because most of the site users are older and as unnet savvy as you can get. It clearly defines each link and reminds them that it is a pdf.

    I offered simply as a one way it can be done. No doubt yours is way superior and I bow to your uber knowledge.

  10. Joni
    Member
    Posted 7 years ago #

    I wasn't being "cranky;" I was just asking why. I guess a lot of folks aren't used to being questioned about things, but if you had a reason for doing it that way, I just was curious about it. I didn't mean to appear cranky -- when I'm cranky I look like this:
    http://www.powhatananimalhospital.com/disease/rabid%20dog.jpg

    ... and I'm sorry if you misapprehended me.

  11. 4k
    Member
    Posted 7 years ago #

    sorry for the misunderestimating. :D

  12. Joni
    Member
    Posted 7 years ago #

    You're lucky I didn't see this earlier: "I offered simply as a one way it can be done. No doubt yours is way superior and I bow to your uber knowledge." :( Now personally, I think that's snarky and kinda mean spirited, especially given the fact that all I was trying to do was show you a different (not necessarily BETTER, that's up to YOU to decide) way of doing it. But .. whatever. :)

    There are as many ways of writing code as there are people to write it.

  13. oldbag66
    Member
    Posted 7 years ago #

    All ideas are welcome!

    Yes the point in the PDF icon is to make it clear what the file is withouth having to write PDF file etc next to the link.

    Ive found this:
    http://reidbeels.com/posts/2006/10/attachment-list-plugin/

    I need to look at it more but currently it'll display ANY attached file img/doc/pdf etc as what appears to be an attachment with a post with an icon, i need to customise it so it only applys to PDFs and DOCs.

  14. Joni
    Member
    Posted 7 years ago #

    Yep. I'd forgotten about that. I took a peek at this plugin and it appears that the attachments are driven by the stylesheet. So if you comment out the doc types you don't want, you should be okay. Worth a shot. Experiment on a *copy* of the CSS file of course. Or actually, it's trigged by what kind of file you upload, so if you never upload an actionscript file or WordPerfect file, it won't do anything. Make sense?

  15. oldbag66
    Member
    Posted 7 years ago #

    Ah i see i guess you are looking here:

    .attachment_list .zip a, .attachment_list .gz a, .attachment_list .gzip a, .attachment_list .bz a, .attachment_list .bz2 a, .attachment_list .rar a, .attachment_list .tgz a, .attachment_list .tar-gz a, .attachment_list .tar a, .attachment_list .gtar a, .attachment_list .cab a {
    	background-image: url(img/page_white_zip.png);
    }

    havnt tried it yet but it makes complete sense, ta for you help.

  16. fabie_r
    Member
    Posted 6 years ago #

    This is an automated way of having the pdf icon display on the left of your link.
    I tried many different plugins but I found this the best

    a[href$=".PDF"], a[href$=".pdf"] {
    	padding: 2px 2px 2px 20px;
    	background: url("images/pdficon_small.gif") left center no-repeat;
    }

    You will need to download a pdf icon and upload it to your images folder.

    Cheers

  17. danolsve
    Member
    Posted 6 years ago #

    Thanks fabie_r.
    That was exactly what I needed.
    Cheers!

  18. alst
    Member
    Posted 6 years ago #

    fabie_r's solution works fine except for ie6

    the below code, saved as a javascript file and linked to in your single.php file will add the icon to .pdf links in ie6 as well and won't conflict with the css attribute solution (thanks to Rebecca Murphey for the code)

    $(document).ready(function() {
    var fileTypes = {
      // extension: 'image file'
      doc: 'doc.gif',
      xls: 'xls.gif',
      pdf: 'pdf.gif'
    };
    
    // then, loop over the object
    // using jQuery's $.each()
    $.each(fileTypes, function(extension,image) {
      $('a[href$="' + extension + '"]').
        css({
          paddingLeft: '20px',
          paddingTop: '2px',
          paddingRight: '2px',
          background: 'transparent url("' + image + '") no-repeat center left'
        });
    });
    
    });

    Replace pdf.gif with the address of the icon you want. You may need to play around with the css rules as well.

Topic Closed

This topic has been closed to new replies.

About this Topic