Topic Thumbnail ?

jannysoft

I am currently using the 2.1b of Vanilla and I am simply loving it.

One thing tho I am trying to figure out is how to sync post with image. what I am trying to achieve basically is to give an url or maybe upload an image from my local drive and display it as a thumbnail next to post title on the home page.

Any ideas or suggestions will be highly appreciated.

Thanks in advance.

peregrine

@jannysoft

I went with @vrijvlinder thought that the indexphotos plugin could be modified.
It seemed the easiest to implement.

I was toying with adding a plugin, but it was essentially a rip-off of index photos by @Lincoln. So I decided against creating a cloned plugin with a few lines change. But if it works, and it seems valid, i could upload a plugin. But not until I know this works for you and get an ok from Lincoln. What is politically correct here?

Instead, you can download indexphotos.

This routine will pull out "src html" from the first image in the discussion body (not the comments) and place it a thumbnail of the image in your discussions page.

At least it worked for me with images that are posted as links. I didn't test with uploaded images. If it doesn't work for you, it may be a good starting point.

and replace the routine

  protected function DisplayPhoto($Sender) {
      // Build user object & output photo
      $FirstUser = UserBuilder($Sender->EventArguments['Discussion'], 'First');
      echo UserPhoto($FirstUser);
   }

to

  protected function DisplayPhoto($Sender) {
      $body = $Sender->EventArguments['Discussion']->Body;

      preg_match('#\<img(.+?)src=(.+?)\>#s', $body, $matches);
      $image = "src=" . $matches[2];
      echo '<img class="ProfilePhotoSmall"' . $image . '>';

   }

aery

You mean different thumbnails to different posts according to that post contents or some set of thumbnails according to category?

hgtonight

@aery I think he means a custom image for each discussion.

Is this right, @jannysoft?

jannysoft

yes I would like to have a thumbnail for every "post/discussion" lets say the discussion is about a funny picture and I want to have that picture as a thumbnail aside the discussion on the front page where all the discussions are.

vrijvlinder

I think that could be done as a hover element , they hover over the link to the discussion and see a preview image. Managing so many images is not easy.

new/post has image=>title img (plugin sends image thumbnail to discussion index).

If there was no image ? or all posts are about images? maybe getting the preview to appear when hovered is you best option. People here can do some magic so it may be possible.

jannysoft

@vrijvlinder : this is also an Idea. I actually like it much more to have the thumbnail in a tooltip. This way the front page will not have big gaps in between the posts.

Any ideas how to create a tooltip showing the first image from a post ?

vrijvlinder

I am not sure I could do it but it seems possible . Yes better to have it as a hovered element than images on there. Your page would take long to load.And what if some discussions have permissions on them .Like only certain people can view. That variable would have to be included so they could not see anything when hovering.In this case the pop up works better coz you can make it not pop when clicked for those without permission.

One must decide from where the image will be taken. The thumbnail would have to come from the uploads folder if you were to use the thumb created when uploading.

Then a method to link the thumbnail to the title. Instructions to either pop up the entire preview or a small window with preview , or just the thumbnail.
Or for the thumb to appear only when hovered.

It would be easier maybe if you had a set of images to use that would signal what the thread contained. Like icons of funnypicture if it contained funny pictures, etc.

vrijvlinder

I was thinking that the indexphotos plugin sends the author's image next to the discussion title on the index. Maybe there is a way to modify it to also get the discussion thumbnail.

hgtonight

Considering the discussions model has the body text in it, this should be possible through modifying the view. Copy the /applications/vanilla/views/discussions/helper_functions.php file to /themes/yourtheme/views/discussions/helper_functions.php.

Then look into modifying the WriteDiscussion method to include a tooltip div. You can do permissions checking here if you want. You will have to include some tooltip css/js depending on how you want it shown.

x00

There are also a bunch of hooks in that file, which would be a more elegant solution that coping across an modify it, you wan to avoid doing that unless you absolutely have to.

peregrine

@jannysoft

I went with @vrijvlinder thought that the indexphotos plugin could be modified.
It seemed the easiest to implement.

I was toying with adding a plugin, but it was essentially a rip-off of index photos by @Lincoln. So I decided against creating a cloned plugin with a few lines change. But if it works, and it seems valid, i could upload a plugin. But not until I know this works for you and get an ok from Lincoln. What is politically correct here?

Instead, you can download indexphotos.

This routine will pull out "src html" from the first image in the discussion body (not the comments) and place it a thumbnail of the image in your discussions page.

At least it worked for me with images that are posted as links. I didn't test with uploaded images. If it doesn't work for you, it may be a good starting point.

and replace the routine

  protected function DisplayPhoto($Sender) {
      // Build user object & output photo
      $FirstUser = UserBuilder($Sender->EventArguments['Discussion'], 'First');
      echo UserPhoto($FirstUser);
   }

to

  protected function DisplayPhoto($Sender) {
      $body = $Sender->EventArguments['Discussion']->Body;

      preg_match('#\<img(.+?)src=(.+?)\>#s', $body, $matches);
      $image = "src=" . $matches[2];
      echo '<img class="ProfilePhotoSmall"' . $image . '>';

   }

jannysoft

@peregrine wow you just made my day. I will test right away I hope it works.

peregrine

let us know.

jannysoft

If anyone has an idea how to do the tooltip please also share it. I will highly appreciate it !

vrijvlinder

@peregrine said: i could upload a plugin. But not until I know this works for you and get an ok from Lincoln. What is politically correct here?

In my opinion and based on the discussions we have had with Todd and UnderDog , a new plugin can be made out of the existing plug in, as long as the source was given credit. And the purpose was different than the original so as not to make the same plugin over and over and just change the name. (like the liker plugin)

For example

$PluginInfo['IndexThumb'] = array(
   'Name' => 'IndexThumb',
   'Description' => "Adds thumbnail to discussions list.It is based on the IndexPhoto plugin by Lincoln",
   'Version' => '1.0',
   'RequiredApplications' => array('Vanilla' => '2.0.18.8'),
   'RegisterPermissions' => FALSE,
   'Author' => "Matt Lincoln Russell" with modifications by peregrine,
   'AuthorEmail' => 'email',
   'AuthorUrl' => 'http://lincolnwebs.com'
);

peregrine

I'd like to hear from Lincoln before I do anything.

vrijvlinder

Yea I forgot that part , asking for permission from the author, yes indeed.

vrijvlinder

If anyone has an idea how to do the tooltip please also share it. I will highly appreciate it !

I have used various methods. One would be making the index thumb very small the size of an icon. and add

body.Vanilla.Discussions .ItemContent.Discussion a img{ width:40px;height:auto;}

body.Vanilla.Discussions .ItemContent.Discussion a img:hover{ width:150px;height:auto;}

this would make it appear when hovered in a larger size.

Then there is the jquery method

http://jqueryui.com/tooltip/

and there is also variables of that

http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

peregrine

@jannysoft said:
If anyone has an idea how to do the tooltip please also share it. I will highly appreciate it !

@jannysoft
You accepted the answer, so I assume it worked after you tested it.

It all depends what you want to do and you need to explain it. Does the mod I gave you work and you just want to enlarge the image during hover, or do you want to hover over the discussion title to bring up just image or whole discussion.

At one time one of kasper's themes had tooltip built in. @kasperisager ....

I've got a discussion tooltip plugin for 2.0.18.4 but it is a kluge and I might abandon it.

---

this would be a cleaner replacement then the one previously posted

with reference to

     protected function DisplayPhoto($Sender) {
    // Build user object & output photo
    $FirstUser = UserBuilder($Sender->EventArguments['Discussion'], 'First');
    echo UserPhoto($FirstUser);
    }

you could also add

  protected function DisplayPhoto($Sender) {
    $body = $Sender->EventArguments['Discussion']->Body;
    preg_match('#\<img(.+?)src=(.+?)\>#s', $body, $matches);
    $image = $matches[2];
    if ($image) { 
    $image = "src=" . $image. '>' ;
    echo '<img class="ProfilePhotoSmall"' . $image;
  }   

River

Since the moderators don't seem to split discussions and/or place them in the correct categories if needed - and understandably so, since it creates more work ...

@linc - Any consideration of closing older discussions that relate to category " 2.1 and earlier help". Essentially they attract STKI comments.

STKI - Spammer, Troll and Knuckleheads, and people using Insecure older versions of vanilla.

Granted there is the off-chance it won't be an STK comment and could be a well-thought out genuine comment, it seems that is not very common.

99% of the time users post into the older discussion with a nonsense or irrelevant comment that has nothing to to with the discussion, when they should be starting a new discussion or upgrading to a secure version of vanilla.

From what I've seen there is not much interest in supporting versions of vanilla that precede the current stable version of vanilla. It is great that the older comments in the vanilla 2.1 and earlier category come up in the search, but usually the additional comments that come years later after the discussions was started, add nothing of significance and attract STK. So, a searchable but closed discussion for Category "2.1 and earlier" would be beneficial to the majority of users. A link back to an older discussion could always be made in the new discussion.

Most of the time a new discussion would also help any future users reading the discussion since it requires a thought out relevant title and clear explanation of what is needed.

here is another example of a comment appended to a specific plugin, which would have been better posted as a new discussion.

https://vanillaforums.org/discussion/31078/addon-did-not-show-on-dashboard-for-enabling