Support » Plugin: BadgeOS » Is it Possible to Change the Image Displayed for Unearned Badges?

  • Resolved kcurlsjr

    (@kcurlsjr)


    When using the Achievements List short code: [badgeos_achievements_list] in my BuddyPress site, a logged-in user sees all the possible badges they could earn. The ones they’ve already earned are in full color and the ones they’ve yet to earn are slightly greyed out.

    Question: Is is possible to replace the grayed-out image of the unearned badges with an entirely different image (perhaps the default one set for that achievement type)?

    The goal would be to make the associated image a surprise (or even a small reward for earning the badge) while still showing the users the necessary steps needed to earn said badge.

    Thanks

    https://wordpress.org/plugins/badgeos/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Michael Beckwith

    (@tw2113)

    The BenchPresser

    Hi kcurisjr,

    I’ve traced my way through the code, and the closest option I can find is one of the WordPress core hooks.

    return apply_filters( 'post_thumbnail_html', $html, $post_id, $post_thumbnail_id, $size, $attr );

    It’s going to take a number things that I can foresee:

    1. some regex in order to parse and change just the img src attribute
    2. checking the post ID to make sure it’s an achievement.
    3. checking if the user has earned the achievement or not.
    4. limiting the actual changing to just within the display of the shortcode.

    1-3 are easy enough if you’re familiar with theme/plugin development at all. 4 is going to be the most difficult, and I don’t have an answer for how to do that part myself.

    If you’re not a developer at all, then it’s definitely going to be a bigger mountain to climb I’m afraid.

    Thanks for the quick reply, Michael!

    I don’t have the technical wherewithal to implement your solution fully, but I was able to find a quick fix using CSS.

    We used the .user-has-not-earned and .user-has-earned classes to display our custom image.

    Michael Beckwith

    (@tw2113)

    The BenchPresser

    Whatever gets the job done, I say. Glad you were able to find something that worked.

    I know this is an old thread, but if you’re still around, how did you code your CSS? When adding the code below, the “earned” achievements display smaller than normal.

    .user-has-not-earned .badgeos-item-image {
      display: block;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background: url(https://myurl) no-repeat;
      background-size: 100px 100px;
      width: 100px; /* Width of new image */
      height: 100px; /* Height of new image */
      padding-left: 100px; /* Equal to width of new image */
    }
    
    .user-has-earned .badgeos-item-image {
    	background: url();
    	padding-left: 0px;
    }

    Answering my own question… I used a different method for bumping the original image. Still can’t figure out how to use a fluid method, so I’m stuck with sizing and positioning on both desktop and mobile themes. Here’s what I used, which looks much better than the CSS used above:

    .user-has-not-earned .badgeos-item-image {
    	width: 100px;
    	height: 100px;
    	background: url("https://myurl") no-repeat;
    	background-size: 100px 100px;
      	background-position: 10px 0;
     	text-indent: -9999px;
    }
    
    .user-has-earned .badgeos-item-image {
    	background: url();
            text-indent: 0;
    }
    Michael Beckwith

    (@tw2113)

    The BenchPresser

    Still needing help on any part blazeking? or were you just posting for documentation sake for others?

    Finally learned how to use @media sections in CSS for fluid image sizes. Thank you for the awesome plugins and support Michael!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Is it Possible to Change the Image Displayed for Unearned Badges?’ is closed to new replies.