Add lightbox to image attachments (updated3.3)

Dont create your support topics here! No new topics with questions allowed!

Moderator: crythias

Forum rules
Dont create your support topics here! No new topics with questions allowed!
Post Reply
crythias
Moderator
Posts: 10169
Joined: 04 May 2010, 18:38
Znuny Version: 5.0.x
Location: SouthWest Florida, USA
Contact:

Add lightbox to image attachments (updated3.3)

Post by crythias »

This is thoroughly broken in OTRS version 3.3 due to obscuring filenames.

There is a workaround (sortof).

OTRS has a little-advertised MIME-Viewer configuration but doesn't suggest one for images.

So here's an option (it'll open the image in a new tab if you click the little icon beside the image... it looks like a monitor):
Config.pm:

Code: Select all

    $Self->{'MIME-Viewer'}->{'image/jpeg'} = 'perl /opt/otrs/var/httpd/htdocs/js/thirdparty/iw/iw.pl';
iw.pl (image wrapper) is:

Code: Select all

use strict;
use warnings;
use MIME::Base64;

my $filename = $ARGV[0];
open (IMAGE, $filename) or die "$1";
my $base64 = do { local $/ = undef; <IMAGE>; };
my $encoded = encode_base64( $base64 );
close IMAGE;
print <<"END";
<html>
<body>
<img src="data:image/jpeg;base64,$encoded" />
</body>
</html>
END
1;
I don't have any "better" option" than to provide unique MIME viewers for each image type, but they'd be:
image/gif
image/jpeg
image/png

If you make a Config.pm MIME-Viewer entry, you can choose to either pass the MIME type as an option or just repeat iw.pl for each MIME type.

There's probably some sort of limit, performance issue, etc. for extremely large images, but I'd leave that as an exercise for you to limit. Also, there's no real parsing of this code for invalid input. If a wanna be jpg imposter submits an invalid jpg, note that the binary file is directly encoded with base64 and this base64 is immediately used in the img tag (it's "real" base64). The base64 vulnerabilities for injection are limited to corrupting the image on its own page. (As far as I have been able to determine. If you find otherwise, please don't blame me. But tell me. And tell me how you'd make this safer.)

OTRS 3.2 and below for Lightbox 2.5 follows.
This is not your average howto. It's not that hard, you probably don't care, but play along and you might like it.

"What does it do?"
If you click on an image attachment, it'll do a fancy popover thing...

So, here goes. ...
1) get lightbox from here http://lokeshdhakar.com/projects/lightbox2/
2) extract it somewhere... could be anywhere, but let's put it in
otrs/var/httpd/htdocs/js/thirdparty/lightbox
3) edit a few files
lightbox/css/lightbox.css

Code: Select all

/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
  background: url(/otrs-web/js/thirdparty/lightbox/images/prev.png) left 48% no-repeat;
}

/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
  background: url(/otrs-web/js/thirdparty/lightbox/images/next.png) right 48% no-repeat;
}
 
lightbox/js/lightbox.js

Code: Select all

    function LightboxOptions() {
      this.fileLoadingImage = '/otrs-web/js/thirdparty/lightbox/images/loading.gif';
      this.fileCloseImage = '/otrs-web/js/thirdparty/lightbox/images/close.png';
 
Kernel/Output/HTML/Standard/HTMLHead.dtl immediately before </head> at the end

Code: Select all

<script src ="$Config{"Frontend::WebPath"}js/thirdparty/lightbox/js/jquery-1.7.2.min.js"></script>
<script src ="$Config{"Frontend::WebPath"}js/thirdparty/lightbox/js/lightbox.js"></script>
<link href="$Config{"Frontend::WebPath"}js/thirdparty/lightbox/css/lightbox.css" rel="stylesheet" />
Kernel/Output/HTML/ArticleAttachmentDownload.pm

Code: Select all

    my $EncodedFilename = $Self->{LayoutObject}->LinkEncode( $Param{File}->{Filename} || '' );

    my $rel = '';
    if (lc $EncodedFilename =~ /\.(tif|jpg|png|gif|jpeg|tiff)$/i) {
       $rel = '" rel="lightbox';
    }
    return (
        %{ $Param{File} },
        Action => 'Download',
        Link =>
            "\$Env{\"CGIHandle\"}/$EncodedFilename?Action=AgentTicketAttachment;ArticleID=$Param{Article}->{ArticleID};FileID=$Param{File}->{FileID}" . $rel,
 
(You'll want to remember to right-click, download pictures if you want them.)
brief modification: removed " at end of $rel because it would cause errors.

edit: changed search to be case insensitive. (/i)
OTRS 6.0.x (private/testing/public) on Linux with MySQL database.
Please edit your signature to include your OTRS version, Operating System, and database type.
Click Subscribe Topic below to get notifications. Consider amending your topic title to include [SOLVED] if it is so.
Need help? Before you ask
crythias
Moderator
Posts: 10169
Joined: 04 May 2010, 18:38
Znuny Version: 5.0.x
Location: SouthWest Florida, USA
Contact:

Re: Add lightbox to image attachments

Post by crythias »

OTRS 6.0.x (private/testing/public) on Linux with MySQL database.
Please edit your signature to include your OTRS version, Operating System, and database type.
Click Subscribe Topic below to get notifications. Consider amending your topic title to include [SOLVED] if it is so.
Need help? Before you ask
Cheesypuffs
Znuny newbie
Posts: 27
Joined: 20 Jun 2012, 10:50
Znuny Version: 3.1.6

Re: Add lightbox to image attachments

Post by Cheesypuffs »

Hi,

Will lightbox2 support attached pdf files?

I have followed your steps and still only get the download option :-(

Thanks!
Cheesypuffs
Znuny newbie
Posts: 27
Joined: 20 Jun 2012, 10:50
Znuny Version: 3.1.6

Re: Add lightbox to image attachments

Post by Cheesypuffs »

Hi

I have downloaded lightbox2 v 2.5.1 and have followed the steps as described but still only get the option to download and there is no pop up window with the attachment :-(
crythias
Moderator
Posts: 10169
Joined: 04 May 2010, 18:38
Znuny Version: 5.0.x
Location: SouthWest Florida, USA
Contact:

Re: Add lightbox to image attachments

Post by crythias »

Cheesypuffs wrote:Will lightbox2 support attached pdf files?
Apparently, not this one. There are others that provide this.
Cheesypuffs wrote:still only get the option to download and there is no pop up window with the attachment
Make sure you include the . $rel part of the ArticleAttachmentDownload.pm

I don't know why it doesn't work for you. Maybe it's case sensitivity. check for errors, check if the image has rel="lightbox" in "inspect element" or "view source". Maybe javascript is disabled. Maybe there's another error in javascript.
OTRS 6.0.x (private/testing/public) on Linux with MySQL database.
Please edit your signature to include your OTRS version, Operating System, and database type.
Click Subscribe Topic below to get notifications. Consider amending your topic title to include [SOLVED] if it is so.
Need help? Before you ask
FiL
Znuny newbie
Posts: 69
Joined: 13 Jul 2010, 18:02
Znuny Version: 2.4.7

Re: Add lightbox to image attachments

Post by FiL »

if (lc $EncodedFilename =~ /\.(tif|jpg|png|gif|jpeg|tiff)$/) {

Look at the ending of your files you tried to open with lightbox.
If it´s JPG, jpeg or something different it can´t work.
You have to add all the different endings to the code like this:

if (lc $EncodedFilename =~ /\.(tif|jpg|Jpeg|JPG|png|gif|jpeg|tiff)$/) {
Dev
OTRS-Version: 3.1.7
System: Ubuntu Linux

Prod
OTRS-Version 3.0.9
System: Ubuntu Linux
Cheesypuffs
Znuny newbie
Posts: 27
Joined: 20 Jun 2012, 10:50
Znuny Version: 3.1.6

Re: Add lightbox to image attachments

Post by Cheesypuffs »

if (lc $EncodedFilename =~ /\.(tif|jpg|png|gif|jpeg|tiff)$/) {

Look at the ending of your files you tried to open with lightbox.
If it´s JPG, jpeg or something different it can´t work.
You have to add all the different endings to the code like this:

if (lc $EncodedFilename =~ /\.(tif|jpg|Jpeg|JPG|png|gif|jpeg|tiff)$/) {

Thanks FiL

It was the case sensitive issue. I hadnt added png as PNG. That sorted it!
Cheesypuffs
Znuny newbie
Posts: 27
Joined: 20 Jun 2012, 10:50
Znuny Version: 3.1.6

Re: Add lightbox to image attachments

Post by Cheesypuffs »

Thanks Crythias too

I see that Bumpbox might get the pdf to work

If you ever get to check that one out please share with the forum (coding etc)
crythias
Moderator
Posts: 10169
Joined: 04 May 2010, 18:38
Znuny Version: 5.0.x
Location: SouthWest Florida, USA
Contact:

Re: Add lightbox to image attachments

Post by crythias »

I'm only going to leave a link for bumpbox implementation. Since it uses mootools instead of jquery, I can't recommend it if there will be a collision with jquery. I know prototype does cause issues. Since the installation is more or less analogous to the above directions, you should be able to test and implement it yourself.
OTRS 6.0.x (private/testing/public) on Linux with MySQL database.
Please edit your signature to include your OTRS version, Operating System, and database type.
Click Subscribe Topic below to get notifications. Consider amending your topic title to include [SOLVED] if it is so.
Need help? Before you ask
crythias
Moderator
Posts: 10169
Joined: 04 May 2010, 18:38
Znuny Version: 5.0.x
Location: SouthWest Florida, USA
Contact:

Re: Add lightbox to image attachments

Post by crythias »

Someone asked me off-forum for implementation for FAQ.

There isn't an easy answer, because FAQ doesn't utilize Layout.pm

Here's what we get in AgentFAQZoom.dtl:

Code: Select all

<a href="$Env{"Baselink"}Action=$Env{"Action"};Subaction=DownloadAttachment;ItemID=$LQData{"ItemID"};FileID=$LQData{"FileID"}">
The problem is this is generated adhoc entirely in the dtl (bad mojo) and not as a "built" link somewhere.

"What to do?"
Well, kinda you can do some sort of javascript/jquery mumbo jumbo to guess the mime type from the url or you can pretend all links are images and include rel="lightbox" by hand, watching "nothing" load for a text attachment or you can do that anyway and modify the lightbox app to ignore mime types it can't render.

Nothing's pleasant, though if I had a preference, the last item would likely be among the easiest to implement in this case.
OTRS 6.0.x (private/testing/public) on Linux with MySQL database.
Please edit your signature to include your OTRS version, Operating System, and database type.
Click Subscribe Topic below to get notifications. Consider amending your topic title to include [SOLVED] if it is so.
Need help? Before you ask
nking
Znuny newbie
Posts: 35
Joined: 07 May 2012, 19:56
Znuny Version: OTRS 3.0
Real Name: Natalia King
Company: Lyons Consulting Group
Location: Chicago, Illinois
Contact:

Re: Add lightbox to image attachments

Post by nking »

I am currently upgrading otrs to 3.1 (3.2 is the goal) and I wonder if lightbox can be installed in 3.1 and 3.2. The plugin had worked beautifully on 3.0 and I would like to keep this functionality.
OTRS 3.0, CentOS 5.5
crythias
Moderator
Posts: 10169
Joined: 04 May 2010, 18:38
Znuny Version: 5.0.x
Location: SouthWest Florida, USA
Contact:

Re: Add lightbox to image attachments

Post by crythias »

I can confirm that, if you've already installed this, changing the two OTRS files will be sufficient to make this happen again.
OTRS 6.0.x (private/testing/public) on Linux with MySQL database.
Please edit your signature to include your OTRS version, Operating System, and database type.
Click Subscribe Topic below to get notifications. Consider amending your topic title to include [SOLVED] if it is so.
Need help? Before you ask
Nexter
Znuny newbie
Posts: 60
Joined: 19 Jan 2011, 17:23
Znuny Version: 3.2.8

Re: Add lightbox to image attachments

Post by Nexter »

Hi,

works great in Version 3.2.8 (Windows 2008 R2, Apache 2.2, MySQL, FF & IE, Lightbox Version 2.51).

1st i was confused because i dont know which part i have to replace in ArticleAttachmentDownload.pm
But then i have tried to replace:

Code: Select all

    my $Type = $Self->{ConfigObject}->Get('AttachmentDownloadType') || 'attachment';
	
    # if attachment will be forced to download, don't open a new download window!
    my $Target = 'target="AttachmentWindow" ';
	
    if ( $Type =~ /inline/i ) {
        $Target = 'target="attachment" ';
    }
	
    return (
        %{ $Param{File} },
        Action => 'Download',
        Link =>
            "\$Env{\"Baselink\"}Action=AgentTicketAttachment;ArticleID=$Param{Article}->{ArticleID};FileID=$Param{File}->{FileID}",
        Image  => 'disk-s.png',
        Target => $Target,
And it works.


--> Not for pdfs. they just show the loading container with no content (pdf)
--- Grüße vom Nexter ---
crythias
Moderator
Posts: 10169
Joined: 04 May 2010, 18:38
Znuny Version: 5.0.x
Location: SouthWest Florida, USA
Contact:

Re: Add lightbox to image attachments

Post by crythias »

Bugfixes here. Questions in Help forums.
OTRS 6.0.x (private/testing/public) on Linux with MySQL database.
Please edit your signature to include your OTRS version, Operating System, and database type.
Click Subscribe Topic below to get notifications. Consider amending your topic title to include [SOLVED] if it is so.
Need help? Before you ask
Post Reply