question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Trumbowyg Giphy Plugin is broken due to mixed result set from Giphy API

See original GitHub issue

Issue Description

We have noticed the Giphy plugin is broken with some Giphy API responses. By broken, I mean that no images load and I see in the js console below. In the case below, you can see it immediately without doing a search, but it also repeats for some searches, but not all. It seems the Giphy API response does not always include a downsized entry in the json payload.

Screen Shot 2021-08-13 at 3 38 52 PM

When testing locally, I can see the api response:

{
   "original":{
      "height":"640",
      "width":"640",
      "size":"15683861",
      "url":"https://media4.giphy.com/media/YRtLgsajXrz1FNJ6oy/giphy.gif?cid=4a2a0f59efjstu3w6te4wcmmmcqqojmg43s28v7xz14mzin9&rid=giphy.gif&ct=g",
      "mp4_size":"2713472",
      "mp4":"https://media4.giphy.com/media/YRtLgsajXrz1FNJ6oy/giphy.mp4?cid=4a2a0f59efjstu3w6te4wcmmmcqqojmg43s28v7xz14mzin9&rid=giphy.mp4&ct=g",
      "frames":"277",
      "hash":"86271fd2c792723e7d72b0f092c9766e"
   },
   "downsized_large":{
      "height":"318",
      "width":"318",
      "size":"5304292",
      "url":"https://media4.giphy.com/media/YRtLgsajXrz1FNJ6oy/giphy-downsized-large.gif?cid=4a2a0f59efjstu3w6te4wcmmmcqqojmg43s28v7xz14mzin9&rid=giphy-downsized-large.gif&ct=g"
   },
   "downsized_medium":{
      "height":"279",
      "width":"279",
      "size":"3495979",
      "url":"https://media4.giphy.com/media/YRtLgsajXrz1FNJ6oy/giphy-downsized-medium.gif?cid=4a2a0f59efjstu3w6te4wcmmmcqqojmg43s28v7xz14mzin9&rid=giphy-downsized-medium.gif&ct=g"
   },
   "fixed_height":{
      "height":"200",
      "width":"200",
      "size":"4725830",
      "url":"https://media4.giphy.com/media/YRtLgsajXrz1FNJ6oy/200.gif?cid=4a2a0f59efjstu3w6te4wcmmmcqqojmg43s28v7xz14mzin9&rid=200.gif&ct=g"
   },
   "fixed_height_downsampled":{
      "height":"200",
      "width":"200",
      "size":"177570",
      "url":"https://media4.giphy.com/media/YRtLgsajXrz1FNJ6oy/200_d.gif?cid=4a2a0f59efjstu3w6te4wcmmmcqqojmg43s28v7xz14mzin9&rid=200_d.gif&ct=g"
   },
   "fixed_height_still":{
      "height":"200",
      "width":"200",
      "size":"28870",
      "url":"https://media4.giphy.com/media/YRtLgsajXrz1FNJ6oy/200_s.gif?cid=4a2a0f59efjstu3w6te4wcmmmcqqojmg43s28v7xz14mzin9&rid=200_s.gif&ct=g"
   },
   "fixed_width":{
      "height":"200",
      "width":"200",
      "size":"4725830",
      "url":"https://media4.giphy.com/media/YRtLgsajXrz1FNJ6oy/200w.gif?cid=4a2a0f59efjstu3w6te4wcmmmcqqojmg43s28v7xz14mzin9&rid=200w.gif&ct=g",
      "webp_size":"1086370",
      "webp":"https://media4.giphy.com/media/YRtLgsajXrz1FNJ6oy/200w.webp?cid=4a2a0f59efjstu3w6te4wcmmmcqqojmg43s28v7xz14mzin9&rid=200w.webp&ct=g"
   },
   "fixed_width_downsampled":{
      "height":"200",
      "width":"200",
      "size":"177570",
      "url":"https://media4.giphy.com/media/YRtLgsajXrz1FNJ6oy/200w_d.gif?cid=4a2a0f59efjstu3w6te4wcmmmcqqojmg43s28v7xz14mzin9&rid=200w_d.gif&ct=g"
   },
   "fixed_width_still":{
      "height":"200",
      "width":"200",
      "size":"28870",
      "url":"https://media4.giphy.com/media/YRtLgsajXrz1FNJ6oy/200w_s.gif?cid=4a2a0f59efjstu3w6te4wcmmmcqqojmg43s28v7xz14mzin9&rid=200w_s.gif&ct=g"
   },
   "original_still":{
      "height":"640",
      "width":"640",
      "size":"118414",
      "url":"https://media4.giphy.com/media/YRtLgsajXrz1FNJ6oy/giphy_s.gif?cid=4a2a0f59efjstu3w6te4wcmmmcqqojmg43s28v7xz14mzin9&rid=giphy_s.gif&ct=g"
   },
   "original_mp4":{
      "height":"480",
      "width":"480",
      "mp4_size":"2713472",
      "mp4":"https://media4.giphy.com/media/YRtLgsajXrz1FNJ6oy/giphy.mp4?cid=4a2a0f59efjstu3w6te4wcmmmcqqojmg43s28v7xz14mzin9&rid=giphy.mp4&ct=g"
   },
   "480w_still":{
      "height":"480",
      "width":"480",
      "size":"15683861",
      "url":"https://media4.giphy.com/media/YRtLgsajXrz1FNJ6oy/480w_s.jpg?cid=4a2a0f59efjstu3w6te4wcmmmcqqojmg43s28v7xz14mzin9&rid=480w_s.jpg&ct=g"
   }
}
Screen Shot 2021-08-13 at 3 42 11 PM

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
Alex-Dcommented, Nov 14, 2022

Fixed in 2.26.0

1reaction
synthcommented, Aug 30, 2022

I think you may just need:

       .filter(function (gifData) {
-        return gifData.images.downsized.url !== '';
+        var downsized = gifData.images.downsized || gifData.images.downsized_medium;
+        return downsized.url;
       })

Empty string is truthy in js apparently. I’m not sure how you could address all possible cases though. Alternatively (or in addition to), perhaps a filter function could be a configuration option, so clients (us) can customize and address wonky situations as they may come up. Also, a configurable filter function is a feature add, so clients can filter out inappropriate images based on arbitrary logic.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Giphy plugin | Trumbowyg
User can insert some GIFs from Giphy in Trumbowyg. Read Giphy plugin documentation. <h2>Insert some GIFs</h2> <p> ...
Read more >
Trumbowyg - Bountysource
We have noticed the Giphy plugin is broken with some Giphy API responses. By broken, I mean that no images load and I...
Read more >
Untitled
Mba usa indian students, Generico brainbuster, Film di 21 amplaz jogja, Ciclop timisoara forum, Mahmuda sultana facebook, Gce o l results 2014 release....
Read more >
mysql_phpgenerator_pro_setup.exe - Hybrid Analysis
Remote Access: Reads terminal service related keys (often RDP related); Persistence: Writes data to a remote process; Fingerprint: Queries kernel debugger ...
Read more >
uvV - ALBA.Net
Hitting the dab gif, Israel dvb-t frequency table, Ihg priority club! ... Riviere le lambon, Paris st germain fc results, Valle del cauca...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found