A Badge generator like Badgeyay must be able to generate, store and export the user data as and when needed. This blog post is about modify the my-badges component to show the badges in a more creative manner.. For making the badges look better than they already are, we decided to use another type of semantic-ui card. This card requires an image. So we decided to use the user’s uploaded image as the image for the badge card. For this, we made changes to the backend along with the frontend.

Adding the functionality to badgeyay

Let us see how we implemented this functionality into the backend of the project.

Step 1 : Adding the image_link to backend

Image link is the link to the user’s uploaded image on remote firebase server.

image_link = db.Column(db.String) # adding column to table

image_link = fields.Str(required=True)  # adding to schema

link = fileUploader(imageDirectory, ‘images/’ + image_name) badge_created.image_link = link  # uploading the file and storing the link

Step 2 : Adding a details to frontend model

Now we need add the attributes to the frontend model to accept our image_link data..

import DS from ’ember-data’; const { Model, attr } = DS; export default Model.extend({ badge_size    : attr(‘string’), csv           : attr(‘string’), download_link : attr(‘string’), image         : attr(‘string’), text_color    : attr(‘string’), image_link    : attr(‘string’) });

Step 3 : Adding required Handlebar code and SCSS

Now we need to add the handlebar code to render the image from the link provided from the ember data model.

<div class=”image”> <img src=”{{badge.image_link}}”> </div>

And apply some CSS to the image and card

.ui.segment { .cards { .card { padding-right: 10px; img { height: 300px; width: 100%; } } } }

Finally, we need to apply the migrations to the backend server as well. This is carried out by flask-migrate easily.

Screenshot of changes

Resources

• The Pull Request for the same : https://github.com/fossasia/badgeyay/pull/1226
• The Issue for the same : https://github.com/fossasia/badgeyay/issues/1221
• Read about Ember data : https://www.emberjs.com/api/data/classes/DS.Model.html
• Read about Handlebars :   https://guides.emberjs.com/release/templates/handlebars-basics/