This new solution involves creating an efficient grid of low resolution images to source the fun images that get individually get converted to their high resolution version before getting swapped on hover.
https://affiancefinancial-dev.us1.advisor.ws/admin/content/block/42?destination=/node/1349
Affiance Financial, one of our most demanding clients had a system in place that automatically swaps the image of the advisor or team member for a different one in a more informal pose.
The Opportunity:
The system that was in place required constant qualified interaction of the support team due to the fact that every change needed to be hard-coded on the JS of the website and broke constantly after various types of minor updates like changing a regular profile picture or adding a new team member.
The core of the challenge was to avoid having a function like the one below per team member.
jQuery('img[src*="/andy_fishman-professional"]').not('.schedule-a-meeting img[src*="/andy_fishman-professional"]').hover(
function() {
jQuery(this).attr('srcset', '/files/andy_fishman-fun_0.jpg').attr('src', '/files/andy_fishman-fun_0.jpg')
},
function() {
jQuery(this).attr('srcset', '/sites/affiancefinancial.us1.advisor.ws/files/styles/portrait_500x600/public/images/andy_fishman-professional_0.jpg').attr('src', '/smaites/affiancefinancial.us1.advisor.ws/files/styles/portrait_500x600/public/images/andy_fishman-professional_0.jpg');
}
);
The solution required:
- Backwards compatibility with the old code for the transition period.
- Give the control to the client directly.
- Easy effortless workflow for the client
- Prevent future errors and have an easy detection of where they are if present.
- Avoid any type of hard coding for new entries.
- Cannot interfere with the regular operation of the live site.
The accepted solution is the grid below ,the client only needs to place the new fun image of the team member in the available spots in the grid without any additional type of setup on their part.
The only requirement is that they follow their own convention of adding the name of the team member as part of the fun image file but it does not have to be in any exact format or avoid having other words or signs.
When there is no equivalent on the original code or the new grid , the image turns into a reddish turn instead but only for client when they are logged in.
If there is ever an issue with the info obtained from the picture like a name change , the correct name can be introduced as a property of the photo.
Labelling the advisors for organizational purposes is possible yet not required and won’t break the widget
