Anybody using the Imgur embed code on thier sites?

Has anyone had any luck with using the Imgur embed code on their Dolphin site?

I would like to allow my members to imbed their Imgur.com photo albums on their profile page or in comments. Imgur is a free photo hosting service that many of my members use any way. Imgur gives an embed code and encourages users to use it to embed their photo albums and photos "on any web page". Unfortunately, Dolphin sites don't appear to be part of "any web page". I've tried it for example in the description me area, comments, etc. with the html editor active and not active with no luck. It just saves/displays the embed code as text in the profile. 

I don't see any mods in the market for this. There is one mod that will accept the embed code but instead of embedding from Imgur, it just copies all of the photos in the album to my Dolphin site which defeats the purpose of having the images hosted on Imgur.

Quote · 20 May 2019

Dolphin has an Embed facility, but it seems to only work for Flickr. How the embed process works is something I've never tried.

I just added "Embed" from the list of upload options on the Photos Settings page and Embed is then offered as an option when you select an uploader when preparing to upload a photo. In my case, I received a message:

YOU SHOULD ADD YOUR FLICKR API KEY TO USE THIS FEATURE

You enter the key further down the page in photos/Settings

Flickr API Key. You Can Get Flickr API Keys Here: Http://Www.Flickr.Com/Services/Api/Keys/

Maybe Imgur has a similar API Key and maybe Dolphin is flexible enough to accept it. If not, there could be someone here clever enough to write some code for you.

It's an interesting concept because I have limited disk space on my site and I could probably use something similar.

Quote · 21 May 2019

You may have to switch to html view to add the code.  However, the problem may be that the TinyMCE editor is removing it or the htmlpurifier. 

In order to prevent members from adding bad code to your sites; everything is filtered through the htmlpurifier.  You can add exceptions to the htmlpurifier.  For example; on a site I manage I block all iframe except for the ones held in a "whitelist."  When someone adds an iframe; say from one of the allowed video hosting sites like Vimeo, the htmlpurifier checks to see if it is allowed.  If Imgur is using an iframe embed code, then you need to allow it.

See this discussion: https://www.boonex.com/forums/topic/HTMLpurifier-adding-other-iframe-conditions-.htm

Geeks, making the world a better place
Quote · 21 May 2019

I went to the website but they did not give an example of the embed code.

Geeks, making the world a better place
Quote · 21 May 2019

Thank you John and Geek_Girl,

 

You are right on John. The nature of my site means that lots of photos are desired and if they are hosted on Imgur instead of my server it makes life much better for me and allows users virtually unlimited images.

 

I will take a look at the solution you linked to GG. Interestingly, I've found that the embed code for Gfycat works right out of the box without mods to Dolphin. An example of Gyfycat code that can be successfully pasted into profile description is:  

<div style='position:relative; padding-bottom:calc(56.25% + 44px)'><iframe src='https://gfycat.com/ifr/CreepyDisguisedKilldeer' frameborder='0' scrolling='no' width='100%' height='100%' style='position:absolute;top:0;left:0;' allowfullscreen></iframe></div><p><a href="https://gfycat.com/gifs/search/game+of+thrones">from Game Of Thrones GIFs</a> <a href="https://gfycat.com/creepydisguisedkilldeer-game-of-thrones-kit-harington-jon-snow-direwolf">via Gfycat</a></p>

 

Unfortunately, the embed code for Imgur does not work. Its code seems to use a script rather than an iFrame. An example of the Imgur embed code is: 

<blockquote class="imgur-embed-pub" lang="en" data-id="a/XJPVGwT"><a href="//imgur.com/XJPVGwT">test</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
Quote · 21 May 2019

 

Thank you John and Geek_Girl,

 

You are right on John. The nature of my site means that lots of photos are desired and if they are hosted on Imgur instead of my server it makes life much better for me and allows users virtually unlimited images.

 

I will take a look at the solution you linked to GG. Interestingly, I've found that the embed code for Gfycat works right out of the box without mods to Dolphin. An example of Gyfycat code that can be successfully pasted into profile description is:  

<div style='position:relative; padding-bottom:calc(56.25% + 44px)'><iframe src='https://gfycat.com/ifr/CreepyDisguisedKilldeer' frameborder='0' scrolling='no' width='100%' height='100%' style='position:absolute;top:0;left:0;' allowfullscreen></iframe></div><p><a href="https://gfycat.com/gifs/search/game+of+thrones">from Game Of Thrones GIFs</a> <a href="https://gfycat.com/creepydisguisedkilldeer-game-of-thrones-kit-harington-jon-snow-direwolf">via Gfycat</a></p>

 

Unfortunately, the embed code for Imgur does not work. Its code seems to use a script rather than an iFrame. An example of the Imgur embed code is: 

<blockquote class="imgur-embed-pub" lang="en" data-id="a/XJPVGwT"><a href="//imgur.com/XJPVGwT">test</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>

You may have to go in and allow the script tag in TinyMCE as it is probably being removed.  That will require you editing the BxBaseEditor what's it.  I would have to look it up.  It is in the scripts of the Base template.  If this is important and you don't mind paying a fee, I would look at what you need to do to allow Imgur.

Geeks, making the world a better place
Quote · 21 May 2019

On the profile page you will need a block.  This might can be done through the profile fields builder.  Do you have a working Imgur embed code that I can play with?  I don't really want to join Imgur if you have something I can test.  You can send it to me in a PM.  If this works, it would be free.

Geeks, making the world a better place
Quote · 21 May 2019

Thank you Geek_girl. I have PM'd you an example of the valid embed code for a sample album that I made. If you need more, or if others want to test, you can get the embed code from any Imgur album (no joining required) by going to any Imgur album (for example https://imgur.com/gallery/eMnWzwS) and at the bottom of the album you'll see three dots (…) click on those dots to bring up the embed code.

Quote · 21 May 2019

OK, I think I have something that might work for you.  You need to add a text field to the edit profile page for the member to insert the Imgur embed code.  Then you need to create a php block in the admin to add to the profile page to hold the Imgur album.  You probably will need to work on styling for the block to fit properly.  If interested in the method I can PM it to you to play with.

Geeks, making the world a better place
Quote · 21 May 2019

Geek_girl, yes, absolutely interested in what you think might work. Please do send.

Quote · 21 May 2019
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.