Implement Partner Logo Badges

PHOTO EMBED

Sat Jan 08 2022 03:49:33 GMT+0000 (UTC)

Saved by @rebukt #javascript #css

/*-- css for partner tier styles --*/
.tier_level {
     height: auto;
     float: right;
     padding-right: 10px;
}
.tier_level img {
    height: 65px;
    width: auto;
    position: absolute;
    top: -3px;
    right: 275px;
}
@media only screen and (max-width: 600px){
  .tier_level img {
      right: 50px;
      top: 1px;
      height: 55px;
  }
}
 
 
 
// JS to display logos based on group
jQuery(document).ready(function ($) {
 
    var isLoggedIn = !!$(".logged-in").length;
    var myGroups = isLoggedIn ? abUser.group_id : [];
 
    function partnerTierFunction() {
      // set up DOM
      $("#header .wrapper").append('<div class="tier_level"></div>');
      // create object for partner tiers
      var myTier = {
        "19": {
          name: "Steel",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233007/BS_Badge_Steel_White.png"
        },
        "23": {
          name: "Cobalt",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233001/BS_Badge_Cobalt_White.png"
        },
        "24": {
          name: "Sky",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233005/BS_Badge_Sky_White.png",
        },
        "25": {
          name: "Sapphire",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233003/BS_Badge_Sapphire_White.png",
        },
      };
 
      // check if the user is in a tier group
      for (var i = 0; i < myGroups.length; i++) {
        // associate tier label to group values
        var groups = myGroups[i];
        var tier = myTier[groups];
        // populate DOM with tier label
        if (tier !== undefined) {
          var $z = $("div.tier_level");
          $z.append('<img src="' + tier["image"] + '">');
          break;
        }
      }
    }
 
    function visibilityDriver() {
      visScenarios.forEach(function(scenario) {
        if (scenario.condition) {
          scenario.outcome();
        }
      })
    }
    
    var visScenarios = [
      {
        condition: isLoggedIn,
        outcome: function () {
          partnerTierFunction();
        },
      },
    ];
    visibilityDriver();
 
}); // end ready function
content_copyCOPY

Request: Set up badges as the secondary logo according to the partner type on the Company Form. Ensure a group is created for each partner type Upload the logos under media library (on the back end) Implement the CSS to create the space where we are displaying the images Implement the JavaScript to show a logo, based on the partner type