Skip to:
Content
Pages
Categories
Search
Top
Bottom

Insert a common single lightbox link for all uploaded images in bbpress.

  • @neon67

    Participant

    I want to make all uploaded pictures open as …a class=”my-class” rel=”prettyPhoto” href=”pic_address”…

    I found how to filter all the necessary pictures through css. It’s like this:
    # bbpress-forums div.bbp-reply-content img, # bbpress-forums div.bbp-topic-content img
    {
    display: block;
    max-width: 100%;
    height: auto;}

    Question. What to add to the css or functions so that the picture gets a link like rel = “prettyPhoto”. Once I met a solution specifically for WordPress, but now I can’t remember…
    That can I do for this (through a css, filter or declarations provided by the loader for the class?)

    Thanks for a possible answer.

Viewing 15 replies - 1 through 15 (of 15 total)
  • @wpturk

    Participant

    I think you need to make this change in your attachment plugin if lightbox is not supported- Find output line of the image and add to the url: rel = “prettyPhoto”.

    @neon67

    Participant

    Thank you! But I’m looking for a way to apply link: data-rel=”prettyPhoto” target = “_ self” to all available bbpress images. It can be loaded in any way, it doesn’t matter.

    Found the code

    function add_image_responsive_class ($ content) {
        global $ post;
        $ pattern = "/ <img (. *?) class = \" (. *?) \ "(. *?)> / i";
        $ replacement = '<img $ 1class = "$ 2 img-responsive" $ 3>';
        $ content = preg_replace ($ pattern, $ replacement, $ content);
        return $ content;
    }
    add_filter ('the_content', 'add_image_responsive_class');

    but for wordpress. Will it work for bbpress?

    @robin-w

    Moderator

    probably filter on

    add_filter ('bbp_get_reply_content', 'add_image_responsive_class');
    add_filter ('bbp_get_topic_content', 'add_image_responsive_class');

    @neon67

    Participant

    oops .. fatal error ..
    trying to beat the other side. next digging towards how to open an innocent picture with target = “_ self” through css trick..

    task narrowed! )

    @robin-w

    Moderator

    might be taking out spaces after the $ signs eg

    return $ content;

    should be

    return $content;

    @neon67

    Participant

    ok ok – fixed a lot of syntax errors. Now the code looks like this and it works

    function add_image_responsive_class($content) {
        global $post;
        $pattern ="/<img(.*?)class=\"(.*?)\"(.*?)>/i";
        $replacement = '<img $1class="$2 img-responsive"$3>';
        $content = preg_replace($pattern, $replacement, $content);
        return $content;
    }
    add_filter ('bbp_get_reply_content', 'add_image_responsive_class');
    add_filter ('bbp_get_topic_content', 'add_image_responsive_class');

    Summary. I got a new picture class – img-responsive. But no new link appeared. How to make it open like a rel prettyPhoto … no ideas yet ..

    A feature is at stake – to allow all BBPforum pictures the last few years to open in a lightbox in full size. worth looking for a solution)

    @robin-w

    Moderator

    ok, so do you have a link to an example that works (say in worpress) and one that doesn’t in bbpress?

    @neon67

    Participant

    Ok, if it’s not difficult for you. This is a fake sandbox, sorry for the mess.
    dev.imhodom.ru/forums/topic/%d0%b0-%d0%b5%d1%81%d0%bb%d0%b8-%d0%bd%d0%b5-%d0%b7%d0%b0%d0%b3%d1%80%d1%83%d0%b6%d0%b0%d1%82%d1%8c-%d0%b0-%d0%b8%d0%b7-%d0%b1%d0%b8%d0%b1%d0%b8%d0%bb%d0%b8%d0%be%d1%82%d0%b5%d0%ba%d0%b8-%d0%b2/#post-256485

    see#post-256485. The top large picture is an old regular one. We are trying for.
    The bottom picture is how it should work.
    PS – The new pics class in functions is disabled now, but enable if needed, no problem.

    @purityboy83

    Participant

    @neon67

    HI @neon67
    I want to implement lightbox in bbpress like you do.

    beside creating the function below, what else should I do?
    Please share me installed plugins and other information

    ###############################################################
    function add_image_responsive_class($content) {
    global $post;
    $pattern =”/<img(.*?)class=\”(.*?)\”(.*?)>/i”;
    $replacement = ‘‘;
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
    }
    add_filter (‘bbp_get_reply_content’, ‘add_image_responsive_class’);
    add_filter (‘bbp_get_topic_content’, ‘add_image_responsive_class’);

    ################################################

    Best Regards,
    Hyunho

    @neon67

    Participant

    The easiest way is to install the GD attachments plugin – and in the settings note something like a class = ”my-class” rel = ”prettyPhoto”
    In addition, your WP must have a lightbox mechanism on board – there are many lightbox plugins in the repository. This script will to command light box style when you click on the picture.

    But I went the other way – I added a class with a new relay through the filters – and the lightbox mechanism is already built into my bbp-theme. This also works.

    @purityboy83

    Participant

    Hi @neon67
    Thanks to reply

    Did you use the “prettyphoto” plugin?
    (https://wordpress.org/plugins/prettyphoto)

    Best Regards,
    Hyunho

    @neon67

    Participant

    yep, 4 example

    @purityboy83

    Participant

    Hi

    i finally solved it with your idea, and i modified the function a little bit

    function add_image_responsive_class($content) {
        global $post;
        $pattern ="/<img src=\"(.*?)\"(.*?)>/i";
        $replacement = '<a href="$1" rel="prettyPhoto"><img src="$1"/>';
        $content = preg_replace($pattern, $replacement, $content);
        return $content;
    }
    add_filter ('bbp_get_reply_content', 'add_image_responsive_class');
    add_filter ('bbp_get_topic_content', 'add_image_responsive_class');

    thanks

    Best Regards,
    Hyunho

    @neon67

    Participant

    very cool ))

    @purityboy83

    Participant

    Oh! mistake
    did not close the tag “< / a>”

    $replacement = '<a href="$1" rel="prettyPhoto"><img src="$1"/>';
    
    to
    
    $replacement = '<a href="$1" rel="prettyPhoto"><img src="$1"/></a>';
Viewing 15 replies - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.
Skip to toolbar