Plugin for mps to insert based on requirements [DONE]

[₪» ⅀ ƪ Ƒ «₪]

I currently am using a mixture of {if} and {foreach} statements in my layout templates to make a badge system on my site. There are a few types I am using that go as follows:

Type 1: If a certain box is checked in the custom profile fields in edit profile, then a designated image appears.
Type 2: If a certain profile field has a number equal to or higher than ____ (varies per field), then a designated image appears.

Each image that appears is 1) specifically chosen for the field, 2) comes with a unique title hover for each image, and 3) some are clickable to specific link destinations. None of it varies by individual, only by the image/field.

While this method works splendidly for me, I do not have enough room in my layout template to hold it all anymore. I maxed out my code. I am looking for a surrogate plugin that will let me achieve the same thing. No current plugin would work, so please do not suggest the trophy or award plugin even though "badge" may make you think of them.

In the plugin settings, I need to be able to customize the following settings for each entry, and there needs to be a fair amount of entries available:

1. Insert an image
2. Insert a title hover
3. Optional; insert a link (not required for every entry)
4. Pick which custom profile field it relies on
5. Pick if it appears simply because a box is checked (in the custom profile field under "edit profile > personal," not within the plugin itself) or if it appears because the custom field value is of a certain number or higher
5A. If the latter, I need to be able to set which number it requires to be equal to or higher than

Then, I need the ability to target where it goes in the mini-profile layout template, most likely with a DIV class. A simple <div class="badges_here"></div> or something like that. They would then be listed side-by-side; no need for popups or anything.

If this is possible, please let me know, I greatly appreciate the assistance!

[₪» ⅀ ƪ Ƒ «₪]

Bump =)

[Brian]

Technically you could use the Custom Mini-Profile Creator plugin to accomplish this without outright replacing your existing mini-profile now that it includes a Default option that applies to all mini-profiles on the forum. The only prerequisite is that you'll need to add a bit of HTML to the end of your mini-profile layout template so it can get the values of your template variables (namely your custom fields). If you need it exclusively for the custom field behavior and nothing more this is all you would need to add to the end of your mini-profile template rather than what the plugin instructs you to add:

<div class="mp-info-holder" style="display: none;">
{foreach $[user.mini_custom_field]}
<div class="mp-info $[user.mini_custom_field.content_class]">$[user.mini_custom_field.value]</div>
{/foreach}
</div>

With this included in your template the plugin can reference all of your custom fields based on their names, so if you had a custom field named Title Hover Text you could reference it in the Javascript component of the plugin using this:

user.titlehovertext

This pretty much mimics what any other plugin would have to do since they'd inevitably use Javascript to accomplish this, but all of the leg work is already done to acquire your custom field data. The plugin just needs you to specify what to do with that data.

It's pretty easy to specify a placeholder in the plugin as well. If you have a custom field named Badges this would add that custom field's value to an element with the class badges_here like in the example you provided at the end of your post.

$(this).find('.badges_here').append(user.badges);

[₪» ⅀ ƪ Ƒ «₪]

Brian alright...
I super-duper-wuper appreciate the help! I'll admit this is, errr, over my head and I'm kinda spinning in circles, which is why I've taken this long to respond since I was trying to figure it out and find time to work on it before coming for help. But the inevitable has arrived: I'm here for help. xD I can't even comprehend your post enough to play around and try to figure it out for myself, so if it's alright, may I please have some additional assistance? I'm thinking if you give an example for each type of badge, it will help me, hopefully.

Can you walk me through the exact code and steps for the following scenarios? Then I'll at least understand the process more and can change the code(s) for all of the badges. It'll give me a skeleton to work with, if you will, where it's more about filling in my information and less about.. figuring out how to code javascript, which I do not understand in the least. The way some people simply can't comprehend math or science very well, javascript doesn't click with me no matter how much time I devote to learning it. It's been years and I still don't grasp the basics. Especially in any type of applicable way on proboards software.

---

Type 1 Example:
Here is the code I am going to be "replacing" in this example:

{if $[user.mini_custom_field.name] == "DeviantART Groupie"}
<a href="http://alcryst-rpg.deviantart.com" target="_blank">
<img title="DeviantART Groupie - Belongs to the Alcrystan group on DeviantART" src="http://i842./zz341/sloureed/DeviantART%20Groupie%20Badge_zpstthejuma.png">
</a>
{/if}

So for this type, the custom profile field is a checkbox with a single option ("yes"). If the custom profile field "DeviantART Groupie" is checked and therefore exists/is present, then it creates a link, image, and title hover unique to the custom profile field "DeviantART Groupie" specifically. If it is not checked, then nothing appears. The image, link, and title hover are all unique to the field. Meaning every "checkbox field" badge used needs their own set of images/links/title hovers.

---

Type 2 Example:
Here is the code I am going to be "replacing" in this example:

{if $[user.mini_custom_field.name] == "Quests"}
{if $[user.mini_custom_field.value] >= "30"}
<a href="http://alcryst.forums.net/thread/1274" target="_blank">
<img title="Quest Champion - 30 or more successful quests" src="http://i842./zz341/sloureed/Quest%20Champion%20Badge_zpsjjxy1oa6.png">
</a>
{/if}
{/if}

So the custom profile field being used is "Quests." It is searching to see if the value of "Quests" is 30 or higher. If it's 30 or higher, then it makes the linked image with a title hover appear. If it's 29 or under, then nothing shows. The link, image, and title hover are all unique to the custom profile field "Quests." The other "number field" badges would have their own: 1. custom profile field name that summons them 2. value amount that determines if they show 3. image that appears if the value is right 4. link for the image and 5. title hover.

---

These are the 2 types of code I am currently using for every individual badge that I really need to now replace because I simply don't have the room for the amount of {if} statements required. They all need to appear in the mini-profile where designated by a DIV/span class/ID. Hopefully this can get me on the right track cuz right now, I've got the plugin installed and.. that's about it. From there, I'm already lost in how to continue. I'm sorry, I truly don't wish to be a pest. If you don't want to further assist, I can resume bumping as a plugin request. =3

[₪» ⅀ ƪ Ƒ «₪]

Bumpity bump =)

[Brian]

In the plugin you'll need to create a mini-profile named Default to add your Javascript to. As for your mini-profile layout template, you can replace the green text in the examples below with your preferred class names.

Type 1's template HTML can be replaced with:

<div class="your-deviantart-placeholder-class"></div>

While in ths plugin you'd use this in the Javascript section:

if(user.deviantartgroupie)
    $(this).find('.your-deviantart-placeholder-class').append('<a href="http://alcryst-rpg.deviantart.com" target="_blank"><img title="DeviantART Groupie - Belongs to the Alcrystan group on DeviantART" src="http://i842./zz341/sloureed/DeviantART%20Groupie%20Badge_zpstthejuma.png"></a>');

Type 2's template HTML can be replaced with:

<div class="your-quests-placeholder-class"></div>

While in the plugin you'd use this in the Javascript section:

if(!isNaN(parseInt(user.quests))){
    if(user.quests >= 30)
        $(this).find('.your-quests-placeholder-class').append('<a href="http://alcryst.forums.net/thread/1274" target="_blank"><img title="Quest Champion - 30 or more successful quests" src="http://i842./zz341/sloureed/Quest%20Champion%20Badge_zpsjjxy1oa6.png"></a>');
}

All of the complicated checks in Type 2 are done to ensure that the script doesn't error out if something other than a number is typed into the Quests custom field.

[₪» ⅀ ƪ Ƒ «₪]

Brian,

Thank you so much for your help so far. =D It's not done yet but it's further along and I'm definitely getting more of a grasp than before. I really appreciate it, this could be such a huge help for my forum!

Alright, so I...

1. installed and enabled the plugin

2. erased all of the content that was automatically entered into the settings for all of the modules

3. renamed the first field (originally "example 1") into "default"

4. went to layout templates > mini-profile (I only have 1 theme) and added:

<div class="mp-info-holder" style="display: none;">
{foreach $[user.mini_custom_field]}
<div class="mp-info $[user.mini_custom_field.content_class]">$[user.mini_custom_field.value]</div>
{/foreach}
</div>

to the very bottom of it

5. removed this from my layout templates:

{if $[user.mini_custom_field.name] == "DeviantART Groupie"}
<a href="http://alcryst-rpg.deviantart.com" target="_blank">
<img title="DeviantART Groupie - Belongs to the Alcrystan group on DeviantART" src="http://i842./zz341/sloureed/DeviantART%20Groupie%20Badge_zpstthejuma.png">
</a>
{/if}

and added this instead:

<div class="deviantartgroupie"></div>

6. then I went to the newly-blank "default"-named javascript section in the plugin and added:

if(user.deviantartgroupie)
$(this).find('.deviantartgroupie').append('<a href="http://alcryst-rpg.deviantart.com" target="_blank"><img title="DeviantART Groupie - Belongs to the Alcrystan group on DeviantART" src="http://i842./zz341/sloureed/DeviantART%20Groupie%20Badge_zpstthejuma.png"></a>');

At this point, I saved everything and refreshed to see if it's working. So far, it's not. =/ I navigated to my mini-profile test thread and the "DeviantArt Groupie" badge specifically isn't showing and there's a yellow exclamation point warning; when hovered over, it says the "mp-info-holder" isn't in the layout template (even though I double-checked that it indeed is, and at the very very end), so clearly something I did was wrong, I just don't know what. xD

To check for issues on my end, yes my template does start with:

<div class="$[miniprofile_class]">

Now, I did skip the "custom profile field" aspect of this because it's supposed to be the default mini-profile, right? As in every member has this mini-profile automatically, it doesn't have to be selected individually, which is what the custom profile field part is for? I don't know, maybe that's where the screw-up is, please tell me how to remedy that if that's the case.

If you'd like, I can make a forums.net ticket for this to check the box and allow you access to see what's going on firsthand in the test thread, plugin settings, and layout template. =)

[Brian]

₪» ⅀ ƪ Ƒ «₪, is the problem that the changes aren't applying or is it showing an error icon on the top right of your mini-profiles?

If it's the latter and you've added the <div class="mp-info-holder" style="display: none;"> element to the end of your template then chances are there are some unclosed tags in your mini-profile template. I would suggest going through it and making absolutely sure that everything is closed off properly.

[₪» ⅀ ƪ Ƒ «₪]

Dec 11, 2016 12:58:08 GMT -8 Brian said:

₪» ⅀ ƪ Ƒ «₪, is the problem that the changes aren't applying or is it showing an error icon on the top right of your mini-profiles?

If it's the latter and you've added the <div class="mp-info-holder" style="display: none;"> element to the end of your template then chances are there are some unclosed tags in your mini-profile template. I would suggest going through it and making absolutely sure that everything is closed off properly.

Correct, the latter, it shows at the top right of the mini-profiles and isn't a problem with saving. Crap. My mini-profile template is 398 lines (though I will say that's a huge improvement cuz it used to be 800+ lol) so it'll be hard to pinpoint.. I'll do it, but before I start, is there an "inspect element" sort of trick to help me figure it out faster than scanning it by eye?

[Brian]

If you inspect the mini-profile and find the mp-info-holder element its parent element will likely be one of the unclosed elements.

You can keep repeating this over and over again to narrow down unclosed elements.

[₪» ⅀ ƪ Ƒ «₪]

Dec 11, 2016 13:07:03 GMT -8 Brian said:

If you inspect the mini-profile and find the mp-info-holder element its parent element will likely be one of the unclosed elements.

You can keep repeating this over and over again to narrow down unclosed elements.

If you don't mind my asking, how do I identify its parent element? I went to "inspect element" and ctrl + f searched to find the mp-info-holder, but I'm unsure where to go from there. I attempted googling the question specifically but it just takes me down to articles that talk about the "inspect element" panel as a whole >.>

[Brian]

Its parent element is whichever element it's inside of.

In the example below, <div> is the parent of <span>:

<div>
    <span>Text</span>
</div>

[₪» ⅀ ƪ Ƒ «₪]

Alright, so far it's in a center tag. Is there a way to identify which line it's on in the layout template through the inspect element? Or should I just start CTRL + F searching for all center tags and try to find an unclosed one?

Nevermind! Turned out it was the center that was the problem and I only had 2 in my template so it was easy to locate. I fixed the unclosed tag issue and now the code is working! The badge is showing up as desired, exactly where it belongs. =D Oh this is so, so exciting! Thank you!

I'm going to now begin adding in the other badges and see how it goes. I'll post if I run into issues =D

Oh THANK YOUUUUUUU! Ahh I'm jittering in my seat now that I can finally do all the badges I want!

[Brian]

Ctrl+F is your best bet at that point. Line numbers are a concept only applicable to the layout template editor and not the forum itself.