Tip: Change + Custom Achievement Badges: UPDATED 15-06-20 WITH CODE + CUSTOM IMAGES

[Bizz]

To be honest I have never used this feature but I know some of you do and also noticed a post pop up in the activity feed about it so thought I would take a look. Ok so I have come up with a way for you to have your own custom badges, although this will need some custom code to add but will try and simplify it for easier insertion. NOTE: This is only for the main badges and not the little ones added to the member avatar image, still taking a look at that.

I will add the code in the next day or two here on this post after taken a look if can simplify it a bit. For now here are some demo images and you can also see them working on my site here

 

Here are some demo images .

Admin

HARLEY QUINN

BIZZ DEMO

PART 1

Replacing the existing default images for our own one/s

It is quite easy to do this with just a little code and our own images. First we need to add some images that we want to use into our file manger via Social Site Builder, Ning uses 64px size images so if you add ones that are bigger it will resize them down to fit. Below is a key of the images and thier numbers. Once added open note pad or  any text editor and copy the link or links of the images and pastw them into you text editor for later use

For a more in-depth instructions and Video you can see them on my site here: Replacing Achievement Images Part 1

 

So here is the code which will replace the Crown image number 1

<script>
// REPLACING ACHIEVEMENT IMAGES
x$(document).ready(function(){
// change the number for the image you want to change here ac_1.png so if 2 it would be ac_2.png
// Add your image in the part Your Image between the apostrophies
// Add a name for you image here after the // Image Description ( optional )

// Image Description
x$('.mrs-achievementIcon > img[src$="/ac_1.png"]').attr("src", " Your Image ");

});
</script>

To change it to another image in the list you simple change the number 1 to which ever image you are want to change. So for example if you want to change the Diamond image you would change ac_1.png  to  ac_4.png ( note you only need change the number )

 To add more images to our code we just add another line for our image and replace the image number as we did above, for example here is the code with two image changes in it to replace the crown and diamond

<script>
// REPLACING ACHIEVEMENT IMAGES
x$(document).ready(function(){
// change the number for the image you want to change here ac_1.png so if 2 it would be ac_2.png
// Add your image in the part Your Image between the apostrophies
// Add a name for you image here after the // Image Description ( optional )

// Image Description
x$('.mrs-achievementIcon > img[src$="/ac_1.png"]').attr("src", " Your Image ");

// Image Description
x$('.mrs-achievementIcon > img[src$="/ac_4.png"]').attr("src", " Your Image ");

});
</script>

 

 

Part Two

Adding your own images while still keeping the default ones also ( ie a bit like uploading your own )

The code is also available here: Achievement Images Part 2

This is the second part for adding your own custom images for the Achievement Badges. It is a seperate thing from Part 1 as that was for just changing the images from the ones you select in the Achievement Badges list. You can use both parts if you want as Part 2 will not affect Part 1.

So what this code will enable you to do is add your own images much like Part 1 except you do not have to select any of the Achievement Images from the list, think of it as uploading your own ones except they will not show in the list Ning provides.

To set it up all you need to do is first add your own images to your file manager in Social Site Builder then copy the links for the images as that is all we need to add into the code.

Next you go to your Achievements Page and add a new Achievement, you just need to give it a name and save, by default the first image in the list is selected but don't worry about that as we are going to change it anyway.

Next all we need to do is add that name into our code and also the link for our image. So let's say it was a chat logo and so we called the Achievement something like Chatterbox. We add it into the code where it says "Add-Name" like the example below making sure to keep the apostrophies " " either side with no spaces

// AWARD ONE
const awardName1 = "Chatterbox";

Next we just need to add our image link into the part which says "Add-Image" like this and also adding a little remark at the end after the two forward slashes so we know what image it is. Again for the link make sure you keep the two apostrophies each side of the link.

const awardOne = "https://storage.ning.com/topology/rest/1.0/file/get/5885860466?profile=original"; // Chat Image

So our completed section would look like this

// AWARD ONE
const awardName1 = "Chatterbox";
const awardOne = "https://storage.ning.com/topology/rest/1.0/file/get/5885860466?profile=original"; // Chat Image

You can change the image easily at a later stage by simply replacing the link for another image. You can also change the name but making sure you have changed the name in the Achievements part as well as they must be the same.

The code allows up to 10 custom images

To add the code to your site you just copy it and then add it to your Social Site Builder > Custom Code > End Of Page section.

 

 

<script>
x$(document).ready(function(){
// CUSTOM ACHIEVEMENT IMAGES

// The awardName is the name you added in the Achievement Page they must be the same

// AWARD ONE
const awardName1 = "Add-Name";
const awardOne = "Add-Image"; // image name after the forward slashes

// AWARD TWO
const awardName2 = "Add-Name";
const awardTwo = "Add-Image"; // image name after the forward slashes

// AWARD THREE
const awardName3 = "Add-Name";
const awardThree = "Add-Image"; // image name after the forward slashes
// AWARD FOUR
const awardName4 = "Add-NAME";
const awardFour = "Add-IMAGE"; //image name after the forward slashes

// AWARD FIVE
const awardName5 = "Add-NAME";
const awardFive = "Add-IMAGE"; //image name after the forward slashes

// AWARD SIX
const awardName6 = "Add-NAME";
const awardSix = "Add-IMAGE"; //image name after the forward slashes

// AWARD SEVEN
const awardName7 = "Add-NAME";
const awardSeven = "Add-IMAGE"; //image name after the forward slashes

// AWARD EIGHT
const awardName8 = "Add-NAME";
const awardEight = "Add-IMAGE"; //image name after the forward slashes

// AWARD NINE
const awardName9 = "Add-NAME";
const awardNine = "Add-IMAGE"; //image name after the forward slashes

// AWARD TEN
const awardName10 = "Add-NAME";
const awardTen = "Add-IMAGE"; //image name after the forward slashes

// No Need To Change Any Of This Unless Adding More Awards than 10
x$(".mrs-achievementTitle:contains('"+ awardName1 +"')").closest('.mrs-listColumn, .mrs-disabled').addClass('awardOne');
x$(".awardOne .mrs-achievementIcon img").attr("src", awardOne);
x$(".mrs-achievementTitle:contains('"+ awardName2 +"')").closest('.mrs-listColumn, .mrs-disabled').addClass('awardTwo');
x$(".awardTwo .mrs-achievementIcon img").attr("src", awardTwo);
x$(".mrs-achievementTitle:contains('"+ awardName3 +"')").closest('.mrs-listColumn, .mrs-disabled').addClass('awardThree');
x$(".awardThree .mrs-achievementIcon img").attr("src", awardThree);
x$(".mrs-achievementTitle:contains('"+ awardName4 +"')").closest('.mrs-listColumn, .mrs-disabled').addClass('awardFour');
x$(".awardFour .mrs-achievementIcon img").attr("src", awardFour);
x$(".mrs-achievementTitle:contains('"+ awardName5 +"')").closest('.mrs-listColumn, .mrs-disabled').addClass('awardFive');
x$(".awardFive .mrs-achievementIcon img").attr("src", awardFive);
x$(".mrs-achievementTitle:contains('"+ awardName6 +"')").closest('.mrs-listColumn, .mrs-disabled').addClass('awardSix');
x$(".awardSix .mrs-achievementIcon img").attr("src", awardSix);
x$(".mrs-achievementTitle:contains('"+ awardName7 +"')").closest('.mrs-listColumn, .mrs-disabled').addClass('awardSeven');
x$(".awardSeven .mrs-achievementIcon img").attr("src", awardSeven);
x$(".mrs-achievementTitle:contains('"+ awardName8 +"')").closest('.mrs-listColumn, .mrs-disabled').addClass('awardEight');
x$(".awardEight .mrs-achievementIcon img").attr("src", awardEight);
x$(".mrs-achievementTitle:contains('"+ awardName9 +"')").closest('.mrs-listColumn, .mrs-disabled').addClass('awardNine');
x$(".awardNine .mrs-achievementIcon img").attr("src", awardNine);
x$(".mrs-achievementTitle:contains('"+ awardName10 +"')").closest('.mrs-listColumn, .mrs-disabled').addClass('awardTen');
x$(".awardTen .mrs-achievementIcon img").attr("src", awardTen);

});
</script>

 

 

 

 

[Bizz]

I just added a post on the site as admin so now you will see all the badges in admin show up and not greyed out.

[Anto]

Hi Bizz,

this is just great! Any way you could share the code?

 

[⚡JFarrow⌁]

Wow just got back from out of town... Bizz... you've been busy!  looks awesome..  can't wait to learn how you did it!

[Bizz]

Yep! I got so many projects on the go lol, you probably won't see them workin on my site just now as taken the code out now I've tested it and now just writing it up ready to put here as there are a few options to choose from. It actually wasn't that hard to do but for sharing for others to use is more difficult to find the best way to make it easy to implement.

I've also changed the layout a little so that the titles don't get wrapped around if they are a little long ( I sent you that in an email )

Also there can be an option to have bigger images as at the moment they are stuck at 64px in width and height by default.

First option will be so that you can just replace a particular image of the ones that already exist, so you can choose one, two or more if you want. So the ones not chosen to be changed will still be the default ones selected.

The next option is to be able to still use the default ones but then also add your own as well ( in a way like uploading them )

Well hopefully should have the code all up in this post tomorrow ( Saturday )

[Bizz]

This has now been updated with the first part for Replacing the Achieve Images. Part 2 will follow for you to be able to add your own custom images ( a bit like uploading your own ) in due course.

[Bizz]

The second part for adding your own images ( much like uploading them ) has now been added.

[Bizz]

By the way in case anyone is wondering my site is a demo site but I will be opening it up for invites to try some of the tips out very soon like the Themes. I am in the process of making a main member site where I will be allowing members to join.

[Bizz]

Well thought I would get back to this tip on my site and use the tip to make changes to my awards for my Game Of Thrones theme. So I added some new icons and names, added some small ones under the header and some hidden ones in the header also. Those you can see when you move your mouse towards the header and if you hover over the small ones it show what that award is. Also in the main achievements section below if you move over the main icon it will change the text at the bottom to show what that award is for.

You can check it out here: https://jr-images.ning.com/members/bizz

[Anto]

hey Bizz, i tested the part 2 of your tip.. the image will not load. if i copy the image url and past it in the browser this one will return a Failed - No file download

 

any idea what the issue could be?

 

thanks

[Bizz]

Did you copy the image into your file manager and then copy the link from the file manager for the image ? One way to test the image is loading is go to your file manager and look for the image, under the filename column. Once found click on the link for that image in that column, the image should load into a brower window to view it. If it does not delete it then add it again to the file manage, test again and if ok copy that link for the newly uploaded image.