How-to: Highslide image attachments (pop-up instead of new window)

[RvG]

It works for me except for the bbcode attached images.

 

[Moses]

Anyone have an example of this running on a site?

This post has it

 

[Brent W]

It works for me except for the bbcode attached images.

This has been addressed in the thread.

 

[Diablotic]

Any chance to get it working with bbcode attached images?

 

[Jeffin]

Added it.

 

[otto]

Hello,

nice Addon and easy to translate in the german language - Thanks!

 

[Rich]

The best !!!! Thank you!

 

[dieketzer]

those that have followed post 26 and are still having trouble getting this to work, bear in mind that there are two instances of the 'find' code. you must edit the last, not the first.
or, if i may be so bold, if you are working from a virgin beta 3 bb_code_tag_attach template, replace all template code with this and it will work:

<xen:if is="!{$validAttachment}">
    <a href="{xen:link attachments, $attachment}" target="_blank">{xen:phrase view_attachment_x, 'name={$attachment.attachment_id}'}</a>
<xen:elseif is="!{$attachment.thumbnailUrl}" />
    <a href="{xen:link attachments, $attachment}" target="_blank">{xen:phrase view_attachment_x, 'name={$attachment.filename}'}</a>
<xen:elseif is="{$full}" />
    <xen:if is="{$canView}">
        <img src="{xen:link attachments, $attachment, 'embedded=1'}" alt="{$attachment.filename}" class="bbCodeImage" />
    <xen:else />
        <a href="{xen:link attachments, $attachment}" target="_blank"><img src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" class="bbCodeImage" /></a>
    </xen:if>
<xen:else />
    <xen:if is="{$canView}">
        <span class="highslide-gallery">
            <a class="highslide" href="{xen:link attachments, $attachment}" onclick="return hs.expand(this)"><img src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" class="bbCodeImage" /></a>
        </span>
    <xen:else />
        <a href="{xen:link attachments, $attachment}" target="_blank"><img src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" class="bbCodeImage" /></a>
    </xen:if>
</xen:if>

 

[Romchik®]

calorie, template attached_files and bb_code_tag_attach are changed in beta 4. Is it necessary update steps in first post?

 

[ddmmh]

calorie, template attached_files and bb_code_tag_attach are changed in beta 4. Is it necessary update steps in first post?

I have beta 4. I just tried to install this. followed the steps and nothing changed so i think so...

 

[dieketzer]

i threw my hands into the air and, realising i can always revert, i went ahead and pasted the code from my previous post into the beta 4 template, and all seems good.

 

[Solozzo]

Awesome, thank you.

 

[manik]

Gotta try mine now, did not want to be the first to try on B4.

 

[beduino]

Gotta try mine now, did not want to be the first to try on B4.

and works?
thank you

 

[bogus]

The Code in beta 5 changed in "attached_files"
Does any has the code with the changes in it?

 

[dieketzer]

to make this work in rc2 (unsupported):
so i have never reverted my beta3 templates. ive retained them through all the updates, and the result is everything still works as it should. if you try to install this on rc2 you will discover the find/replace code is terribly outdated, so i am posting my full templates for you to copy.
note: if the idea of running beta3 templates is worrying for you, bear in mind that you can always revert them to rc2.

after following the direction for uploading highslide js and editing the page_container_js_head template:

step 5 of 6
in template attached_files
replace all code with this:

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

<div class="attachedFiles secondaryContent">
    <h4 class="attachedFilesHeader">{xen:phrase attached_files}:</h4>
    <ul class="attachmentList highslide-gallery">
        <xen:foreach loop="$post.attachments" value="$attachment">
            <li class="attachment{xen:if {$attachment.thumbnailUrl}, ' image'}" title="{$attachment.filename}">
                <div class="boxModelFixer primaryContent">

                    <div class="thumbnail">
                        <xen:if is="{$attachment.thumbnailUrl} AND {$visitor.permissions.forum.viewAttachment}">
                            <a class="highslide" href="{xen:link attachments, $attachment}" onclick="return hs.expand(this)">
                                <img src="{xen:if $attachment.thumbnailUrl, $attachment.thumbnailUrl, '@imagePath/xenforo/widgets/page.png'}" alt="{$attachment.filename}" />
                            </a>
                        <xen:else />
                            <a href="{xen:link attachments, $attachment}" target="_blank"><img
                                src="@imagePath/xenforo/widgets/page.png" alt="{$attachment.filename}" /></a>
                        </xen:if>
                    </div>

                    <div class="attachmentInfo pairsJustified">
                        <h6 class="filename"><a href="{xen:link attachments, $attachment}" target="_blank">{$attachment.filename}</a></h6>
                        <dl><dt>{xen:phrase file_size}:</dt> <dd>{xen:number $attachment.file_size, size}</dd></dl>
                        <dl><dt>{xen:phrase views}:</dt> <dd>{xen:number $attachment.view_count}</dd></dl>
                    </div>
                </div>
            </li>
        </xen:foreach>
    </ul>
</div>

<xen:comment><xen:require css="xenforo.css" /></xen:comment>

in template bb_code_tag_attach
replace all code with this:

<xen:if is="!{$validAttachment}">
    <a href="{xen:link attachments, $attachment}" target="_blank">{xen:phrase view_attachment_x, 'name={$attachment.attachment_id}'}</a>
<xen:elseif is="!{$attachment.thumbnailUrl}" />
    <a href="{xen:link attachments, $attachment}" target="_blank">{xen:phrase view_attachment_x, 'name={$attachment.filename}'}</a>
<xen:elseif is="{$full}" />
    <xen:if is="{$canView}">
        <img src="{xen:link attachments, $attachment, 'embedded=1'}" alt="{$attachment.filename}" class="bbCodeImage" />
    <xen:else />
        <a href="{xen:link attachments, $attachment}" target="_blank"><img src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" class="bbCodeImage" /></a>
    </xen:if>
<xen:else />
    <xen:if is="{$canView}">
        <span class="highslide-gallery">
            <a class="highslide" href="{xen:link attachments, $attachment}" onclick="return hs.expand(this)"><img src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" class="bbCodeImage" /></a>
        </span>
    <xen:else />
        <a href="{xen:link attachments, $attachment}" target="_blank"><img src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" class="bbCodeImage" /></a>
    </xen:if>
</xen:if>

 

[Romchik®]

My version for XF 1.0.2:

Template attached_files.

Find:​

<ul class="attachmentList">

And replace with:​

<ul class="attachmentList highslide-gallery">

Find:​

<a href="{xen:link attachments, $attachment}" target="_blank" class="LbTrigger"

And replace with:​

<a href="{xen:link attachments, $attachment}" class="highslide" onclick="return hs.expand(this)"

Template bb_code_tag_attach.

Find:​

    <a href="{xen:link attachments, $attachment}" target="_blank" class="LbTrigger"
        data-href="{xen:link misc/lightbox}"><img
        src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}"
        class="bbCodeImage LbImage"
        data-src="{xen:link attachments, $attachment, 'embedded=1'}" /></a>

And replace with:​

    <span class="highslide-gallery">
    <a href="{xen:link attachments, $attachment}" class="highslide"
        data-href="{xen:link misc/lightbox}" onclick="return hs.expand(this)"><img
        src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}"
        class="bbCodeImage LbImage"
        data-src="{xen:link attachments, $attachment, 'embedded=1'}" /></a>
    </span>

 

[dieketzer]

i just might give that a go when i update to 1.0.2.
i am still using my beta3 templates (which still work great)