Giter VIP home page Giter VIP logo

nodebb-plugin-imgur-preview's Introduction

NodeBB Imgur Plugin

A plugin that uploads images to Imgur and allows you to use custom HTML templates to give you more control over the way the images will be displayed.

This plugin might be superuseful for you if you want to seamlessly add a fancybox gallery or something like that to your NodeBB forum.

Installation

npm install nodebb-plugin-imgur-preview

or via NodeBB ACP

Templates

With the power of custom HTML templates, you can control exactly how images in posts will be displayed.

By default NodeBB doesn't have such templates. But it does mock with images in some way anyway. Take a look at the template which results in the exact same HTML, as if it would be produced via NodeBB without this plugin:

<a href="{{protocol}}://i.imgur.com/{{filename}}.{{ext}}" target="_blank">
  <img src="{{protocol}}://i.imgur.com/{{filename}}.{{ext}}" alt="{{altText}}" class="img-responsive img-markdown">
</a>

Well, what if you'd like to customize the output somehow? There is no way to do that by default in NodeBB. And that's why this plugin has been created. Now you gain full control of produced HTML code for images. Just imagine what you can do now. Please, take a look at another template example:

<a class="fancybox gallery-{{postData.pid}}" href="{{protocol}}://i.imgur.com/{{filename}}.{{ext}}">
  <picture>
    <source srcset="{{protocol}}://i.imgur.com/{{filename}}t.{{ext}}" media="(max-width: 280px)">
    <source srcset="{{protocol}}://i.imgur.com/{{filename}}m.{{ext}}" media="(max-width: 320px)">
    <source srcset="{{protocol}}://i.imgur.com/{{filename}}l.{{ext}}" media="(max-width: 640px)">
    <source srcset="{{protocol}}://i.imgur.com/{{filename}}h.{{ext}}" media="(max-width: 1024px)">
    <img src="{{protocol}}://i.imgur.com/{{filename}}.{{ext}}" alt="{{altText}}">
  </picture>
</a>

With less than 10 lines of code, this template will give you as the result huge bandwidth economy + independent galleries with images grouped by NodeBB post ID {{postData.pid}}.

Warning: no fancybox plugins are included. You have to include the one you've chosen youself.

Setup

  • Register an imgur app here, make sure you fill in the callback URL properly. It should be https://yourforum.com/admin/plugins/imgur-preview/oauth adjust based on your forum url.

  • Once you register you will get a client ID and secret.

  • Enter these values in your NodeBB ACP page.

  • After entering the values click Save and then Authorize, you will be redirected to imgur to allow access to your app.

  • Once you allow access you will be redirected back to nodebb.

  • Optinally create an album for your forum on imgur and put its album ID in the NodeBB ACP.

nodebb-plugin-imgur-preview's People

Contributors

megagm avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.