Current status of the Ning Platform is always available on the Ning Status Blog.

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

5778666498?profile=RESIZE_710xHARLEY QUINN

5778676698?profile=RESIZE_710xBIZZ 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

 

5947344882?profile=RESIZE_710x

5947223866?profile=RESIZE_400xSo 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>

 

 

 

 

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 1
Email me when people reply –

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>

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

⚡JFarrow⌁ replied to Ana Massien's discussion
Emoji work in module headers and newsfeed
"anywhere except for inside the HTML itself."
9 hours ago
⚡JFarrow⌁ replied to Ana Massien's discussion
Front end edits
"Most likely not"
9 hours ago
⚡JFarrow⌁ updated their profile photo
10 hours ago
Ana Massien replied to Ana Massien's discussion
Possibly Ning 2 or Ning 1.5
"Dood we have not even spoke in this thread since June 2020. I don't see why you came to bump it…"
11 hours ago
Ana Massien replied to Ana Massien's discussion
Possibly Ning 2 or Ning 1.5
"My name is Ana, not Ann. Ning's earlier days, before the 2.0. Some the elgg layouts correspond to…"
11 hours ago
Rosas † Negras replied to Ana Massien's discussion
Possibly Ning 2 or Ning 1.5
"De nada"
yesterday
Ana Massien posted a discussion
  You can add emoji from a browser extension or emojipedia.com (and copy and paste it) into module…
Monday
Ana Massien posted a discussion
For mods and admins, will 3.0 ever be able to have the front end edit buttons like ning 2.0…
Monday
Ana Massien updated their profile
Monday
Lea Bouillet updated their profile
Sunday
Rosas † Negras replied to Rosas † Negras's discussion
Style your View all buttons by touch by changing two colors
"Bizz 
these are the points impossible to reach without these codes"
Saturday
Rosas † Negras replied to Rosas † Negras's discussion
Style your View all buttons by touch by changing two colors
""
Saturday
More…

Meanwhile, you can check our social media channels