Notifications
Clear all

Script [Solved] Uploading and Embedding images

78 Posts
20 Users
20 Reactions
74.8 K Views
Posts: 1
Topic starter
(@sharonq)
Active Member
Joined: 8 years ago

I really need an "image" button on the toolbar that they can click - then either upload an image or add in a URL.

While embedding a URL is simple for those who are technically savvy for many normal users its impossible to figure out. 

These are: I have a picture of a kitty on my PC that I want to share with the rest of my group people.  Please consider adding an "image" button that will give the option of uploading or embedding.  Most forums I have been on have this option.

 

77 Replies
Posts: 1
(@andreherberth)
New Member
Joined: 8 years ago

Hi. If paste an image link it should automatically embed already, although the image would need to be uploaded at an external website.

Alternatively, it is possible now to attache an image and submit, then edit the post again, copying the attachment link and pasting that in the post as to embed it as an image. 

This is not to say that a proper image button would be nice in any case though. 

Robert
Posts: 10591
Admin
(@robert)
Support Team
Joined: 9 years ago

The default attachments are not file type sensitive. This code can help to detect images and show those as image. You should put this code in WordPress active theme functions.php file:

add_filter('wpforo_content_after', 'wpforo_default_attachment_image_embed', 11);
function wpforo_default_attachment_image_embed( $content ){
if( preg_match_all('|<a class=\"wpforo\-default\-attachment\" href\=\"([^\"\']+)\"[^><]*>.+?<\/a>|is', $content, $data, PREG_SET_ORDER) ){
foreach($data as $array){
if(isset($array[1])){
$file = $array[1];
$e = strtolower(substr(strrchr($file, '.'), 1));
if( $e === 'jpg' || $e === 'jpeg' || $e === 'png' || $e === 'gif' || $e === 'bmp' || $e === 'webp' ){
$filename = explode('/', $file); $filename = end($filename);
$html = '<a href="' . esc_url($file) . '" target="_blank"><img class="wpforo-default-image-attachment" src="' . esc_url($file) . '" alt="' . esc_attr($filename) . '" title="' . esc_attr($filename) . '" /></a>';
$content = str_replace($array[0], $html, $content);
}
}
}
}
return $content;
}

How to easily add custom code WordPress active theme functions.php file (without Breaking Your Site)

For an advanced file attachments features please check wpForo Advanced Attachments addon: https://gvectors.com/product/wpforo-advanced-attachments/

 

7 Replies
(@gdl40)
Joined: 8 years ago

New Member
Posts: 1

Entering the code into the WP theme functions.php worked perfectly for me....THANKS!

DarjeelingHills.Com
(@darjeeling)
Joined: 6 years ago

Estimable Member
Posts: 79

Seems interesting. I will try this.

(@dhyanakendra)
Joined: 6 years ago

Trusted Member
Posts: 38

Hi

Added this snippet to the child theme using Code Snippets, however still not working. Am I missing out anything here? Can you help me in this regards?

Sofy
 Sofy
Admin
(@sofy)
Joined: 7 years ago

Support Team
Posts: 4900

Hi @dhyanakendra,

We've just checked and the code works fine. Please make sure you've copied the correct code and added in the right place. Then delete all caches and check again. 

(@dhyanakendra)
Joined: 6 years ago

Trusted Member
Posts: 38

Hi

Please mark this as resolved as the issue has been resolved and the code snippet is working fine. Thank you again!

(@golabs)
Joined: 4 years ago

Trusted Member
Posts: 36

@robert is it also possible to define what the max size should me after the upload?

Or can it somehow work together with the Imsanity plugin?

Robert
Admin
(@robert)
Joined: 9 years ago

Support Team
Posts: 10591

@golabs,

You can use this CSS code to set max width to post images. Insert this CSS code in Dashboard > Forums > Settings > Styles > Custom CSS Code textarea, save it, delete all caches, go to forum front-end and press Ctrl+F5:

#wpforo #wpforo-wrap .wpforo-post .wpf-right .wpforo-post-content img {
    max-width: 60%;
}
Posts: 26
(@deanoaus)
Eminent Member
Joined: 8 years ago

What exactly does this code do? 

Does this detetch if the attachment is a photo, then displays it inside the post? If so, can this be edited to show a photo with dynamic resizing? I.e, it fits to the window on both desktop and mobile?

Robert
Posts: 10591
Admin
(@robert)
Support Team
Joined: 9 years ago

Does this detetch if the attachment is a photo, then displays it inside the post?

This will replace attached image link to image.

If so, can this be edited to show a photo with dynamic resizing? I.e, it fits to the window on both desktop and mobile?

All images in posts are responsive, this is too.

Page 1 / 14