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?
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:
You'd have to adjust the width and height settings to match your thumbnails, and it might be cumbersome, but it would work.
<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>
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!
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!
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!
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)