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

[Van-Helsing]

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

[TheCrow]

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

[Van-Helsing]

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

[TheCrow]

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!

[Van-Helsing]

Bump

[Van-Helsing]

Bump

[Van-Helsing]

Bump

[JScript]

@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: https://help.forumotion.com/t130972-how-can-i-add-avatar-in-recent-topics-widget

So long,

JS

[Van-Helsing]

@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: https://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

[JScript]

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

So long,

JS

[Van-Helsing]

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

[JScript]

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

JS

[Van-Helsing]

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:

.

 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:

Please connect with these details to check this function.

Best Regards,
Dark-Avenger

[JScript]

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

[Van-Helsing]

Can we try it?

[JScript]

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://2img.net/i/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:

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

[Van-Helsing]

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

[JScript]

@Dark-Avenger

Reread:

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

[Van-Helsing]

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

Best Regards,
Dark-Avenger

[Ange Tuteur]

Topic solved and archived