/    Sign up×
Community /Pin to ProfileBookmark

colour tinting thumbnails

Copy linkTweet thisAlerts:
Oct 31.2011

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

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@rtretheweyNov 01.2011 — 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:
<i>
</i>&lt;p style="position:relative; z-index:1; width:120px; height:120px;"&gt;
&lt;img src="thumbnail.jpg" style="position:absolute; top:0; left:0; z-index:1;"&gt;
&lt;a href="destination.html"&gt;&lt;img src="tint.png" style="position:absolute; top:0; left:0; z-index:2;"&gt;&lt;/a&gt;
&lt;/p&gt;

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.imagecolorallocate.php that you could use as a basis for such a script. Good luck!
Copy linkTweet thisAlerts:
@dillydally2095authorNov 02.2011 — 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!
Copy linkTweet thisAlerts:
@rtretheweyNov 02.2011 — 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 [url=http://www.rainbodesign.com/pub/watermark/]automatic watermark[/url] (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!
×

Success!

Help @dillydally2095 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...