# ImgFlip: Adding a meme easily

**URL:** https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050
**Category:** Plugin
**Tags:** broken
**Created:** [October 2, 2015, 4:03pm UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050 "2015-10-02T16:03:48Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [October 2, 2015, 4:03pm UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/1 "2015-10-02T16:03:48Z")

</div>

Taking a lot of what I learned with the [ReplyGif plugin](https://meta.discourse.org/t/replygif-adding-reaction-gif-easily/33195), I’ve developed one for ImgFlip too.

 ![](https://global.discourse-cdn.com/meta/original/3X/d/7/d70a3ccd6c06b1974f8058fa694d55575e173a87.png)

The GitHub Repo is located at  
[https://github.com/cpradio/discourse-plugin-imgflip](https://github.com/cpradio/discourse-plugin-imgflip)

I’ve also built in features for future proofing. API Username and Password (in case ImgFlip starts to monitor the usage) and the URL, even though ImgFlip supports HTTPS already.

Please report any issues via GitHub or here.

Enjoy!

**Update:**  
2015-10-02 14:00 PM EDT  
Fixed the fact that multiple memes could be selected. I still need to look into handling any errors returned from the API properly.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [October 27, 2016, 10:10pm UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/2 "2016-10-27T22:10:19Z")

</div>

Okay recent changes in Discourse have removed `string-buffer` and the use of `rawTemplate`, so to support non-updated versions, there is a tag v0.5.0 that will let you keep operating.

`git clone --branch v0.5.0 https://github.com/cpradio/discourse-plugin-imgflip.git`

For those that have upgraded, v1.0.0 is compatible with latest.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [November 25, 2016, 3:51pm UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/3 "2016-11-25T15:51:30Z")

</div>

With the Ember 2.4 upgrade now merged in, there is a release branch to use for older versions of Discourse

`git clone --branch v1.0.0 https://github.com/cpradio/discourse-plugin-imgflip.git`

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [March 17, 2017, 12:25pm UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/4 "2017-03-17T12:25:56Z")

</div>

Today Imgflip doesn’t work

For more details please see here [https://sandbox.cpradio.org/t/imgflip-plugin-example/54/2?u=trash](https://sandbox.cpradio.org/t/imgflip-plugin-example/54/2?u=trash)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 17, 2017, 1:14pm UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/5 "2017-03-17T13:14:45Z")

</div>

My guess is that you got yourself blocked cause you are a fast typer. I did manage to post a post with an image there @cpradio you may want to default tl1 on your sandbox.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [March 17, 2017, 1:41pm UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/6 "2017-03-17T13:41:44Z")

</div>

Not sure. I see the following error:

```plaintext
XMLHttpRequest cannot load https://api.imgflip.com/get_memes?username=removed&password=removed&_=removed. 
Request header field Discourse-Visible is not allowed by Access-Control-Allow-Headers in preflight response.

```

That seems awfully specific to Discourse. Was there any changes around `'discourse/lib/ajax'` that I should be aware of?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 17, 2017, 1:43pm UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/7 "2017-03-17T13:43:58Z")

</div>

> [@cpradio](#):
>
> Request header field Discourse-Visible is not allowed by Access-Control-Allow-Headers in preflight response.

Ahh will that is new, I guess we broke you, you should not use the “discourse” ajax helpers here, they are designed for talking to Discourse. Instead just use jQuery direct.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [March 17, 2017, 3:56pm UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/8 "2017-03-17T15:56:38Z")

</div>

Fixed in  
[https://github.com/cpradio/discourse-plugin-imgflip/pull/10](https://github.com/cpradio/discourse-plugin-imgflip/pull/10)

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [June 12, 2018, 11:57am UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/10 "2018-06-12T11:57:42Z")

</div>

No repro. On my sandbox, which is running latest, it works just fine. You will need to give me better reproduction steps.

---

<div class="post-metadata">

### Author: ![bletch](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bletch/32/69088_2.png) [@bletch](https://meta.discourse.org/u/bletch)
#### Post date: [January 10, 2019, 10:43pm UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/11 "2019-01-10T22:43:31Z")

</div>

### Potential problem following a recent upgrade - Maybe Chrome related.

We’re seeing mixed content errors in the console and ImgFlip memes are not display correctly on Chrome with the latest Discourse and the latest version of the ImgFlip plugin.

Hi @cpradio, I can’t be certain when this started to fail as the community doesn’t use this plugin daily, but the first report coincided with me upgrading to a later version of 2.2.0.beta7 tonight.

We had previously been running an earlier version of 2.2.0beta7 but these errors surfaced after taking the +115 version. As I say, that might just be coincidental.

So far, it seems to only happen on Chrome - both mobile and desktop. Firefox and Safari both seem to work.

##### To reproduce

Simply post an image from imgflip.

In Chrome it will show a broken image icon ![image](https://global.discourse-cdn.com/meta/original/3X/2/b/2b77903015c2fecb5fe370629e7808e7c12574b6.png) in the post and the console will display errors like this…

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/5/0520d44ae31cceadd5ce15ef52741e33f2606b0c.jpeg)

The `MESSAGE_BUS_FAIL` errors only occurred after a polling delay - i.e. it looks like the page was made unstable before those errors occurred.

##### Some ‘odd’ stuff that might help you track it down

- The meme is actually created and displays in the preview pane prior to posting. Only once the Reply button is pressed does it fail to display properly in the post list.
- I get a notification from Chrome that ‘this page is trying to load scripts from unauthenticated sources’ that appears in the URL bar.
- Even though the meme in the post shows as a broken image link, the post depth observes the size that the embedded image would have taken up and if you mouse click the ‘space’ where the image should be, the lightbox appears and actually displays the meme.
- Oddly (to me anyway) If the meme was created in Firefox or Safari then everyone can see it, but if the meme was created in Chrome then nobody gets to see it.

##### Configuration details

The forum is hosted over https via Letsencrypt.  
We’re running the latest version of your the plugin on Discourse v2.2.0.beta7 +115  
I’ve reproduced it on Chrome version 71.0.3578.98 (Official Build) (64-bit) on Linux but it’s been reported as failing on Chrome mobile too.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [January 11, 2019, 12:36am UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/12 "2019-01-11T00:36:13Z")

</div>

Seems imgflip returned a http image instead of https?

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [January 11, 2019, 1:20am UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/13 "2019-01-11T01:20:58Z")

</div>

I have confirmed that imgflip is returning the image URL as HTTP instead of HTTPS. It seems changing the URL from HTTP to HTTPS in the composer window will get it to load. Ideally imgflip will just return the HTTPS url, I’ll reach out and see if they will make the change.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [January 11, 2019, 1:42am UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/14 "2019-01-11T01:42:19Z")

</div>

I created a branch that forces the return image URL to use HTTPS, I’d rather imgflip resolve this themselves, but if they do not, then you can just point to this branch in your app.yml using

`git clone -b force-https https://github.com/cpradio/discourse-plugin-imgflip.git`

---

<div class="post-metadata">

### Author: ![bletch](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bletch/32/69088_2.png) [@bletch](https://meta.discourse.org/u/bletch)
#### Post date: [January 11, 2019, 7:44am UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/15 "2019-01-11T07:44:37Z")

</div>

Great service, @cpradio!

So what has changed recently, ImgFlip somehow returning a `http://` instead of a `https://` or has Chrome become more sensitive?

EDIT: ‘fix’ implemented and working! Cheers.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [January 11, 2019, 1:10pm UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/16 "2019-01-11T13:10:13Z")

</div>

> [@bletch](#):
>
> So what has changed recently, ImgFlip somehow returning a `http://` instead of a `https://` or has Chrome become more sensitive?

Potentially both. I do believe Chrome is much more sensitive, however, I don’t recall if imgflip initially returned HTTPS image urls or if it always returned HTTP. Sadly, all of my sandbox tests downloaded the files locally, so I can’t easily tell at the moment.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [January 11, 2019, 7:42pm UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/17 "2019-01-11T19:42:52Z")

</div>

Okay, doing more research I found information indicating it has always been this way with ImgFlip. I’m going to merge the branch into the master branch. @bletch, this means you can remove the `-b force-https` from your app.yml sometime later today/tomorrow, which will require a rebuild.

Even if ImgFlip does fix this on their end, it shouldn’t impact the plugin negatively.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [January 18, 2019, 3:09am UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/18 "2019-01-18T03:09:05Z")

</div>

Hey good news! I heard back from them today, they made the change on their end and now return the payload as HTTPS. I’ve confirmed the plugin continues to work as expected.

New payload response

```plaintext
{"success":true,"data":{"url":"https:\/\/i.imgflip.com\/2rf5zo.jpg","page_url":"https:\/\/imgflip.com\/i\/2rf5zo"}}

```

---

<div class="post-metadata">

### Author: ![bletch](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bletch/32/69088_2.png) [@bletch](https://meta.discourse.org/u/bletch)
#### Post date: [February 19, 2019, 9:51am UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/20 "2019-02-19T09:51:06Z")

</div>

# CORS policy failure error

I think there is another problem here, @cpradio .

~~I was previously running your `force-http` branch and whilst chasing down another but on the forum I thought I move to the master branch.~~ This is misleading, I’ve reverted to the `force-https` branch and the issue is still there.

Our users are now reporting that they can’t insert memes. Looking at the browser console I see this error.

`Access to XMLHttpRequest at 'https://api.imgflip.com/caption_image?username=imgflip_hubot&password=imgflip_hubot&template_id=87743020&text0=Work?&text1=Fail?' from origin 'https://sandbox.cpradio.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.`

### Steps to reproduce

I am able to reproduce this on your sandbox at …

[https://sandbox.cpradio.org/t/imgflip-plugin-example/54](https://sandbox.cpradio.org/t/imgflip-plugin-example/54)

…where I simply tried to insert a meme and got the error above. Screen shot of the actual console error…

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/3/03c8de7d861e77d3ee7ef9e863ff2377812f2772.png)

### Environment

I’m running the very latest tests-passed version of Discourse [v2.3.0.beta2 +129](https://github.com/discourse/discourse/compare/15fd8758557dda0f4ddbfcfc8dab71f7f872832a...tests-passed).

I’m using Chrome Version 72.0.3626.96 (Official Build) (64-bit) on Linux - but I’ve also tested on Firefox and the same the problem occurs.

Please let me know if you need any more information.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [February 19, 2019, 3:09pm UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/21 "2019-02-19T15:09:37Z")

</div>

I don’t think that is it, the error is the fact imgFlip changed how you authenticate, you now must signup for an account and use your account credentials. Try that.

Previously they just had a dummy account that was available for everyone to use.

> **[Meme Generator API - Imgflip](https://imgflip.com/api)**
>
> RESTful JSON API for making memes with Imgflip's meme generator

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [February 19, 2019, 3:21pm UTC](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050/22 "2019-02-19T15:21:21Z")

</div>

I just confirmed, that is what happened. Creating an account and using those credentials in the Admin \> Settings made it work again on my sandbox.

[Next page](https://meta.discourse.org/t/imgflip-adding-a-meme-easily/34050.md?page=2)
