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.

[@wpturk Participant 3 years, 11 months ago]

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 3 years, 11 months ago]

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 3 years, 11 months ago]

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 3 years, 11 months ago]

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 3 years, 11 months ago]

might be taking out spaces after the $ signs eg

return $ content;

should be

return $content;

[@neon67 Participant 3 years, 11 months ago]

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 3 years, 11 months ago]

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

[@neon67 Participant 3 years, 11 months ago]

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 3 years, 10 months ago]

@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 3 years, 10 months ago]

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 3 years, 10 months ago]

Hi @neon67
Thanks to reply

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

Best Regards,
Hyunho

[@neon67 Participant 3 years, 10 months ago]

yep, 4 example

[@purityboy83 Participant 3 years, 10 months ago]

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 3 years, 10 months ago]

very cool ))

[@purityboy83 Participant 3 years, 10 months ago]

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>';