1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
    Dismiss Notice
  3. 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

Discussion in 'Template Modifications [Archive]' started by calorie, Feb 8, 2011.

  1. calorie

    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.png

    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.
     
    shenmuee, iTuN3r, Kier and 2 others like this.
  2. Allan

    Allan Well-Known Member

    Thank you Calorie.
     
  3. ragtek

    ragtek Guest

  4. calorie

    calorie Active Member

    Thanks, had a look, and if I'm understanding it, it should be easy peasy, so no template edit would be great. We'll see what I come up with for this.
     
  5. ragtek

    ragtek Guest

    Exactly
    It's easy peasy:D
     
  6. TNCclubman

    TNCclubman Well-Known Member

    Does it display the last 12 images uploaded to the forum or something?
     
  7. ragtek

    ragtek Guest

    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
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    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.
     
  9. Tigratrus

    Tigratrus Well-Known Member

    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. :)
     
    Kier likes this.
  10. Tigratrus

    Tigratrus Well-Known Member

    <obscure ref >
    "No... I'm sorry, there isn't time."
    </obscure ref>
     
  11. calorie

    calorie Active Member

    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.
     
  12. Allan

    Allan Well-Known Member

    Confirmed, importation impossible.
     
  13. calorie

    calorie Active Member

    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. :(
     
  14. ragtek

    ragtek Guest

    I've found it
    I've found it
     
  15. calorie

    calorie Active Member

    That is so flipping funny! Can't believe I missed that.
     
  16. Shelley

    Shelley Well-Known Member

    Nice job. :)
     
  17. Vicros

    Vicros Active Member

    Can someone help me figure out how to just add a image to an html page using this method?
     

Share This Page