The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How can I add some infos about last post in the Board Index

View previous topic View next topic Go down

Solved How can I add some infos about last post in the Board Index

Post by Van-Helsing on February 22nd 2014, 4:27 pm

Hi dear all,
How can I add a thumbnail(with post's image), post title of the last post under a forum's description here http://prntscr.com/2ut7x3 my forum version is phpbb2.

With Best Regards,
Dark-Avenger


Last edited by Dark-Avenger on March 5th 2014, 2:13 am; edited 1 time in total

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by Luffy on February 22nd 2014, 8:57 pm

You want to put the title of the category below the description?






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by Van-Helsing on February 22nd 2014, 9:41 pm

Not exactly, I want to put under the forum description a thumbnail (image of the last post) and the title of the last post.

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by Luffy on February 23rd 2014, 11:08 am

That would look nice if it had a box around it also. Though to do that you must change the template commands to make the row of each category or at least the last column in the first column command so it will appear where you wish.

(I don't know if this will work)
You could also duplicate the items you want to put under the description and have them in the column they are now and also have them below the description also!






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by Van-Helsing on February 25th 2014, 2:16 am

Bump

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by Van-Helsing on February 27th 2014, 11:29 pm

Bump

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by Van-Helsing on March 2nd 2014, 10:21 pm

Bump

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by JScript on March 2nd 2014, 10:36 pm

@Dark-Avenger

Hello, what you want is quite possible yes, but to have the thumbnail of the post you will need to make a request to the latter topic and with that you'll have trouble with the Request Limit!

Surely you will not want it because you already have this problem, do you remember: http://help.forumotion.com/t130972-how-can-i-add-avatar-in-recent-topics-widget

So long,

JS

JScript
Forumember

Male Posts : 741
Reputation : 167
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by Van-Helsing on March 2nd 2014, 10:41 pm

@JScript wrote:@Dark-Avenger

Hello, what you want is quite possible yes, but to have the thumbnail of the post you will need to make a request to the latter topic and with that you'll have trouble with the Request Limit!

Surely you will not want it because you already have this problem, do you remember: http://help.forumotion.com/t130972-how-can-i-add-avatar-in-recent-topics-widget

So long,

JS
No at this topic I need somthing similar like this


This screenshot from inside a forum (in the topic list) with a topic image preview as you can see.

Best regards,
Dark-Aevenger

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by JScript on March 2nd 2014, 11:10 pm

Ok, post where you seen this effect so that we can analyze and adapt to your forum!

So long,

JS

JScript
Forumember

Male Posts : 741
Reputation : 167
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by Van-Helsing on March 2nd 2014, 11:50 pm

@JScript wrote:Ok, post where you seen this effect so that we can analyze and adapt to your forum!

So long,

JS
This screenshot is from an IPB forum and I am wonder if we can we do this or something similar in our forums. The image which you can see in the screenshot becomes from the latest's post image.

Regards,
Dark-Avenger

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by JScript on March 2nd 2014, 11:56 pm

Yes, I understood, but I ask you post a url that corresponds to the effect ok?

JS

JScript
Forumember

Male Posts : 741
Reputation : 167
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by Van-Helsing on March 3rd 2014, 12:15 am

@JScript wrote:Yes, I understood, but I ask you post a url that corresponds to the effect ok?

JS
I was try to login in the site which I saw that but is under construction as you can see
Spoiler:
greek-heaven.info
.

But I ve just found the name of this module which is Topic Thumbnail if it can helps.

Update1:
Hi,
I have contacted administrator of the site
Spoiler:
and he was open the forum to check it. Here are the user account details which you can connect:

Spoiler:

Username: pepas
Password: hr##196111

Please connect with these details to check this function.

Best Regards,
Dark-Avenger

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by JScript on March 3rd 2014, 7:25 pm

I could see the project through the link http://community.invisionpower.com/files/file/5946-bim34-topic-thumbnail/

I assure you it is perfectly possible to adapt entirely to Forumotion but will use ajax and it requests that will bring about the protection of the Request Limit!

Read:
Automatically takes an image from the first post of topic (include attachment image) and display it as topic thumbnail.

Your forum is already a lot of requests and adding with this would be several more!

It's just my two cents ...

JS

JScript
Forumember

Male Posts : 741
Reputation : 167
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by Van-Helsing on March 3rd 2014, 8:41 pm

Can we try it?

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by JScript on March 3rd 2014, 8:47 pm

Yes, definitely, cuz I like everything that is implemented in IPBoard and I can always adapt to Forumotion!

You will have to wait a while until the implementation is complete ok?


Edit:

The code was already done, now we just need to implement some functions to make it more enjoyable!

Main features:
- Automatically takes an image from the first post of topic (include attachment image) and display it as topic thumbnail.
- Preview image when hover the thumbnail.
- The image is loaded only if is visible in view port! Bye-Bye Request Limit...

Just add this code in the JavaScript section with investment in sub-forums:
Code:

/***
 * Application: Topic Thumbnail
 * Description: This application can displays thumbnails of topics.
 * Version: 1.03032014-jq1.9.1 - Udyat (Argumentum parvam)
 * Made and Optimizations by JScript - 2014/03/03
 * View more in: http://ajuda.forumeiros.com
 * Copyright (c) 2013 JScript <jscriptbrasil at live dot com>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 */
jQuery(function () {
    var sCSS =
        '<style>' +
        '.bim_mainThumb {' +
            'opacity: 1;' +
            'visibility: visible;' +
            'max-width: none;' +
            'max-height: none;' +
            'width: 100%;' +
            'height: auto;' +
            'display: block;' +
            'image-rendering: auto' +
        '}' +
        '.bim_thumbPreview {' +
            'float: right;' +
            'position: relative;' +
            'z-index: 0;' +
        '}' +
        '.bim_img_container {' +
            'height: 70px;' +
            'width: 70px;' +
        '}' +
        '.bim_thumbPreview span {' +
            'box-shadow: 0 6px 6px rgba(0, 0, 0, 0.5);' +
            'margin-left: 84px;' +
            'margin-top: -68px;' +
            'position: absolute;' +
            'visibility: hidden;' +
            'z-index: 100;' +
        '}' +
        '.bim_thumbPreview:hover span {' +
            'visibility: visible;' +
        '}' +
        '.bim_thumbPreview span img {' +
            'border: 3px solid #000000;' +
            'max-width: 300px;' +
        '}' +
        '</style>';
    document.head.insertAdjacentHTML('beforeEnd', sCSS);

    var sHtml =
            '<a class="bim_thumbPreview">' +
                '<div style="padding: 1px; border: 1px solid #d5d5d5;">' +
                    '<div class="thumbIMG">' +
                        '<div class="bim_img_container" style="overflow: hidden; background-image: none;">' +
                            '<img src="http://illiweb.com/fa/empty.gif" class="bim_mainThumb">' +
                        '</div>' +
                    '</div>' +
                '</div>' +
                '<span class="previewIMG"><img src="http://i55.servimg.com/u/f55/18/17/62/92/no_ima10.jpg"></span>' +
            '</a>';
   
    var oTarget = 0,
        sFound = 'td:eq(2)',
        sInsert = '',
        sCommon = 'a.topictitle',
        sOverflow = 'auto',
        sGetIMG = '';
       
    /* Forum versions! */
    var phpBB2 = jQuery('.three-col td:eq(1) > table.forumline:last tbody tr:not(":empty")');
    var phpBB3 = jQuery('.topiclist.topics.bg_none li:not(":empty")');
    var punbb = jQuery('.statused tr:not(":empty")');
    var invision = jQuery('.borderwrap table.ipbtable tbody tr:not(":empty")');
   
    if (phpBB2.length) {
        oTarget = phpBB2;
        sInsert = 'div.topictitle';
        sGetIMG = '.postbody:first div:eq(0) img';
    } else if(phpBB3.length) {
        oTarget = phpBB3;
        sFound = 'dd.dterm';
        sInsert = 'div.topic-title-container';
        sOverflow = 'inherit';
        sGetIMG = '.postbody:first .content img';
    } else if(punbb.length) {
        oTarget = punbb;
        sFound = '.tcl.tdtopics';
        sInsert = 'span.status';
        sGetIMG = '.entry-content:first img';
    } else if(invision.length) {
        oTarget = invision;
        sInsert = sCommon;
        sGetIMG = '.post-entry:first img';
    };

    oTarget.each(function( index ) {
        var oFound = jQuery(this).find(sFound);
        if (oFound.length) {
            var oInsert = oFound.find(sInsert);
            var sUrl = oFound.find(sCommon).attr('href');
            var ID = 'Udyat_' + index;

            oFound.attr('id', ID);
            oFound.css('overflow', sOverflow);
            jQuery(sHtml).insertAfter(oInsert);

            /***
            * Only show the image if is visible in browser window (view port)!!!
            * Made and Optimizations by JScript at www.punbb.forumeiros.com
            */
            var elem = document.getElementById( ID );       
            if (isInViewPort(elem)) {
                jQuery.get(sUrl, function(data) {
                    var oImg = jQuery(sGetIMG, data);
                    var sImg = '';

                    if (oImg !== undefined) {
                        sImg = oImg.attr('src');
                        if (sImg !== undefined) {
                            oFound.find('.bim_img_container img').attr('src', sImg);
                            oFound.find('.previewIMG img').attr('src', sImg);
                        } else {
                            oFound.find('.bim_img_container img').attr('src', 'http://i55.servimg.com/u/f55/18/17/62/92/no_ima10.jpg');
                        }
                    }
                });
            } else {
                /* Fire event for 'scroll' to show the image... */
                jQuery(window).on('scroll.' + sUrl, showImage(sUrl, elem, oFound, sGetIMG));
            }
        }
    });
});
/* Function to check if an element is visible in view port */
function isInViewPort(elem) {
   var rect = elem.getBoundingClientRect();

   return (
   rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
   rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ );
}
/* Start function to show the image... */
function showImage(event, elem, oBject, sString) {
   return function() {
        /* Chech if the element is visible in view port! */
      if (isInViewPort(elem)) {
            /* If visible, stop event!!! */
         jQuery(window).off('scroll.' + event);
            jQuery.get(event, function(data) {
                var oImg = jQuery(sString, data);
                var sImg = '';

                if (oImg !== undefined) {
                    sImg = oImg.attr('src');
                    if (sImg !== undefined) {
                        oBject.find('.bim_img_container img').attr('src', sImg);
                        oBject.find('.previewIMG img').attr('src', sImg);
                    } else {
                        oBject.find('.bim_img_container img').attr('src', 'http://i55.servimg.com/u/f55/18/17/62/92/no_ima10.jpg');
                    }
                }
            });
        }
   }
}

Result:
Spoiler:
01-


02-

Why I added the thumbnail at the end of the title?
Answer: Because I liked it that way and I let those who wish to change the location of the thumb as a learning experience!

To Do:
- Option to show topics as gallery;
- Topic's authors or member groups that you specify can change thumnail by clicking on the thumbnail and choosing an image from topic or from URL;
- Set thumbnail width and height for each forum;
- Automatically resize and crop images in a smart way that does not distort images.

So long,

JS


Last edited by JScript on March 5th 2014, 1:31 am; edited 6 times in total (Reason for editing : The code was already done!)

JScript
Forumember

Male Posts : 741
Reputation : 167
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by Van-Helsing on March 5th 2014, 12:38 am

Its working nice, but I cant move it to another position due mixing JS and CSS, can you separate it into two different codes js and css code?

Best Regards,
Dark-Avenger

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by JScript on March 5th 2014, 12:50 am

@Dark-Avenger

Reread:
@JScript wrote:Why I added the thumbnail at the end of the title?
Answer: Because I liked it that way and I let those who wish to change the location of the thumb as a learning experience!

I want to help you, but at the same time I want you to strive and learn too!


Remove this piece of code:
Code:

    var sCSS =
        '<style>' +
        '.bim_mainThumb {' +
            'opacity: 1;' +
            'visibility: visible;' +
            'max-width: none;' +
            'max-height: none;' +
            'width: 100%;' +
            'height: auto;' +
            'display: block;' +
            'image-rendering: auto' +
        '}' +
        '.bim_thumbPreview {' +
            'float: right;' +
            'position: relative;' +
            'z-index: 0;' +
        '}' +
        '.bim_img_container {' +
            'height: 70px;' +
            'width: 70px;' +
        '}' +
        '.bim_thumbPreview span {' +
            'box-shadow: 0 6px 6px rgba(0, 0, 0, 0.5);' +
            'margin-left: 84px;' +
            'margin-top: -68px;' +
            'position: absolute;' +
            'visibility: hidden;' +
            'z-index: 100;' +
        '}' +
        '.bim_thumbPreview:hover span {' +
            'visibility: visible;' +
        '}' +
        '.bim_thumbPreview span img {' +
            'border: 3px solid #000000;' +
            'max-width: 300px;' +
        '}' +
        '</style>';
    document.head.insertAdjacentHTML('beforeEnd', sCSS);

And add this in your CSS:
Code:

.bim_mainThumb {
    opacity: 1;
    visibility: visible;
    max-width: none;
    max-height: none;
    width: 100%;
    height: auto;
    display: block;
    image-rendering: auto
}
.bim_thumbPreview {
    float: right;
    position: relative;
    z-index: 0;
}
.bim_img_container {
    height: 70px;
    width: 70px;
}
.bim_thumbPreview span {
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.5);
    margin-left: 84px;
    margin-top: -68px;
    position: absolute;
    visibility: hidden;
    z-index: 100;
}
.bim_thumbPreview:hover span {
    visibility: visible;
}
.bim_thumbPreview span img {
    border: 3px solid #000000;
    max-width: 300px;
}

So long,

JS

JScript
Forumember

Male Posts : 741
Reputation : 167
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by Van-Helsing on March 5th 2014, 2:12 am

Thank you very much I have fix it.
Problem is solved now.

Best Regards,
Dark-Avenger

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I add some infos about last post in the Board Index

Post by Ange Tuteur on March 5th 2014, 2:15 am

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum