Lightbox option for image in CMS rich text editor

Please add an option for an image in the CMS rich text editor to be clickable, so that a large size version is displayed lightbox style.

  • Markus J.
  • Jan 24 2017
CMS / Editor
  • Fabian Mahnke commented
    26 Sep 12:14pm

    oh yeh this is soooooooo necessary!

  • Matthew Mahan commented
    22 Apr 03:38am

    Please add :)

  • Sean commented
    3 Mar 09:39pm

    This is a glaring oversight and lack in very fundamental features for any sort of a blog or CMS, in such an otherwise mature and well-thought-out product as Webflow. Of course any blog author expects to make an uploaded photo or graphic expandable to full-size on clicking, as that has become expected behavior on the Web. Please fill the gap.

    PS: Workaround - Note that you CAN manually, laboriously add a link to each image in the rich text editor, that leads to the same image in its own browser tab (by clicking on the image in the RTE, clicking the wrench icon, clicking "Link" then pasting in the URL field the URL of the image (or larger version of the image that you've also hosted on webflow or elsewhere). That's not very elegant though and simply plops an image in an otherwise-empty browser tab, with no styling and missing the expected close/minimize controls.

  • Luan Rodriguez commented
    3 Nov, 2021 03:07pm

    4 years and no progress :/

  • Jen CHANG commented
    21 Feb, 2021 09:36pm

    Agree!!!!! Urgently needed!

  • Mustafa Kenan Yigitoglu commented
    9 May, 2020 10:26am

    Step-1

    Open custom code section and add that css source in top of head (Inside <head> tag) section.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

    Step-2

    Add that js source in top of body (Before </body> tag) section.


    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

    Step-3

    Give an ID to your text editor. I gave (editorInbox) in that case.

    Step-4

    Add that custom code below to "Step-2".

    <script>

    var valuOfImg = $("#editorInbox").find("img").length;

    //console.log(valuOfImg);

    if( valuOfImg == 1){

    var imgURL = $("#editorInbox").find("img").attr("src");

    var getImgData = imgURL.substring(imgURL.length , imgURL.length - 13);

    if(getImgData == "_lightbox.jpg" || getImgData == "_lightbox.png" || getImgData == "_lightbox.gif")

    {

    $("#editorInbox").find("img").wrap( '<a href="'+imgURL+'" data-fancybox="images"></a>' );

    }

    }

    if( valuOfImg > 1){

    var i;

    for (i = 0; i < valuOfImg; i++) {

    var imgURL = $("#editorInbox").find("img").eq(i).attr("src");

    var getImgData = imgURL.substring(imgURL.length , imgURL.length - 13);

    if(getImgData == "_lightbox.jpg" || getImgData == "_lightbox.png" || getImgData == "_lightbox.gif")

    {

    $("#editorInbox").find("img").eq(i).wrap( '<a href="'+imgURL+'" data-fancybox="images"></a>' );

    }

    }

    }

    </script>

    Step-5 (important!)

    You have to add _lightbox to end of your file name.

    (yourimagefilename_lightbox.jpg , yourimagefilename_lightbox.png , yourimagefilename_lightbox.gif, etc.)

    THATS IT :)

  • Dave Kim commented
    27 Feb, 2020 02:48am

    I agree!

  • Simone Taufenbach commented
    29 Jan, 2020 11:38am

    Any News here?

  • Nicolas Fol commented
    4 Apr, 2019 08:40am

    I absolutely need this! pls Webflow 

  • Nafta Studio commented
    27 Feb, 2019 08:05pm

    richtext option is an emergency more than e commerce for me, i know that store is attractive for new user and for webflow bank account but gallery and richtext image lightbox are musts.

  • Erwin Bomans commented
    2 Dec, 2018 12:17pm

    In need this to!

  • Erwin Bomans commented
    2 Dec, 2018 12:17pm

    I need this to!

  • Alex Cheng commented
    27 Jun, 2018 02:27am

    I would go as far as group this as part of the CMS gallery.

  • Alex Cheng commented
    27 Jun, 2018 02:14am

    Maxed out my 3 votes. Definitely a must. I would go as far as group this as part of the 

  • Brent Hegnauer commented
    24 Jun, 2018 03:49am

    I would give this all 15 votes if I coud

  • +82