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:
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:
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