Quick TIp: How to Add Graphic Badges to Member Profiles | Hey Stack! -- The Official Crowdstack Community

Blog

Quick TIp: How to Add Graphic Badges to Member Profiles

Rosemary O'Neill1/24/178:00 AM

Crowdstack

Rosemary O'Neill

Follow

Your community members are pretty awesome.

Have you ever wanted to give them a visual reward for being so awesome?

Hoop.la supports admin-editable profile fields, so you can create a Badge profile field and add flair to any member's profile instantly. (Those admin-editable fields can be used for private information too, like internal customer IDs or other "flags" you might want to put on your members.)

First, create your beautiful badge graphic.

Next, go to your control panel and click Basics > Profile Fields.

Click "add profile field." Choose Photo for the "field type."

You might want to drag the new field to the top of the list, if you have other custom profile fields visible on the member's profile page.

Name the new field (perhaps "Badges"). Make the new profile field Public, and admin-editable only.

To add a badge to a member's profile, just edit their profile and upload the badge as an image in the new custom profile field.

If you like my fantastically designed, (non) award-winning fake badge above, feel free to borrow it. Or share your own real designs here!

Happy 2017

Title image via Flickr CC: Alan Levine

Attachments

Show

Tags: Badge

Add Comment

Sign In To Comment

Comments (7)

Newest · Oldest · Popular

Valerie KristMember

@Rosemary O'Neill Thank you! that's what I was looking for.

Rosemary O'NeillProduct Evangelist Bug Hunter

@Valerie Krist if you want to add a large graphic like I showed above, yes it is still the best way. However, lots of people use small icons, inline with the member title, as a type of "badge." Here's an article that explains how to add a custom icon to member titles.

Valerie KristMember

Is this still the best way to add badges to profiles?

Rosemary O'NeillProduct Evangelist Bug Hunter

That is a cool idea, Julie, I'll make sure it goes into the "for consideration" hopper. We already do that with Database fields, so there's a precedent.

1/25/1711:16 AM

Julie UsherMember

Right, the collaging takes a lot more time though because people can have different combinations of badges. Wanted them all in one field, as the one field already takes up a ton of space in the member profile. Hope you will consider a gallery-style photo upload option here.

1/25/1711:04 AM

Rosemary O'NeillProduct Evangelist Bug Hunter

Julie Usher posted:
Nice idea. Is there a way to upload multiple badges to this same field? I have a situation where people can accumulate more than one honor and it would be nice to be able to accommodate at least 3 badges here.

Hi Julie! You could do that a couple of ways: first, you could just create three fields; second, you could collage the three images and upload them into the field as one image.

Julie UsherMember

Nice idea. Is there a way to upload multiple badges to this same field? I have a situation where people can accumulate more than one honor and it would be nice to be able to accommodate at least 3 badges here.

<div id="{%=id%}" class="reveal-modal small h-alert-modal-popup" data-reveal>
    <div class="first-modal-focus focus-utility-element" tabindex="0" aria-label="Inside Modal"></div>

<h4 id="{%=id%}_title" class="margin-bottom-10 popup-title"></h4>
    <div id="{%=id%}_body" class="margin-bottom-10 popup-body">
        </div>

<ul id="{%=id%}ButtonGroup" class="button-group h-popup-buttons even-button-group even-1">
    <li id="{%=id%}Okay_buttonContainer"><a id="{%=id%}Okay" href="javascript:void(0);" class="button success no-margin-bottom h-alert-modal-ok-button" role="button">OK</a><script type="text/javascript">
        (function() {
            function {%=id%}Okay_click(event, data) {
            {%=id%}Popup.hide();
        }
        
                $('#{%=id%}Okay').on('click', {%=id%}Okay_click);
        })();
    </script></li></ul><a href="javascript:void(0);" class="close-reveal-modal" aria-label="Close Modal">&#215;</a><div class="last-modal-focus focus-utility-element" tabindex="0"></div>
</div>
<script type="text/javascript">
        (function() {
            {%=id%}Popup = new SS.Popup.ModalPopup('{%=id%}');
        })();
    </script>