Merge pull request #195 from BuildFire/dicebear-croped-image

fix(dicebear-image): use scale query for layout1,2

Author: mas-iota

control/content/app.js

@@ -169,6 +169,12 @@
         }])
         .filter('getImageUrl', function () {
             return function (url, width, height, type) {
+                if (url.includes('dicebear')){
+                    let urlObj = new URL(url);
+                    let params = urlObj.searchParams;
+                    params.delete('scale');
+                    url = urlObj.origin + urlObj.pathname + '?' + params.toString();
+                }
                 if (type == 'resize')
                     return buildfire.imageLib.resizeImage(url, {
                         width: width,

control/content/js/aiStateSeederManager.js

@@ -40,15 +40,15 @@ const aiStateSeederManager = {
                 userMessage:
                     'Generate a sample list of contacts for people working in the field of [business-type]',
                 systemMessage:
-                    'Each contact should have a first name, last name, phone number, avatar in png format, bio, position, rank is item order number starting from zero, and email. Use https://api.dicebear.com/8.x/avataaars/png to generate useable avatar URLs, bio as HTML content, and for first name and last name use gender-neutral names, rank must be type number',
+                    'Each contact should have a first name, last name, phone number, avatar in png format, bio, position, rank is item order number starting from zero, and email. Use https://api.dicebear.com/8.x/avataaars/png?scale=50 to generate useable avatar URLs, bio as HTML content, and for first name and last name use gender-neutral names, rank must be type number',
                 jsonTemplate: this.jsonTemplate,
                 callback: this._handleGenerate.bind(this),
             },
 
             importOptions: {
                 jsonTemplate: this.jsonTemplate,
                 sampleCSV:
-                    'Jane, Smith, 123-456-7890, https://api.dicebear.com/8.x/avataaars/png?seed=jane-smith&mouth=smile&eyebrows=defaultNatural&eyes=default,Jane Smith is a marketing specialist with expertise in digital marketing strategies.,Marketing Specialist,Jane.Smith@example.com\nJohn, Doe, 123-456-7890, https://api.dicebear.com/8.x/avataaars/png?seed=john-doe&mouth=smile&eyebrows=defaultNatural&eyes=default,John Doe is a software engineer with 5 years of experience in web development.,Software Engineer,john.doe@example.com',
+                    'Jane, Smith, 123-456-7890, https://api.dicebear.com/8.x/avataaars/png?seed=jane-smith&mouth=smile&eyebrows=defaultNatural&eyes=default&scale=50, Jane Smith is a marketing specialist with expertise in digital marketing strategies.,Marketing Specialist,Jane.Smith@example.com\nJohn, Doe, 123-456-7890, https://api.dicebear.com/8.x/avataaars/png?seed=john-doe&mouth=smile&eyebrows=defaultNatural&eyes=default&scale=50, John Doe is a software engineer with 5 years of experience in web development.,Software Engineer,john.doe@example.com',
                 systemMessage: `fName is first , last name is lname, phone is random phone numbers, topImage is a URL`,
                 callback: this._handleImport.bind(this),
             },
@@ -185,7 +185,7 @@ const aiStateSeederManager = {
                 item.fName = item.fName || 'N/A';
                 item.lName = item.lName || '';
                 item.phone = item.phone || 'N/A';
-                item.topImage = item.topImage || `https://api.dicebear.com/8.x/initials/png?seed=${item.fName}%20${item.lName}&backgroundColor=808080`;
+                item.topImage = item.topImage || `https://api.dicebear.com/8.x/initials/png?seed=${item.fName}%20${item.lName}&backgroundColor=808080&scale=50`;
                 item.bodyContent = item.bodyContent || 'N/A';
                 item.position = item.position || 'N/A';
                 item.email = item.email || 'N/A';

widget/app.js

@@ -94,6 +94,12 @@
 
             attrs.$observe('finalSrc', function() {
                 var _img = attrs.finalSrc;
+                if (_img.includes('dicebear') && attrs.dicebearScale){
+                    let urlObj = new URL(_img);
+                    let params = urlObj.searchParams;
+                    params.delete('scale');
+                     _img = urlObj.origin + urlObj.pathname + '?' + params.toString();
+                }
 
                 if (attrs.cropType == 'resize') {
                     Buildfire.imageLib.local.resizeImage(_img, {
@@ -164,7 +170,7 @@
         } else {
           buildfire.navigation._goBackOne();
         }
-        
+
       };
 
       buildfire.history.onPop(function(data, err){

widget/templates/layouts/list-layout-3.html

@@ -12,7 +12,7 @@
       <div class="list-items list-layout" ng-if="WidgetHome.data" infinite-scroll-distance="1" data-infinite-container=".infinite-scroll-parent" infinite-scroll="WidgetHome.loadMore(undefined,undefined,true)" infinite-scroll-disabled="WidgetHome.noMore">
         <div class="list-item" ng-repeat="item in WidgetHome.items" ng-click="WidgetHome.getPeopleDetails(item.id)">
           <div ng-if="item.data.topImage" class="media">
-            <img class="people-thumbnail-img text-overlay-round" load-image="1x1" crop-width="120" crop-height="120" crop-type="crop" data-final-src="{{item.data.topImage}}">
+            <img class="people-thumbnail-img text-overlay-round" load-image="1x1" crop-width="120" crop-height="120" crop-type="crop" dicebear-scale="1" data-final-src="{{item.data.topImage}}">
           </div>
           <!-- <div ng-if="!item.data.topImage" class="media pull-left border-radius-four people-thumbnail margin-right-ten" ng-click="WidgetHome.getPeopleDetails(item.id)">
             <div class="people-thumbnail-img text-overlay" style="background-image: url(../../../styles/media/holder-2x1.png); background-size: cover; background-position: center;height: 60px"></div>