Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-63961

Improve resolution of badge image sent to external backpacks and used when duplicating badges

XMLWordPrintable

    • MOODLE_310_STABLE, MOODLE_311_STABLE, MOODLE_35_STABLE, MOODLE_36_STABLE, MOODLE_400_STABLE
    • MOODLE_311_STABLE
    • MDL-63961-master
    • Hide

      Tip: Firefox displays JSON files with collapsed information, so it will make easier to find this information.

      Setup badges

      1. Login as admin.
      2. Go to "Site administration | Badges | Add a new badge" and create a badge at site level ("Badge 1"), using a file with resolution higher than 1000 (for instance you can download https://pixabay.com/photos/wheat-crop-field-barley-5996781/ ) .
        • Fill in only the required fields.
      3. Look at the URL and annotate the id for the badge (badges/criteria.php?id=[BADGEID1])
      4. Add criteria to the badge so it can be manually issued by role.
      5. Go to "Site administration | Badges | Add a new badge" and create another badge at site level ("Badge 2"), using a file with resolution higher than 1000 (for instance you can download https://pixabay.com/photos/jasper-national-park-river-mountains-5819878/ ) .
        • Fill in at least one of the optional "Image author" fields (for instance, "Image author's name").
      6. Look at the URL and annotate the id for the badge (badges/criteria.php?id=[BADGEID2])
      7. Add criteria to the badge so it can be manually issued by role.
      8. Enable both badges.
      9. Issue the badges to the admin user.

       

      Testing scenario 1: BadgeClass

      1.  Access to [YOURMOODLESITEURL]/badges/badge_json.php?id=[BADGEID1]
      2. Check image/id field uses "f3" image file.
      3. Access to [YOURMOODLESITEURL]/badges/badge_json.php?id=[BADGEID2]
      4. Check image/id field uses "f3" image file.

      Testing scenario 2: Badge assertions

      1. Access to admin profile page.
      2. Inspect the code using browser tools and check "Badge 1" and "Badge 2" are displayed using /f3 images.
      3. Access to "Badge 2".
      4. In the URL, replace "badges/badge.php?hash=" to "badges/assertion.php?b=". 
      5. Add "&action=1" at the end of the previous URL.
      6. Copy the content in the image field ("data:image/....).
      7. Open https://base64.guru/converter/decode/image, paste the previous content into the Base64 text area and click the "Decode Base64 to Image" button.
      8. Check the image resolution is higher than 100x100 (it should be 512x512).

      Testing scenario 3: Web service

      1. Go to "Site administration > Mobile app > Mobile settings" and enable "Mobile services".
      2. Click on Site administration > Plugins > Web services > Manage tokens.
      3. Create a token in the mobile app service for the admin user.
      4. Open the console an execute this new curl request, replacing wstoken with the token for admin and the site url with yours.

        curl 'http://localhost/m/stable_master/webservice/rest/server.php?moodlewsrestformat=json' --data 'wsfunction=core_badges_get_user_badges&wstoken=[WSTOKEN]' --compressed | python -m "json.tool"

      1. Check that you receive both badges and badgeurl field uses "/f3" image in both cases.

       Testing scenario 4: Clone badges

      1. Go to "Site administration > Badges > Manage badges".
      2. Clone "Badge 2" using the "Copy" button and enable it ("Badge 3").
      3. Issue the badge to the admin user.
      4. Access to admin profile page.
      5. Copy the URL of "Badge 3" image ([YOURMOODLESITEURL]/pluginfile.php/1/badges/badgeimage/xx/f3) and open it in a new browser tab.
      6. Check the image is not blurry.
      Show
      Tip : Firefox displays JSON files with collapsed information, so it will make easier to find this information. Setup badges Login as admin. Go to "Site administration | Badges | Add a new badge" and create a badge at site level ("Badge 1"), using a file with resolution higher than 1000 (for instance you can download https://pixabay.com/photos/wheat-crop-field-barley-5996781/  ) . Fill in only the required fields. Look at the URL and annotate the id for the badge (badges/criteria.php?id= [BADGEID1] ) Add criteria to the badge so it can be manually issued by role. Go to "Site administration | Badges | Add a new badge" and create another badge at site level ("Badge 2"), using a file with resolution higher than 1000 (for instance you can download https://pixabay.com/photos/jasper-national-park-river-mountains-5819878/  ) . Fill in at least one of the optional "Image author" fields (for instance, "Image author's name"). Look at the URL and annotate the id for the badge (badges/criteria.php?id= [BADGEID2] ) Add criteria to the badge so it can be manually issued by role. Enable both badges. Issue the badges to the admin user.   Testing scenario 1: BadgeClass  Access to [YOURMOODLESITEURL] /badges/badge_json.php?id= [BADGEID1] Check image/id field uses "f3" image file. Access to [YOURMOODLESITEURL] /badges/badge_json.php?id= [BADGEID2] Check image/id field uses "f3" image file. Testing scenario 2: Badge assertions Access to admin profile page. Inspect the code using browser tools and check "Badge 1" and "Badge 2" are displayed using /f3 images. Access to "Badge 2". In the URL, replace "badges/badge.php?hash=" to "badges/assertion.php?b=".  Add "&action=1" at the end of the previous URL. Copy the content in the image field ("data:image/....). Open https://base64.guru/converter/decode/image , paste the previous content into the Base64 text area and click the "Decode Base64 to Image" button. Check the image resolution is higher than 100x100 (it should be 512x512). Testing scenario 3: Web service Go to "Site administration > Mobile app > Mobile settings" and enable "Mobile services". Click on Site administration > Plugins > Web services > Manage tokens. Create a token in the mobile app service for the admin user. Open the console an execute this new curl request, replacing wstoken with the token  for admin  and the site url with yours. curl 'http://localhost/m/stable_master/webservice/rest/server.php?moodlewsrestformat=json' --data 'wsfunction=core_badges_get_user_badges&wstoken= [WSTOKEN] ' --compressed | python -m "json.tool" Check that you receive both badges and badgeurl field uses "/f3" image in both cases.  Testing scenario 4: Clone badges Go to "Site administration > Badges > Manage badges". Clone "Badge 2" using the "Copy" button and enable it ("Badge 3"). Issue the badge to the admin user. Access to admin profile page. Copy the URL of "Badge 3" image ( [YOURMOODLESITEURL] /pluginfile.php/1/badges/badgeimage/xx/f3) and open it in a new browser tab. Check the image is not blurry.
    • Moppies Kanban

      • Send a better resolution image to backpack
      • Review resolution for duplicated badges because the copy has less resolution when it's downloaded by the student.

       

      Detailed explanation

      The image URL sent to openbadges.org is the `f1` size. This results in a blurry image when viewing the badge in the backpack.

      Image in Openbadges.org: 

      This is the sample `assertion` and `badge` data (with redacted URLs):

      // assertion (https://example.com/badges/assertion.php?b=dfbbe96d01cb39f2438cb6970cdc8808e9c30dbc)
      		 
      {
      		 
       "uid": "f99a9e7518a2435bbb8ad443e1f1d9c4147af268",
      		 
       "recipient": {
      		 
       "identity": "sha256$47b22fbb24c5ad16ba6067b14372d0e5bd723358d3c831bf8687996bc4e92d4b",
      		 
       "type": "email",
      		 
       "hashed": true,
      		 
       "salt": "badges1541006821"
      		 
       },
      		 
       "badge": "https:\/\/example.com\/badges\/assertion.php?b=f99a9e7518a2435bbb8ad443e1f1d9c4147af268&action=1",
      		 
       "verify": {
      		 
       "type": "hosted",
      		 
       "url": "https:\/\/example.com\/badges\/assertion.php?b=f99a9e7518a2435bbb8ad443e1f1d9c4147af268"
      		 
       },
      		 
       "issuedOn": "1541705166",
      		 
       "evidence": "https:\/\/example.com\/badges\/badge.php?hash=f99a9e7518a2435bbb8ad443e1f1d9c4147af268"
      		 
      }
      		 
       
      		 

      // badge (https://example.com/badges/assertion.php?b=f99a9e7518a2435bbb8ad443e1f1d9c4147af268&action=1)
      		 
      {
      		 
       "name": "Test2",
      		 
       "description": "Test 2",
      		 
       "image": "https:\/\/example.com\/pluginfile.php\/1\/badges\/badgeimage\/2\/f1",
      		 
       "criteria": "https:\/\/example.com\/badges\/badge.php?hash=f99a9e7518a2435bbb8ad443e1f1d9c4147af268",
      		 
       "issuer": "https:\/\/example.com\/badges\/assertion.php?b=f99a9e7518a2435bbb8ad443e1f1d9c4147af268&action=0"
      		 
      }

       

      The image URL is generated in `badges/classes/assertion.php` in the `get_badge_class` function. However, changing the image size from `f1` to `f3` breaks the style/CSS on `badges/badge.php` as follows:

        1. Screenshot_3.jpg
          Screenshot_3.jpg
          73 kB
        2. Screenshot_2.jpg
          Screenshot_2.jpg
          86 kB
        3. Screenshot_1.jpg
          Screenshot_1.jpg
          117 kB
        4. image-2018-11-09-18-05-23-156.png
          image-2018-11-09-18-05-23-156.png
          898 kB
        5. image-2018-11-09-18-05-02-332.png
          image-2018-11-09-18-05-02-332.png
          179 kB

            sarjona Sara Arjona (@sarjona)
            hrpatel H Patel
            Amaia Anabitarte Amaia Anabitarte
            Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
            Janelle Barcega Janelle Barcega
            Votes:
            2 Vote for this issue
            Watchers:
            9 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 4 hours, 45 minutes
                4h 45m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.