Image Gallery Under First Tab

You using a stock items template?

 

This completely removes the gallery tab content container and moves it into Tab 1's content container.

NOTE: This is for the latest version of showcase (1.3.0)

There are THREE steps to this... you will have to replace a full template and edit 2 others

Step 1:

Replace template: nflj_showcase_item with the below template.

HTML:

<xen:title>{$item.item_name}{xen:helper pagenumber, $page}</xen:title>
<xen:h1></xen:h1>

<xen:require css="nflj_showcase_item.css" />

<xen:container var="$head.openGraph">
    <xen:include template="open_graph_meta">
        <xen:set var="$url">{xen:link canonical:showcase, $item}</xen:set>
        <xen:set var="$title">{$item.item_name}</xen:set>
    </xen:include></xen:container>
   
<xen:navigation>
    <xen:breadcrumb source="$breadCrumbs" />
</xen:navigation>

<xen:set var="$itemStatusHtml">
    <xen:if hascontent="true">
        <dl class="itemAlerts secondaryContent">
            <dt>{xen:phrase nflj_showcase_item_status}:</dt>
            <xen:contentcheck>
                <xen:if is="{$item.item_state} == 'deleted'">
                    <dd class="deletedAlert">
                        <span class="icon Tooltip" title="{xen:phrase nflj_showcase_deleted}" data-tipclass="iconTip"></span>
                        {xen:phrase nflj_showcase_removed_from_public_view}
                    </dd>
                <xen:elseif is="{$item.item_state} == 'moderated'" />
                    <dd class="moderatedAlert">
                        <span class="icon Tooltip" title="{xen:phrase nflj_showcase_awaiting_moderation}" data-tipclass="iconTip"></span>
                        {xen:phrase nflj_showcase_awaiting_moderation_before_being_displayed_publicly}
                    </dd>
                <xen:elseif is="{$item.item_state} == 'draft'" />
                    <dd class="draftAlert">
                        <span class="icon Tooltip" title="{xen:phrase nflj_showcase_draft}" data-tipclass="iconTip"></span>
                        {xen:phrase nflj_showcase_draft_in_progress}
                    </dd>                           
                </xen:if>
            </xen:contentcheck>
        </dl>
    </xen:if>
</xen:set>
{xen:raw $itemStatusHtml}

<div id="item-{$item.item_id}" class="showcaseItem" data-author="{$item.username}">

    <div class="showcaseItemAvatar">   
        <xen:if is="{$item.cover_image}">
            <a class="avatar NoOverlay" href="{xen:link showcase, $item}">
                <img width="48" height="48" border="0" src="{$item.cover_image.thumbnailUrl}" />
            </a>                       
        <xen:elseif is="{$item.category_image}" />
            <a class="avatar NoOverlay" href="{xen:link showcase, $item}">
                <img width="48" height="48" border="0" alt="{$item.category_name}" src="styles/default/nflj/showcase/category_images/{$item.category_image}">
            </a>
        <xen:else />   
            <xen:avatar user="$item" size="s" img="true" />
        </xen:if>   
    </div>   
   
    <div class="showcaseItemInfo">
        <div class="showcaseItemContent">
            <div class="showcaseItemTitle">
                {xen:if '{$item.item_state} == "draft" ', '<span class="draft">[{xen:phrase nflj_showcase_draft}]</span>', ''} {$item.item_name}
            </div>
            <div class="showcaseItemCategory muted">
                <a href="{xen:link showcase/category, $item}">{$item.category_name}</a> {xen:phrase nflj_showcase_item_created_by} <span><xen:username user="$item" />,</span> <a href="{xen:link showcase, $item}"><xen:datetime time="$item.date_added" /></a>               
            </div>
            <div class="showcaseItemDescription">
                {$item.abstract}
            </div>
        </div>
    </div>
   
    <div style="clear:both"></div>

    <xen:if is="{$item.thread_id} || {$item.review_count}">
        <script type="text/javascript">   
            $(document).ready(function () {
                $("li.last a").unbind('click');
            });
        </script>
    </xen:if>
   
    <div class="showcaseItemTabs">
        <xen:if is="{$item.canWatch}">
            <li><a href="{xen:link showcase/watch, $item}" class="OverlayTrigger watchLink" data-cacheoverlay="false"><xen:if is="{$item.is_watched}">{xen:phrase nflj_showcase_unwatch_this_item}<xen:else />{xen:phrase nflj_showcase_watch_this_item}</xen:if></a></li>
        </xen:if>       
        <ul id="showcasetabs" class="Tabs tabs showcaseTabs" data-panes="#showcasetabcontainer > li">
            <li>
                <a href="#tab1">{$item.tab1_name}</a>
            </li>
           
            <xen:if is="{$item.tab2_name} && ({$t2.hasContent} || {$t2.hasCustomFieldContent})">       
                <li>
                    <a href="#tab2">{$item.tab2_name}</a>
                </li>
            </xen:if>
           
            <xen:if is="{$item.tab3_name}  && ({$t3.hasContent} || {$t3.hasCustomFieldContent})">       
                <li>
                    <a href="#tab3">{$item.tab3_name}</a>
                </li>
            </xen:if>   
           
            <xen:if is="{$item.tab4_name}  && ({$t4.hasContent} || {$t4.hasCustomFieldContent})">
                <li>
                    <a href="#tab4">{$item.tab4_name}</a>
                </li>
            </xen:if>
           
            <xen:if is="{$item.tab5_name}  && ({$t5.hasContent} || {$t5.hasCustomFieldContent})">
                <li>
                    <a href="#tab5">{$item.tab5_name}</a>
                </li>
            </xen:if>
           
            <xen:if is="{$item.review_count}">
                <li class="last">
                    <a href="{xen:link showcase/reviews, $item}">{xen:phrase nflj_showcase_reviews} ({$item.review_count})</a>
                </li>
            </xen:if>
           
            <xen:if is="{$item.thread_id}">
                <li class="last">
                    <a href="{xen:link threads, $item}">{xen:phrase nflj_showcase_discussion}</a>
                </li>
            </xen:if>           
        </ul>
       
        <ul id="showcasetabcontainer">
            <li id="tab1">
                <xen:if is="{$customFieldsGrouped.tab1}">
                    <div class="primaryContent">
                        <div class="pairsColumns tabPairs">
                            <xen:foreach loop="$customFieldsGrouped.tab1" value="$field">
                                <xen:include template="nflj_showcase_item_custom_field_view" />
                            </xen:foreach>
                        </div>
                    </div>                   
                </xen:if>
                <xen:if is="{$item.tab1_editor}">
                    <div class="primaryContent">   
                        <article><blockquote class="messageText ugc baseHtml">{xen:raw $item.message}</blockquote></article>
                    </div>
                </xen:if>

                <xen:if is="{$item.attachments}">   
                    <div class="primaryContent">
                        <xen:include template="nflj_showcase_item_image_gallery" />
                    </div>
                </xen:if>
            </li>
            <xen:if is="{$item.tab2_name} && ({$t2.hasContent} || {$t2.hasCustomFieldContent})">
                <li id="tab2">
                    <xen:if is="{$customFieldsGrouped.tab2}">
                        <div class="primaryContent">
                            <div class="pairsColumns tabPairs">
                                <xen:foreach loop="$customFieldsGrouped.tab2" value="$field">
                                    <xen:include template="nflj_showcase_item_custom_field_view" />
                                </xen:foreach>
                            </div>
                        </div>                   
                    </xen:if>
                    <xen:if is="{$item.tab2_editor}">   
                        <div class="primaryContent">   
                            <article><blockquote class="messageText ugc baseHtml">{xen:raw $t2.message}</blockquote></article>
                        </div>
                    </xen:if>   
                </li>
            </xen:if>
            <xen:if is="{$item.tab3_name} && ({$t3.hasContent} || {$t3.hasCustomFieldContent})">
                <li id="tab3">
                    <xen:if is="{$customFieldsGrouped.tab3}">
                        <div class="primaryContent">
                            <div class="pairsColumns tabPairs">
                                <xen:foreach loop="$customFieldsGrouped.tab3" value="$field">
                                    <xen:include template="nflj_showcase_item_custom_field_view" />
                                </xen:foreach>
                            </div>
                        </div>                   
                    </xen:if>
                    <xen:if is="{$item.tab3_editor}">                   
                        <div class="primaryContent">           
                            <article><blockquote class="messageText ugc baseHtml">{xen:raw $t3.message}</blockquote></article>
                        </div>
                    </xen:if>                       
                </li>
            </xen:if>
            <xen:if is="{$item.tab4_name} && ({$t4.hasContent} || {$t4.hasCustomFieldContent})">
                <li id="tab4">
                    <xen:if is="{$customFieldsGrouped.tab4}">
                        <div class="primaryContent">
                            <div class="pairsColumns tabPairs">
                                <xen:foreach loop="$customFieldsGrouped.tab4" value="$field">
                                    <xen:include template="nflj_showcase_item_custom_field_view" />
                                </xen:foreach>
                            </div>
                        </div>                   
                    </xen:if>
                    <xen:if is="{$item.tab4_editor}">                   
                        <div class="primaryContent">           
                            <article><blockquote class="messageText ugc baseHtml">{xen:raw $t4.message}</blockquote></article>
                        </div>
                    </xen:if>                       
                </li>       
            </xen:if>
            <xen:if is="{$item.tab5_name} && ({$t5.hasContent} || {$t5.hasCustomFieldContent})">
                <li id="tab5">
                    <xen:if is="{$customFieldsGrouped.tab5}">
                        <div class="primaryContent">
                            <div class="pairsColumns tabPairs">
                                <xen:foreach loop="$customFieldsGrouped.tab5" value="$field">
                                    <xen:include template="nflj_showcase_item_custom_field_view" />
                                </xen:foreach>
                            </div>
                        </div>                   
                    </xen:if>
                    <xen:if is="{$item.tab5_editor}">                   
                        <div class="primaryContent">           
                            <article><blockquote class="messageText ugc baseHtml">{xen:raw $t5.message}</blockquote></article>
                        </div>
                    </xen:if>                       
                </li>       
            </xen:if>           
        </ul>   
    </div>   
   
    <div class="showcaseItemMeta">
        <div class="showcaseItemPrivateControls">
            <span class="showcaseItemTime"><xen:username user="$item" class="author" />,</span>
            <span class="showcaseItemLink"><a href="{xen:link showcase, $item}"><xen:datetime time="$item.date_added" /></a></span>
            <xen:hook name="showcase_item_private_controls" params="{xen:array 'item={$item}'}">
                <xen:if is="{$item.canEditItem}">
                    <a href="{xen:link showcase/edit, $item}" class="showcaseControlLinks">{xen:phrase edit}</a>
                </xen:if>
                <xen:if is="{$item.canDeleteItem}">
                    <a href="{xen:link showcase/delete, $item}" class="showcaseControlLinks OverlayTrigger" data-cacheOverlay="false">{xen:phrase delete}</a>
                </xen:if>           
                <xen:if is="{$visitor.user_id}">
                    <a href="{xen:link 'showcase/report', $item}" class="showcaseControlLinks report OverlayTrigger" data-cacheOverlay="false">{xen:phrase report}</a>
                </xen:if>
            </xen:hook>   
        </div>

        <div class="showcaseItemPublicControls">
            <xen:hook name="showcase_item_public_controls" params="{xen:array 'item={$item}'}">
                <xen:if is="{$item.canLikeItem}">
                    <a href="{xen:link showcase/like, $item}" class="LikeLink {xen:if $item.like_date, unlike, like}" data-container="#likes-item-{$item.item_id}"><span></span><span class="LikeLabel">{xen:if $item.like_date, {xen:phrase unlike}, {xen:phrase like}}</span></a>
                </xen:if>
            </xen:hook>   
        </div>
    </div>

    <div id="likes-item-{$item.item_id}">
        <xen:if is="{$item.likes}">
            <xen:include template="likes_summary">
                <xen:map from="$item" to="$message" />
                <xen:set var="$likesUrl">{xen:link showcase/likes, $item}</xen:set>
            </xen:include>
        </xen:if>
    </div>   

</div>
   
<xen:if is="{$item.canViewComments} && {$item.allow_comments}">
    <div class="showcaseComments">
        <xen:if is="{$item.canPostComments} && !in_array({$item.item_state}, array('draft', 'moderated', 'deleted')) ">
            <form action="{xen:link 'showcase/add-comment', $item}" method="post"
                class="commentSimple AutoValidator primaryContent CommentForm" id="CommentForm">
                <xen:avatar user="$visitor" size="s" />
                <div class="commentInfo">
                    <textarea name="message" class="textCtrl Elastic" placeholder="{xen:phrase nflj_showcase_write_a_comment}..." rows="3" cols="50"></textarea>
                    <div class="submitUnit">
                        <input type="submit" class="button primary" value="{xen:phrase post_comment}" accesskey="s" />
                        <input type="hidden" name="commentDate" value="{$commentDate}" />                       
                        <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
                    </div>
                </div>
            </form>
        </xen:if>           
   
        <div class="showcaseCommentList">
            <div id="NewComments"></div>
            <xen:include template="nflj_showcase_comment" />
        </div>
   
        <div class="pageNavLinkGroup">
            <xen:pagenav link="showcase" linkdata="{$item}"  page="{$page}" perpage="{$commentsPerPage}" total="{$totalComments}" />
        </div>
    </div>
</xen:if>

<xen:include template="nflj_showcase_item_sidebar" />

{xen:raw $itemStatusHtml}

<xen:include template="nflj_showcase_footer" />

Step 2:

Edit Template: nflj_showcase_item_tab_reviews

FIND and Remove this block of code:

HTML:

            <xen:if is="{$item.attach_count}">
                <li>
                    <a href="{xen:link showcase, $item}#timages">{xen:phrase nflj_showcase_image_gallery}</a>
                </li>
            </xen:if>

Step 3:

Edit Template: nflj_showcase_thread_view_tabs

FIND and Remove this block of code:

HTML:

        <xen:if is="{$item.attach_count}">
            <li>
                <a href="{xen:link showcase, $item}#timages">{xen:phrase nflj_showcase_image_gallery}</a>
            </li>
        </xen:if>

 

Must be cached for you, cause it looks right to me..

 

It works in the FLUID, but the FIXED style is still either cached or maybe the template edits didn't take for the fixed?

 

hehe... we ALL do that from time to time Looks good! I just made a note on my white board to try and add in some different layout configurations for the ITEM view (similar to how I do it for different layouts for Index and Category pages).

 

Im not sure. I stopped using FB a few years ago, so anything FB related, I just pull from core XF (which I don't believe they have anything that does images). Do you know of any addons that do it? I can inbox the Developer and get some tips

 

you going to be around during the day? I've got an idea I want to test, but need you to be the tester

 

Depends on how late I work tonight.. probably between noon and 5 (Mountain Time) tomorrow.

 

no, the items template has changed dramatically (both syntax and variables), so the above won't work anymore.

What I have done tho is add an option to display the Image Gallery under Tab 1. This is disabled by default, so after upgrade, you simple go into the showcase options, click on the Items tab and then click on the new option to 'Display Image Gallery under first Tab'