[nodebb-plugin-iframely] IFramely Embeds

julian

No, IFramely works on remote links, so if it's a local link, it might not work... or at the very least, IFramely wouldn't know how to turn that into a rich embed.

I think at present uploads just show up as a link for download or opening, right?

Per0x

@julian said in [nodebb-plugin-iframely] IFramely Embeds:

I think at present uploads just show up as a link for download or opening, right?

Right

scottalanmiller

Testing this out for us now.

crazycells

@Hawthorn said in [nodebb-plugin-iframely] IFramely Embeds:

Would someone mind posting their iframely config file as an example? I'm trying to self-host iframely on my server and I've been having difficulty configuring the file, and perhaps putting it in the correct location.

My NodeBB is in my home folder and I've got it set up with a typical Nginx proxy.

This is ours:


(function() {
    var config = {

        // Specify a path for custom plugins. Custom plugins will override core plugins.
        // CUSTOM_PLUGINS_PATH: __dirname + '/yourcustom-plugin-folder',

        DEBUG: false,
        RICH_LOG_ENABLED: false,

        // For embeds that require render, baseAppUrl will be used as the host.
        //@crazycells Enter host or IP here;
        baseAppUrl: "HOST OR IP",
        relativeStaticUrl: "/r",

        // Or just skip built-in renders altogether
        SKIP_IFRAMELY_RENDERS: true,

        // For legacy reasons the response format of Iframely open-source is
        // different by default as it does not group the links array by rel.
        // In order to get the same grouped response as in Cloud API,
        // add `&group=true` to your request to change response per request
        // or set `GROUP_LINKS` in your config to `true` for a global change.
        GROUP_LINKS: true,

        // Number of maximum redirects to follow before aborting the page
        // request with `redirect loop` error.
        MAX_REDIRECTS: 4,

        SKIP_OEMBED_RE_LIST: [
            // /^https?:\/\/yourdomain\.com\//,
        ],

        /*
        // Used to pass parameters to the generate functions when creating HTML elements
        // disableSizeWrapper: Don't wrap element (iframe, video, etc) in a positioned div
        GENERATE_LINK_PARAMS: {
            disableSizeWrapper: true
        },
        */

        port: 8061, //can be overridden by PORT env var
        host: '0.0.0.0',    // Dockers beware. See https://github.com/itteco/iframely/issues/132#issuecomment-242991246
                            //can be overridden by HOST env var

        // Optional SSL cert, if you serve under HTTPS.
        /*
        ssl: {
            key: require('fs').readFileSync(__dirname + '/key.pem'),
            cert: require('fs').readFileSync(__dirname + '/cert.pem'),
            port: 443
        },
        */

        /*
        Supported cache engines:
        - no-cache - no caching will be used.
        - node-cache - good for debug, node memory will be used (https://github.com/tcs-de/nodecache).
        - redis - https://github.com/mranney/node_redis.
        - memcached - https://github.com/3rd-Eden/node-memcached
        */
        CACHE_ENGINE: 'node-cache',
        CACHE_TTL: 0, // In milliseconds.
        // 0 = 'never expire' for memcached & node-cache to let cache engine decide itself when to evict the record
        // 0 = 'no cache' for redis. Use high enough (e.g. 365*24*60*60*1000) ttl for similar 'never expire' approach instead

        /*
        // Redis cache options.
        REDIS_OPTIONS: {
            host: '127.0.0.1',
            port: 6379
        },
        */

        /*
        // Memcached options. See https://github.com/3rd-Eden/node-memcached#server-locations
        MEMCACHED_OPTIONS: {
            locations: "127.0.0.1:11211"
        }
        */

        /*
        // Access-Control-Allow-Origin list.
        allowedOrigins: [
            "*",
            "http://another_domain.com"
        ],
        */

        /*
        // Uncomment to enable plugin testing framework.
        tests: {
            mongodb: 'mongodb://localhost:27017/iframely-tests',
            single_test_timeout: 10 * 1000,
            plugin_test_period: 2 * 60 * 60 * 1000,
            relaunch_script_period: 5 * 60 * 1000
        },
        */

        // If there's no response from remote server, the timeout will occur after
        RESPONSE_TIMEOUT: 5 * 1000, //ms

        // Customize API calls to oembed endpoints.
        ADD_OEMBED_PARAMS: [{
            // Endpoint url regexp array.
            re: [/^http:\/\/api\.instagram\.com\/oembed/],
            // Custom get params object.
            params: {
                hidecaption: true
            }
        }, {
            re: [/^https:\/\/www\.facebook\.com\/plugins\/page\/oembed\.json/i],
            params: {
                show_posts: 0,
                show_facepile: 0,
                maxwidth: 600
            }
        }, {
            // match i=user or i=moment or i=timeline to configure these types invidually
            // see params spec at https://dev.twitter.com/web/embedded-timelines/oembed
            re: [/^https?:\/\/publish\.twitter\.com\/oembed\?i=user/i],
            params: {
                limit: 1,
                maxwidth: 600
            }
        /*
        }, {
            // Facebook https://developers.facebook.com/docs/plugins/oembed-endpoints
            re: [/^https:\/\/www\.facebook\.com\/plugins\/\w+\/oembed\.json/i],
            params: {
                // Skip script tag and fb-root div.
                omitscript: true
            }
        */
         }],

        /*
        // Configure use of HTTP proxies as needed
        PROXY: [{
            re: [/^https?:\/\/www\.domain\.com/],
            proxy_server: 'http://1.2.3.4:8080',
            user_agent: 'CHANGE YOUR AGENT',
            headers: {
                // HTTP headers
                // Overrides previous params if overlapped.
            },
            request_options: {
                // Refer to: https://github.com/request/request
                // Overrides previous params if overlapped.
            }
        }],
        */

        // Customize API calls to 3rd parties. At the very least - configure required keys.
        providerOptions: {
            locale: "en_US",    // ISO 639-1 two-letter language code, e.g. en_CA or fr_CH.
                                // Will be added as highest priotity in accept-language header with each request.
                                // Plus is used in FB, YouTube and perhaps other plugins
            "twitter": {
                "max-width": 550,
                "min-width": 250,
                hide_media: false,
                hide_thread: false,
                omit_script: false,
                center: false,
                // dnt: true,
                cache_ttl: 100 * 365 * 24 * 3600 // 100 Years.
            },
            readability: {
                enabled: false
                // allowPTagDescription: true  // to enable description fallback to first paragraph
            },
            images: {
                loadSize: false, // if true, will try an load first bytes of all images to get/confirm the sizes
                checkFavicon: false // if true, will verify all favicons
            },
            tumblr: {
                consumer_key: "INSERT YOUR VALUE"
                // media_only: true     // disables status embeds for images and videos - will return plain media
            },
            google: {
                // https://developers.google.com/maps/documentation/embed/guide#api_key
                maps_key: "INSERT YOUR VALUE"
            },

            /*
            // Optional Camo Proxy to wrap all images: https://github.com/atmos/camo
            camoProxy: {
                camo_proxy_key: "INSERT YOUR VALUE",
                camo_proxy_host: "INSERT YOUR VALUE"
                // ssl_only: true // will only proxy non-ssl images
            },
            */

            // List of query parameters to add to YouTube and Vimeo frames
            // Start it with leading "?". Or omit alltogether for default values
            // API key is optional, youtube will work without it too.
            // It is probably the same API key you use for Google Maps.
            youtube: {
                // api_key: "INSERT YOUR VALUE",
                get_params: "?rel=0&showinfo=1"     // https://developers.google.com/youtube/player_parameters
            },
            vimeo: {
                get_params: "?byline=0&badge=0"     // https://developer.vimeo.com/player/embedding
            },

            /*
            soundcloud: {
                old_player: true // enables classic player
            },
            giphy: {
                media_only: true // disables branded player for gifs and returns just the image
            }
            */
            /*
            bandcamp: {
                get_params: '/size=large/bgcol=333333/linkcol=ffffff/artwork=small/transparent=true/',
                media: {
                    album: {
                        height: 472,
                        'max-width': 700
                    },
                    track: {
                        height: 120,
                        'max-width': 700
                    }
                }
            }
            */
        },

        // WHITELIST_WILDCARD, if present, will be added to whitelist as record for top level domain: "*"
        // with it, you can define what parsers do when they run accross unknown publisher.
        // If absent or empty, all generic media parsers will be disabled except for known domains
        // More about format: https://iframely.com/docs/qa-format

        /*
        WHITELIST_WILDCARD: {
              "twitter": {
                "player": "allow",
                "photo": "deny"
              },
              "oembed": {
                "video": "allow",
                "photo": "allow",
                "rich": "deny",
                "link": "deny"
              },
              "og": {
                "video": ["allow", "ssl", "responsive"]
              },
              "iframely": {
                "survey": "allow",
                "reader": "allow",
                "player": "allow",
                "image": "allow"
              },
              "html-meta": {
                "video": ["allow", "responsive"],
                "promo": "allow"
              }
        }
        */
    };

    module.exports = config;
})();

crazycells

@PitaJ Hi PitaJ, thanks for the CSS code, but it did not work for us. We are hosting iframely on our server. It was showing the thumbnail extremely large (you can see the images below), which was very unpractical to read.

Instead of the code you wrote, I solved the issue with this:

.iframely-link .iframely-container img.img-responsive{
    max-width: 150px !important;
    max-height: 150px !important;
}

Do you think it is ok to fix img-responsive ?

But, as you can tell from the pictures below, it is still problematic, because text is not written on the right side, rather it takes more space below the image.

Do you have any recommendation to fix the appearance and make it look like the embeds in iframely website?

And this is how it looks without CSS:

Screen Shot 2019-06-23 at 12.36.40 PM.png

And this is after the CSS code applied:

Screen Shot 2019-06-23 at 12.39.28 PM.png

julian

Adding a float: left; should work... give that a try?

crazycells

@julian said in [nodebb-plugin-iframely] IFramely Embeds:

Adding a float: left; should work... give that a try?

Thanks, it worked... This is the code I used, in case anyone else need it later...

.iframely-link .iframely-container .img-responsive {
    height:120px !important;
    width: auto !important;
    overflow: hidden !important;
}


.iframely-link .iframely-container .media {
    float: left !important;
    padding: 0 10px 0 0 !important;
}

.iframely-link .iframely-container .description {
    position: relative !important;
    top: 15px !important;
}

Mombius

This post is deleted!

crazycells

Plugin does not work with 1.13.4-5 , should we wait for the stable version of 1.13.4? or this error is expected to stay and I should create a github issue?

crazycells

Hi everyone,

If you are self-hosting free iframely, but not happy with how big it looks, unlike the paid one. Here is the most current CSS changes we use for the iframely.

It is still not as pretty as the original iframely embeds, but I believe it is way better than the default one.

Feel free to change/edit it as you like:


.iframely-link .iframely-container {
    
    .img-responsive {
    height:120px !important;
    width: auto !important;
    overflow: hidden !important;
    }


    .iframely-meta {
    display: none !important;
    }


    .media {
    float: left !important;
    padding: 0 5px 0 0 !important;
    }
    
    .media-heading {
    margin-top: 5px;
    margin-bottom: 2px;
    }

    .description {
    position: relative !important;
    top: 10px !important;
    }

    .panel-iframely .iframely-embed .one-line {
    white-space: normal;
    }
    
    .panel-body {
    padding: 5px;
    }
}

josef

How do I customize the embedding of YouTube videos (I want to embed the videos with another lazy YouTube embedding plugin)?
I exceeded the

https://www.youtube.com/
https://youtu.be/

And it still assimilates ...