Image Gallery Under First Tab

BamaStangGuy · Sep 12, 2013

How can I get rid of the Image Gallery tab and just have that functionality insert into the General Information tab?

Bob · Sep 12, 2013

You using a stock items template?

BamaStangGuy · Sep 12, 2013

Yea I haven't changed anything from install in that regards.

BamaStangGuy · Sep 12, 2013

http://3.7mustang.com/showcase/1996-4-3l-v6-mustang.1/

Most people aren't going to fill in a whole lot of information I have found. People love images (Pintrest). Just my opinion there but I would rather the images be on the page as soon as it opens.

Bob · Sep 12, 2013

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>

BamaStangGuy · Sep 12, 2013

hmmm made those changes but it still looks the same: http://3.7mustang.com/showcase/1996-4-3l-v6-mustang.1/

Bob · Sep 12, 2013

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

BamaStangGuy · Sep 12, 2013

I figured it might be that. Cache drives me insane sometimes.

Bob · Sep 12, 2013

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

BamaStangGuy · Sep 12, 2013

It helps if I am not retarded I guess. The fluid was the last one I edited so I made the edit there.

Bob · Sep 12, 2013

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

BamaStangGuy · Sep 12, 2013

If I share this on facebook it uses the default image for the preview. How do I get it to pull from the cover photo?

Bob · Sep 12, 2013

BamaStangGuy said:
If I share this on facebook it uses the default image for the preview. How do I get it to pull from the cover photo?

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

BamaStangGuy · Sep 12, 2013

Not off the top of my head but this should help http://davidwalsh.name/facebook-meta-tags

Bob · Sep 12, 2013

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

BamaStangGuy · Sep 12, 2013

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

What time? I can crawl out of bed at anytime. I will be around for most of tomorrow though. Late evening maybe not so much.

Bob · Sep 12, 2013

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

BamaStangGuy · Sep 12, 2013

Yea will be around

BamaStangGuy · Feb 22, 2014

When I upgrade to 1.3.1 will these edits still be the same?

Bob · Feb 22, 2014

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'

Image Gallery Under First Tab

Member

Developer

Member

Member

Developer

Member

Developer

Member

Developer

Member

Developer

Member

Developer

Member

Developer

Member

Developer

Member

Member

Developer

Similar threads