• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

XF Lightboxed Thumbnails on Forumhome

calorie

Active member
Here is how to manually apply the XF Lightbox to thumbnails on the forum homepage. See the screenshot. If you click a thumbnail, the XF Lightbox opens like it does for attachments. If someone works out how to use the forum_list_nodes template hook, this could conceivably be done via said hook instead of manually. But for now, here you go...

forumhome.webp

First make a directory titled misc-imgs here: /styles/default/xenforo/misc-imgs

Then upload the following images into the newly created misc-imgs directory.

Replace X with a number 1 through 12 (twelve small and twleve large JPG images):
  • Xsmall.jpg (they are 48x48 pixels in the screenshot)
  • Xlarge.jpg (whatever size you want for large images)
Then in the XF forum_list template find this:
Code:
<xen:hook name="forum_list_nodes">
    <xen:if is="{$renderedNodes}"><xen:include template="node_list" /></xen:if>
</xen:hook>

And beforehand add this:
Code:
<style type="text/css">
.Format-Images-Table
{
    -moz-background-clip: border;
    -moz-background-inline-policy: continuous;
    -moz-background-origin: padding;
    margin-bottom: 10px !important;
    background: {xen:property primaryLightest} url({xen:property imagePath}/xenforo/gradients/category-23px-light.png) repeat-x scroll center top;
    border-bottom: 2px dotted {xen:property primaryLighterStill};
    width: 100%;
}
.Format-Images-Td
{
    border: none !important;
    padding: 5px 0 0 0 !important;
    text-align: center;
}
.LbImage
{
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    background-color: {xen:property contentBackground};
    border: 1px solid {xen:property primaryLighter};
    padding: 2px;
}
</style>
<ol id="messageList" class="messageList">
    <li id="post-9876543210" class="message staff" data-author="Admin">
        <div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person" style="display: none">
            <div class="messageUserBlock">
                <div class="avatarHolder">
                    <a href="members/.1/" class="avatar Av1m" itemprop="photo" data-avatarHtml="true"><span class="img m" style="background-image: url('data/avatars/m/0/1.jpg?9876543210')"></span></a>
                </div>
                <h3 class="userText">
                    <a href="members/.1/" class="username" itemprop="name" rich="true">Admin</a>
                    <em class="userTitle" itemprop="title">Administrator</em>
                </h3>
                <span class="arrow"><span></span></span>
            </div>
        </div>
        <div class="messageInfo">
            <div class="messageContent">
                <article>
                    <blockquote class="messageText ugc baseHtml">
                        <table class="Format-Images-Table" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/1large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/1large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/1small.jpg"></a></td>
                            <td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/2large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/2large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/2small.jpg"></a></td>
                            <td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/3large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/3large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/3small.jpg"></a></td>
                            <td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/4large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/4large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/4small.jpg"></a></td>
                            <td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/5large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/5large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/5small.jpg"></a></td>
                            <td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/6large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/6large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/6small.jpg"></a></td>
                            <td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/7large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/7large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/7small.jpg"></a></td>
                            <td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/8large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/8large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/8small.jpg"></a></td>
                            <td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/9large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/9large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/9small.jpg"></a></td>
                            <td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/10large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/10large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/10small.jpg"></a></td>
                            <td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/11large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/11large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/11small.jpg"></a></td>
                            <td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/12large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/12large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/12small.jpg"></a></td>
                        </tr>
                        </table>
                    </blockquote>
                </article>
            </div>
        </div>
    </li>
</ol>

The misc-imgs directory referenced herein is only a suggestion. On one hand you could have different thumbnails per style, but OTOH if you have many styles, you probably only want the same set of thumbnails across styles, so you could edit the addition to the XF forum_list template to change the path. While you are there, you can add or remove HTML depending on whether you want more or less thumbnails to appear.

The three CSS declarations are needed for the layout you see in the screenshot. This CSS was tested in FF3.5 and IE8. Some of the class attributes in the HTML are necessary for the XF Lightbox pop-up to display, such as user information, so for the user 'Admin' is listed with a userID of 1 but you can edit the HTML if you want to change it. Other class attributes in the HTML are not necessary, but no biggie with it as-is.

Gasp, a table is used for the thumbnails. It had been a list, but I didn't find the right combination of CSS to get the container to stay on its side of the page, should someone increase the font in the browser. Personally I didn't like that the list container would, given a larger font, extend into the sidebar, and so I went with a table, for which I got the CSS to keep the container on its side of the page, well, at least in FF3.5 and IE8 that is.

Hmm, that's all I can think of now to say about it... enjoy.
 
Does it display the last 12 images uploaded to the forum or something?
No.
The images are hardcoded
Code:
<td class="Format-Images-Td"><a data-href="{xen:link misc/lightbox}" class="LbTrigger" target="_blank" href="{xen:property imagePath}/xenforo/misc-imgs/1large.jpg"><img data-src="{xen:property imagePath}/xenforo/misc-imgs/1large.jpg?embedded=1" class="bbCodeImage LbImage" alt="Picture" src="{xen:property imagePath}/xenforo/misc-imgs/1small.jpg"></a></td>


@calorie
is this a "preperation" for xf photoplog?:D
 
Gasp, a table is used for the thumbnails. It had been a list, but I didn't find the right combination of CSS to get the container to stay on its side of the page, should someone increase the font in the browser.
I use css to layout images/containers in a grid.
It works well and zooming in/out using the browser doesn't seem to affect it.

This page for example: http://www.cliptheapex.com/community/pages/circuits/

I use this css:
Code:
.cta_circuits_gridRow {
position: relative;
width: 972px;
float: left;
margin: 10px 0;
}

.cta_circuits_gridCell1,
.cta_circuits_gridCell2,
.cta_circuits_gridCell3,
.cta_circuits_gridCell4 {
position: relative;
width: 228px;
height: 246px;
float: left;
background-color: @secondaryLight;
border-radius: 4px;
box-shadow: 2px 2px 5px rgba(0,0,0, 0.4);
}

    .cta_circuits_gridCell1:hover ,
    .cta_circuits_gridCell2:hover ,
    .cta_circuits_gridCell3:hover ,
    .cta_circuits_gridCell4:hover {
    background-color: @secondaryMedium;
    box-shadow: 2px 2px 5px rgba(0,0,0, 0.8);
    }

    .cta_circuits_gridCell1 {
    left: 6px;
    }

    .cta_circuits_gridCell2 {
    left: 22px;
    }

    .cta_circuits_gridCell3 {
    left: 38px;
    }

    .cta_circuits_gridCell4 {
    left: 54px;
    }


Apologies for the off topic post, just thought you might be able to utilise the css for your mod.
 
Can I just say:

It's awesome to see such a great community of developers and admins swapping tips and actually HELPING each other? Been quite a while since I've participated in community of such multi-faceted web technoweenie goodness. :)
 
Can I just say:

It's awesome to see such a great community of developers and admins swapping tips and actually HELPING each other? Been quite a while since I've participated in community of such multi-faceted web technoweenie goodness. :)
<obscure ref >
"No... I'm sorry, there isn't time."
</obscure ref>
 
Ugh, the dreaded "please enter a valid callback method" error message. Anyone see the problem with the attached?

Edit: Thanks, problem solved, file deleted due to errors, new file will be posted elsewhere.
 
Yeah, I could have sworn it was going to be easy peasy to get something functional, and then go from there, but then "please enter a valid callback method" hit, and after looking at the directory names, file names, class name, method name, I'm obviously missing something but don't see it, so pfft on me. :(
 
Top Bottom