1. Kayako Download customers: we will continue to develop and support Kayako Download beyond July 2017, alongside the new Kayako for existing customers.

    Find out more.

  2. The forum you are viewing relates to Kayako Classic. If you signed up or upgraded to the new Kayako (after the 4th July 2016), the information in this thread may not apply to you. You can visit the forums for the new Kayako here.

Attachment preview (images only)

Discussion in 'Developing, APIs and extending' started by Nawid Sahebzadeh, Oct 10, 2012.

  1. Hi,
    For a long time we were frustrated by people sending their company logo in the attachments and we had to download every one of them to be make sure it was not a screenshot or something important that we were meant to see.
    So I thought it would be nice if we would have some way of previewing these attachments before we would decide to download them or not.

    My end result looks like this:
    screenshot.png


    When you hover with your mouse on the filename a preview of that image is rendered on top of it. When you remove your mouse the preview image disappears as well.

    For this purpose I made the following changes in the code:

    Filename: __swift/themes/admin_default/recpheader.tpl

    Around line 29 I added the following :

    PHP:
    <link rel="stylesheet" href="<{$_swiftPath}><{$_area}>/hoverpop.css" title="hoverpop-css" media="all" type="text/css" />

    Filename: __modules/tickets/staff/class.View_Ticket.php
    Around line 1150 I replaced this piece of code:


    PHP:
        $_attachmentHTML .= '<a class="ticketpostcontentsattachmentitem" href="' SWIFT::Get('basename') . '/Tickets/Ticket/GetAttachment/' $_SWIFT_TicketObject->GetTicketID() . '/' $_attachmentContainer['attachmentid'] . '" target="_blank" style="background-image: URL(\'' SWIFT::Get('themepathimages') . $_attachmentIcon '\');">' htmlspecialchars($_attachmentContainer['filename']) . ' (' FormattedSize($_attachmentContainer['filesize']) . ')' '</a>';
        }

    $_attachmentHTML .= '</div>';


    with this:

    PHP:
        if($_attachmentIcon == 'mimeico_pic.gif')
        {
            
    $_attachmentHTML .= '<a class="thumbnail" href="' SWIFT::Get('basename') . '/Tickets/Ticket/GetAttachment/' $_SWIFT_TicketObject->GetTicketID() . '/' $_attachmentContainer['attachmentid']
            . 
    '" target="_blank" ><img src="'SWIFT::Get('themepathimages') . $_attachmentIcon.'" /> 'htmlspecialchars($_attachmentContainer['filename']) . ' (' FormattedSize($_attachmentContainer['filesize']) . ')'.' &nbsp;&nbsp;&nbsp; <span><img src="' SWIFT::Get('basename') . '/Tickets/Ticket/GetAttachment/' $_SWIFT_TicketObject->GetTicketID() . '/' $_attachmentContainer['attachmentid'] . '" alt="'.htmlspecialchars($_attachmentContainer['filename']).'"></span>'
            
    '</a>&nbsp;';
        }
        else
        {
            
    $_attachmentHTML .= '<a class="ticketpostcontentsattachmentitem" href="' SWIFT::Get('basename') . '/Tickets/Ticket/GetAttachment/' $_SWIFT_TicketObject->GetTicketID() . '/' $_attachmentContainer['attachmentid'] . '" target="_blank"
            style="background-image: URL(\'' 
    SWIFT::Get('themepathimages') . $_attachmentIcon '\');">' htmlspecialchars($_attachmentContainer['filename']) . ' (' FormattedSize($_attachmentContainer['filesize']) . ')' '</a>';
        }

    }

    $_attachmentHTML .= '</div>';
    Furthermore I also added the css file "hoverpop.css" to the this location: staff/hoverpop.css

    You can find all the edited files attached to this post.
    NOTE: The files are originally from 4.40.1148 and cannot be simply copy pasted into any other version. However if you make the changes yourself in your own files I don't see any problems for getting it to work.

    Kind regards,
    Nawid
     

    Attached Files:

    Jitender Kumar and Gary McGrath like this.
  2. masterctrl1

    masterctrl1 Kayako Guru

    +1 Nice!
     
  3. Gurpreet Singh

    Gurpreet Singh Staff Member

    Thanks for sharing.
     
  4. Hi,

    I noticed that when viewing attachments with large dimensions, you could not clearly see the entire image because it was displayed too big for the screen. In order to fix that you need to replace this bit of css in hoverpop.css file:

    Code:
    .thumbnail span img { /*CSS for enlarged image*/
        border-width: 0px;
        /*padding: 2px;*/
    }
    with this:

    Code:
    .thumbnail span img { /*CSS for enlarged image*/
        border-width: 0px;
        max-width: 500px;
        /*padding: 2px;*/
    }
    And you can adjust the max-width value as you wish. But I have found this number to work best with my screen size.

    Kind regards,
    Nawid
     
  5. Ali Dursun

    Ali Dursun Member

    What i have done is that i have replaced the files only. May be this caused the error; the whole ticket area for staff was not reachable; therefore to get back to a working version it's needed to delete the cache files for entire day from the cache directory. Then everything works perfect again.
     
  6. Ali Dursun

    Ali Dursun Member

    Is it no possible for images to show the original image size?
     
  7. Hi Ali,

    If you remove this part:
    Code:
    max-width: 500px;
    
    Then the original image size will be used. However if the image becomes very large (lets say a file with dimensions 2048 x 1152) the image would not be fully visible on your screen because it is bigger than your entire screen.
    Does that answer your question?

    Kind regards,
    Nawid Sahebzadeh
     
  8. Ali Dursun

    Ali Dursun Member

    Nawid,

    okay i will try it within next days, and see what happens with big sized images.
     
  9. chrisrouse

    chrisrouse Reputed Member

    This is the greatest patch I've come across for Kayako. Well done and thanks for sharing how to do this! We get a ton of screenshots from users and it's a pain to download all of them (and then find out it was just stupid email signature icons).
     
  10. Matthew

    Matthew Reputed Member

    Very nice, and cheers for sharing!
     
  11. chrisrouse

    chrisrouse Reputed Member

    Looks like this doesn't work with .tiff attachments. Any way to specify which image formats this patch works with?
     
  12. Hi Chris,
    Actually, as you can see in my code here:
    PHP:
    if($_attachmentIcon == 'mimeico_pic.gif')
    I have based my decision on the filetypes Kayako uses. So if Kayako 'thinks' that it's an image file then I will generate a preview. Otherwise I won't.
    IMO this is a scalable solution.
    However if you want to add .tiff files you could simply modify the code above to also check on the filename extension using this parameter:

    PHP:
    $_attachmentContainer['filename']
    But bear in mind that this will only work to your satisfaction if your browser supports tiff images. If it does NOT support tiff images then the tiff file will be downloaded EVERY times you hover over it.

    Hope this helps,
    Nawid
     
  13. Ali Dursun

    Ali Dursun Member

    My probme is that the images are shown within the ticket; and this corrupts the ticket content. (see attachment) the css link is showing to the correct file. i am using kayako version: 4.40.832 Where could the problem be??
     

    Attached Files:

  14. Hi Ali,
    Could you zip your files and send them to me?
    Or else could you give me the exact path of where you have stored your css file?
    It seems to me that this problem is caused because your css files cannot be found. You could also check the persmissions on your css file on your server.

    Kind regards,
    Nawid
     
  15. Ali Dursun

    Ali Dursun Member

    i added the css file directly into the staff directory in root.
    the file rights are 755; this should be ok.

    do you have another suggestion? see attachments.
     

    Attached Files:

  16. Hi Ali,
    Everything looks ok to me. The only thing that could have this effect is when the css file cannot be found or accessed. Please dig in the generated html code and look for the url which is created for the css file and try that in the browser to see whether you can reach the css file with that url.
    I'm afraid without having some kind of access to your installation I cant give you more hints in this regard.

    Kind regards,
    Nawid
     
  17. Ali Dursun

    Ali Dursun Member

    Hi Nawid,

    thank you very much for your tests.
    yes the css url is right, i can open it through clicking it in the sourcecode.

    can it be that it depends on the application version and second what happens when i update my kayako? will the files be overwritten?

    thanks in advance?
     
  18. Hi,
    When you have a different version than 4.40.1148 you should NOT just use my files but you should make the same changes yourself.
    And after a kayako update these files WILL be overwritten. You need to make these changes after every update.
    If you have used my files instead of making the changes yourself, you should revert to your original files and make the changes yourself.

    Kind regards,
    Nawid
     
  19. chrisrouse

    chrisrouse Reputed Member

    And this is the biggest issue with customizing Kayako. I wish it worked like WordPress with child themes and being able to modify functions without having to change core files of WordPress or the parent theme.
     
  20. Ali Dursun

    Ali Dursun Member

    Is there an option to set image sizes big; because i set in css fil:

    HTML:
    #popup a:hover span {
    #    position: absolute;
        top: 0px;
        left: 170px;
        /* width: 320px; */
        max-width: 600px;
        margin: 0px;
        padding: 0px;
        color: #335500;
        font-weight: normal;
        background: #e5e5e5;
        text-align: left;
        border: 1px solid #666;
    }
     
    .thumbnail span img { /*CSS for enlarged image*/
        border-width: 0px;
        max-width: 600px;
        /*padding: 2px;*/
    }

    but the image, which is displayed on hover i still 320px.
    Should i rebuild the cache? what else could help?
     

Share This Page