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>
Replies
yep, tried as per your tip and also double checked that the image was available at the link generated by ning, but same result
Could you share the code you added so I can take a look, ive sent a friend request in case you don't want to share it here.
thank you Bizz
just sent it to you
Looking into it for you, by the way is it just the one badge you want to change or multiple ? I ask becuase if it's just one badge then can write some code just for that badge.
Ok here is some updated code which I have tested on my site and works ok
<script>
x$(document).ready(function(){
const awardOne = "https://storage.ning.com/topology/rest/1.0/file/get/7963211077?profile=original";
x$('.mrs-achievementTitle:contains("badge1")').closest('.mrs-listColumn,.mrs-disabled').addClass('awardOne');
x$(".awardOne .mrs-achievementIcon img").attr("src", awardOne);
});
</script>
-
1
-
2
of 2 Next