lundi 30 mars 2015

Is there a Grunt Task to Add a Background Image to All Images in Folder?

Background


I have a large number of employee images for a website. Each one is a headshot, and the area around the head is transparent:


enter image description here


On the website, I apply a background-image to each img.



<img class="employee" src="employee_x.jpg" />

.employee {
background:url('employee_background.jpg') center center / cover;
}


It ends up looking like:


enter image description here


This lets me easily change out the images in the future, for all of them. Problem is, the background downloads first and the site owner is complaining that it looks fake when the background loads first.




Problem


I now need to combine all of them and resave the images, with the backgrounds and employee images saved together. I can do this with Photoshop or Paint.net, but it takes a lot of time to go through every single image.




Goal


I want it to take a folder with employee_background.jpg and all the other employee photos and then resave all of them into a production folder, using the background.



employees/john_smith.png
employees/sally_norton.png
employees/bill_miller.png
employees/employee_background.jpg

---->

employees/production/john_smith.png
employees/production/sally_norton.png
employees/production/bill_miller.png
employees/production/employee_background.jpg


Is there a Grunt task that can do this for me?


Aucun commentaire:

Enregistrer un commentaire