I'm looking for any suggestions on how to gracefully handle this situation:

I need a way to have a user upload two different profile images with different size constraints placed on them dependent on which template the user is currently using. Then, these two images will appear on different pages in the site. One will be used as a splash / landing page image, the other to appear on a user profile page. (this user is kinda of an admin of the site, though not the super admin. But the site will be there main site, hence the splash and profile images being tied to them)

The way I envision the user experience is as such:

User goes to edit their profile.
User uploads the photo they want to be used as the splash image. The splash area will have a sample image in its place until this step is completed.
User uploads the photo they want for their profile page.
User saves and viola! All the hard work was done behind the scenes.

Behind the scenes the following needs to happen:
Both uploaded photos get saved somewhere (obviously)
Something checks to determine what the current template is ($theme) and resizes the uploaded photos accordingly. (the user could be uploading a large photo, so we don't want to just scale the image with HTML)

I've tried this using the ImageCache_Profile which kinda of worked but didn't do everything I wanted it to.

I've tried using the nodefamily/usernode/nodeprofile modules, but it didn't make much sense to me, and I haven't been able to find any decent documentation on using them.

I want to avoid hacking the User module if at all possible, though this could be done if need be. I could brute force this solution but I figured there has to be a simpler, more elegant solution to this problem.