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.
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;
}
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!
