Skip to content

plugin open link IMgur images

Customisation
7 2 2.5k 1
  • hi @phenomlab

    I open this thread in NodeBB comunauty
    https://community.nodebb.org/topic/748/nodebb-plugin-imgur-imgur-plugin/87

    I use the Imgur plugin to not host the files on the server.
    When we open an image, the plugin open directly the image on imgur in a new tab.

    Do you think it would be possible to open the images via fancybox or the internal NodeBB file reader via Javascript with the plugin activated?

    thanks

  • hi @phenomlab

    I open this thread in NodeBB comunauty
    https://community.nodebb.org/topic/748/nodebb-plugin-imgur-imgur-plugin/87

    I use the Imgur plugin to not host the files on the server.
    When we open an image, the plugin open directly the image on imgur in a new tab.

    Do you think it would be possible to open the images via fancybox or the internal NodeBB file reader via Javascript with the plugin activated?

    thanks

    @DownPW Not easy, because the IMGUR image is in a remote location not hosted by the forum itself. Not “impossible”, but a lot of effort.

  • phenomlabundefined phenomlab marked this topic as a regular topic on
  • hi @phenomlab

    I open this thread in NodeBB comunauty
    https://community.nodebb.org/topic/748/nodebb-plugin-imgur-imgur-plugin/87

    I use the Imgur plugin to not host the files on the server.
    When we open an image, the plugin open directly the image on imgur in a new tab.

    Do you think it would be possible to open the images via fancybox or the internal NodeBB file reader via Javascript with the plugin activated?

    thanks

    @DownPW I’ve just tested this, and it does actually work with Fancybox. See here for an example.

    This is an IMGUR based image, using the URL

    https://i.imgur.com/S0e4vwl.png

    The image is remote of course, but is still detected by Fancybox, and hence handled locally.

  • @phenomlab

    Sorry for my late reply mark, I’m on vacation 🙂

    @phenomlab said in plugin open link IMgur images:

    @DownPW I’ve just tested this, and it does actually work with Fancybox. See here for an example.

    This is an IMGUR based image, using the URL

    https://i.imgur.com/S0e4vwl.png

    The image is remote of course, but is still detected by Fancybox, and hence handled locally.

    ha yes !! How it works ?


    I have installed Fancybox on the server like you explain.

    I just noticed the following :

    The imgur plugin adds a description to the image in the following way:

    ![2a8646cc-9eb6-4274-a767-b129d51a1019-image.png](https://i.imgur.com/TAA1hi4.png)
    

    and this opens the image link in a new tab directly on imgur externally

    If I delete this description like this:

    ![](https://i.imgur.com/TAA1hi4.png)
    

    The image opens fine in Fancybox on the server

  • @phenomlab

    Sorry for my late reply mark, I’m on vacation 🙂

    @phenomlab said in plugin open link IMgur images:

    @DownPW I’ve just tested this, and it does actually work with Fancybox. See here for an example.

    This is an IMGUR based image, using the URL

    https://i.imgur.com/S0e4vwl.png

    The image is remote of course, but is still detected by Fancybox, and hence handled locally.

    ha yes !! How it works ?


    I have installed Fancybox on the server like you explain.

    I just noticed the following :

    The imgur plugin adds a description to the image in the following way:

    ![2a8646cc-9eb6-4274-a767-b129d51a1019-image.png](https://i.imgur.com/TAA1hi4.png)
    

    and this opens the image link in a new tab directly on imgur externally

    If I delete this description like this:

    ![](https://i.imgur.com/TAA1hi4.png)
    

    The image opens fine in Fancybox on the server

    @DownPW there’s a couple of options here. Either you could change the way the existing plugin works and remove the description field (meaning your also have to fork the extension and maintain it yourself) or you could write a relatively simple jQuery function that uses a regex to remove the value between the [] symbols, which would then mean three image would be rendered in Fancybox as desired, but still give you the ability to upload to Imgur.

    The downsides with this approach are that with multiple images, performance could be an issue, along with the regex function itself being a little too gratuitous and over reacting against other images on the page where a description is present.

    Certainly not beyond the realms of possibility, but performance is one area I’d be concerned with.

  • Hmm ok
    And you, what do you do for your result ?

  • Hmm ok
    And you, what do you do for your result ?

    @DownPW not sure what you mean. Can you elaborate ?


Related Topics
  • nodebb-plugin-custom-pages

    Solved Customisation plugin custom-pages
    5
    2
    3 Votes
    5 Posts
    4k Views
    @DownPW it’s possible, yes, but you may inadvertently end up targeting other elements using the same class which of course isn’t desired. Can you provide a link in DM for me to review?
  • hover link effect

    Solved Customisation css link hover
    18
    1
    6 Votes
    18 Posts
    5k Views
    @DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); }) The CSS for start is below .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; } And this is the corresponding keyframe @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } } It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.
  • Q&A Plugin Changes NodeBB

    Solved Customisation nodebb q&a plugin
    25
    1
    6 Votes
    25 Posts
    9k Views
    @phenomlab said in Q&A Plugin Changes NodeBB: float: right; left: 10px; } worked thank you
  • How to downgrade plugin version on NodeBB

    Solved Customisation downgrade nodebb
    11
    3 Votes
    11 Posts
    3k Views
    @cagatay no problems
  • Tenor GIF Plugin

    Solved Customisation plugin
    19
    1
    5 Votes
    19 Posts
    7k Views
    @phenomlab Also for me now Upgraded in ACP and all good . Thx.
  • Plugin Install Error

    Solved Customisation plugin error discord
    6
    1
    2 Votes
    6 Posts
    2k Views
    @Sampo2910 no problems. Happy to help. Just remember that this particular method isn’t the best in the sense that it may not get update notifications. The general recommendation here would be to move back to the official npm repo as soon as the GitHub version has been merged. For the meantime, it’ll work fine though.
  • Recent Cards plugin customization

    Solved Customisation nodebb
    21
    1
    13 Votes
    21 Posts
    10k Views
    @pobojmoks that’s easily done by modifying the code provided here so that it targets background rather than border In essence, the below should work $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $('.recent-card-container').each(function(i) { var dataId = $(this).attr("data-cid"); var color = $('[role="presentation"]', this).css("background-color"); console.log("data-cid " + dataId + " is " + color); $('[data-cid="' + dataId + '"] .recent-card').attr("style", "background-color: " + color); }); }); });
  • NodeBB Discord Plugins

    Unsolved Customisation nodebb discord plugin
    7
    0 Votes
    7 Posts
    3k Views
    @RiekMedia hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?