Adding a grid view for displaying badges

[Sym-O]

Hi, We needed a grid view to enable a better animation on our platform. The list view is fine, but sometimes, when you need to give the user a good view of what they earned or could earn, the grid view is great ! We developped the functionality and you can see the result on the screenshots joined to this post. We choose to add a new shortcode aside the list of accomplishment, we add the grid of accomplishment. About our technical approach, it seems that all the display mecanisms are "list" oriented for now. We didn't want to be too intrusive by changing all badges display methods so we choose to work mainly on the javascript side in the file : badgeos-achievements.js. We add also the correct css class and here it is.

• Does this development/approach interest you? You can check detail on my fork of badgeos
• The look is now correct, but we may improve this a bit more
• Bonus : this type of view is very convinient for use on mobile device and in responsive design. see screen 3

This post may be linked to this widget enhancement : https://github.com/opencredit/badgeos/issues/67

[tw2113]

For git history sake, I'm hoping you did your changes on the alpha branch. If you could, issue a Pull Request against our alpha branch and we'll look things over. If all looks good, we'll pull it in.

[Sym-O]

OK, We'll do that soon. Thanks for the first feedback.

[tw2113]

One thing we were thinking regarding this would be that it'd perhaps be better, and help prevent code duplication, if instead of making a brand new shortcode for this, we simply add some sort of "layout" shortcode attribute to the existing shortcode. Something like "list" and "grid". and change the output depending on that setting.

What are your thoughts on that and would you like to help contribute that style of change? Without actually knowing what all you've changed so far for your implementation, its hard to tell which parts are already done. In order to prevent breaking existing things with the badgeos_render_achievement() function itself, which could be used in many places, I think it'd be a good opportunity to utilize the apply_filters( 'badgeos_render_achievement', $output, $achievement->ID ); filter. We could conditionally add a callback on that filter, if the "grid" layout is chosen, and completely alter the output.

[Sym-O]

Thanks for advice. We are working on re-implementing things the way you suggest and we're doing it from the alpha branch. We'll do the pull request soon.

[tw2113]

Cool, looking forward to seeing what you come up with.

[tw2113]

Able to be closed once #409 has been merged in.