www.webdeveloper.com
Results 1 to 4 of 4

Thread: colour tinting thumbnails

  1. #1
    Join Date
    May 2011
    Posts
    8

    colour tinting thumbnails

    Hi, i'm not sure this is posted in the correct place so feel free to move it if you think otherwise! I have a fully working WP managed website and I am using a Nextgen plugin for the gallery, I am basically wanting to tint my thumbnails but cant figure out a good way of doing it...The thumbs need to be clickable and im not fussed about a rollover effect, I just need to devise a way of tinting them either on upload or a filter through css?

    Anybody have a good idea?

    Thanks

    A

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    The only way to do this with pure CSS would be to overlay the thumbnail image with a translucent image of the appropriate tint using position:absolute and z-index with something like:
    Code:
    <p style="position:relative; z-index:1; width:120px; height:120px;">
    <img src="thumbnail.jpg" style="position:absolute; top:0; left:0; z-index:1;">
    <a href="destination.html"><img src="tint.png" style="position:absolute; top:0; left:0; z-index:2;"></a>
    </p>
    You'd have to adjust the width and height settings to match your thumbnails, and it might be cumbersome, but it would work.

    If you can do some PHP programming, it would be simpler to create a script that would tint the thumbnail image as needed. There's a sample script in the comments section at http://php.net/manual/en/function.im...orallocate.php that you could use as a basis for such a script. Good luck!
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    May 2011
    Posts
    8
    Thanks rtretheway, I tried the first method which does work for me, however like I said it doesnt match with the amount of thumbs generated all the time. I would be willing to give the PHP option a go, just need to figure out exactly how it all works!

  4. #4
    Join Date
    Mar 2011
    Posts
    1,139
    I don't understand what you mean by it "doesn't match with the amount of thumbs generated". If you mean that you can't apply a single CSS class to the code because the size of the thumbnail images varies, you're right. That's why I think a software solution is probably best.

    If you're already generating your thumbnails dynamically, you could simply alter that script to add a tint. If the thumbnails are already created, then you just need to change your code to call a script to tint the image before serving it to the user. You can either change the 'src' attribute in the <img> tags to point to the script or, if the thumbnails are in a special directory within your site, it's easy enough to add an instruction to your .htaccess file to intercept the HTTP requests for those images and send it to the tinting script. Lots of automatic watermark (shameless plug) scripts work that way. You shouldn't have any trouble seeing how those scripts work and modify them to suit your needs. Good luck!
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles