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

    Details

    • Testing Instructions:
      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.
    • Affected Branches:
      MOODLE_310_STABLE, MOODLE_311_STABLE, MOODLE_35_STABLE, MOODLE_36_STABLE, MOODLE_400_STABLE
    • Fixed Branches:
      MOODLE_311_STABLE
    • Pull from Repository:
    • Pull 3.11 Branch:
      MDL-63961-311
    • Pull Master Branch:
      MDL-63961-master
    • Sprint:
      Moppies Kanban

      Description

      • 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:

        Attachments

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

          Issue Links

            Activity

              People

              Assignee:
              sarjona Sara Arjona (@sarjona)
              Reporter:
              hrpatel H Patel
              Peer reviewer:
              Amaia Anabitarte Amaia Anabitarte
              Integrator:
              Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
              Tester:
              Janelle Barcega Janelle Barcega
              Participants:
              Component watchers:
              Yuliya Bozhko, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Ilya Tregubov, Sara Arjona (@sarjona)
              Votes:
              2 Vote for this issue
              Watchers:
              9 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                17/May/21

                  Time Tracking

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