Animierte Gif anzeigen lassen

Ich habe ein kleines Problem, dass meine Bilder als Canvas gerendert werden und somit animierte gif Dateien nicht wiedergegeben werden.
Hat einer von euch eine Lösung dafür, dass ich das ausgebaut bekomm?

Spoiler ausklappen

PHP-Code:

---

<?php if(!defined('access') or !access) die('This file cannot be directly accessed.'); ?>
<?php G\Render\include_theme_header(); ?>

<?php
$share_element = [
    'referer'        => G\get_base_url(),
    'url'            => get_image()['url_viewer'],
    'image'            => get_image()['url'],
    'title'            => get_doctitle()
];
$share_element['HTML'] = '<a href="'.$share_element["url"].'" title="'.$share_element["title"].'"><img src="'.$share_element["image"].'" /></a>';
$share_links_array = CHV\render\get_share_links($share_element);

?>

<div class="top-bar-placeholder background-black"></div>
        <div >
            
            <div class="growl static text-align-center margin-bottom-30 clear-both<?php if(get_image()["album"]["privacy"] == "public" or get_image()["album"]["privacy"] == NULL) echo " soft-hidden"; ?>" data-content="privacy-private"><?php _se('Note: This content is private. Change privacy to "public" to share.'); ?></div>
            
            <div class="panel-share c15 phablet-c1 grid-columns margin-right-10">
            
                <div class="panel-share-item">
                    <h4 class="pre-title"><?php _se('Image links'); ?></h4>
                    <div class="panel-share-input-label">
                        <h4 class="title c5 grid-columns"><?php _se('Image URL'); ?></h4>
                        <div class="c10 phablet-c1 grid-columns">
                            <input type="text" class="text-input" value="<?php echo get_image()["url"]; ?>" data-focus="select-all">
                        </div>
                    </div>
                    <div class="panel-share-input-label">
                        <h4 class="title c5 grid-columns"><?php _se('Image link'); ?></h4>
                        <div class="c10 phablet-c1 grid-columns">
                            <input type="text" class="text-input" value="<?php echo get_image()["url_viewer"]; ?>" data-focus="select-all">
                        </div>
                    </div>

                    <?php
                        if(get_image()["medium"]) {
                    ?>

                    <?php
                        }
                    ?>
                </div>

                <?php
                    $image_embed = array(
                        "html" => '<img src="'.get_image()["url"].'" alt="'.get_image()["filename"].'" border="0" />'
                    );
                    $image_embed["bbcode"] = G\html_to_bbcode($image_embed["html"]);
                ?>
                
                <?php
                    $image_embed_full['html'] = '<a href="'.get_image()["url_viewer"].'">'.$image_embed['html'].'</a>';
                    $image_embed_full['bbcode'] = G\html_to_bbcode($image_embed_full["html"]);
                ?>
                <div class="panel-share-item">
                    <h4 class="pre-title"><?php _se('Linked image'); ?> + <?php _se('Image embed codes'); ?></h4>
                    <div class="panel-share-input-label">
                        <h4 class="title c5 grid-columns">HTML</h4>
                        <div class="c10 phablet-c1 grid-columns">
                            <input type="text" class="text-input" value="<?php echo htmlentities($image_embed_full["html"]); ?>" data-focus="select-all">
                        </div>
                    </div>
                    <div class="panel-share-input-label">
                        <h4 class="title c5 grid-columns">BBCode</h4>
                        <div class="c10 phablet-c1 grid-columns">
                            <input type="text" class="text-input" value="<?php echo $image_embed_full["bbcode"]; ?>" data-focus="select-all">
                        </div>
                    </div>
                </div>
                
                <?php
                    $image_embed_thumbnail = array(
                        "html" => '<a href="'.get_image()["url_viewer"].'"><img src="'.get_image()["thumb"]["url"].'" alt="'.get_image()["filename"].'" border="0" /></a>'
                    );
                    $image_embed_thumbnail["bbcode"] = G\html_to_bbcode($image_embed_thumbnail["html"]);
                ?>
                <div class="panel-share-item">
                    <h4 class="pre-title"><?php _se('Linked thumbnail'); ?> + <?php _se('Image embed codes'); ?></h4>
                    <div class="panel-share-input-label">
                        <h4 class="title c5 grid-columns">HTML</h4>
                        <div class="c10 phablet-c1 grid-columns">
                            <input type="text" class="text-input" value="<?php echo htmlentities($image_embed_thumbnail["html"]); ?>" data-focus="select-all">
                        </div>
                    </div>
                    <div class="panel-share-input-label">
                        <h4 class="title c5 grid-columns">BBCode</h4>
                        <div class="c10 phablet-c1 grid-columns">
                            <input type="text" class="text-input" value="<?php echo $image_embed_thumbnail["bbcode"]; ?>" data-focus="select-all">
                        </div>
                    </div>
                </div>
                
            </div>
            
        </div>
<div id="image-viewer" class="image-viewer full-viewer margin-bottom-10">
    <?php
        if(!get_image()['nsfw'] or (get_image()['nsfw'] and CHV\get_chv_setting('show_banners_in_nsfw'))) {
            CHV\Render\show_banner('image_image-viewer_top');
        }
    ?>
    <?php
        $image_url = get_image()["medium"] ? get_image()["medium"]["url"] : get_image()["url"];
    ?>
    <div id="image-viewer-container" class="image-viewer-main image-viewer-container"><a href="<?php echo get_image()["url"]; ?>" data-lightbox="erw"><img src="<?php echo $image_url; ?>"   alt="" width="<?php echo get_image()["width"]; ?>" height="<?php echo get_image()["height"]; ?>" ></a></div>
    <?php
        if(get_image()["user"]["id"] !== NULL) {
    ?>
    <div class="image-viewer-navigation arrow-navigator">
        <?php
            if(get_image_album_slice()["prev"] !== NULL) {
        ?>
        <a class="left-0" data-action="prev" href="<?php echo get_image_album_slice()["prev"]["url_viewer"]; ?>"><span class="icon-prev-alt"></span></a>
        <?php
            }
            if(get_image_album_slice()["next"] !== NULL) {
        ?>
        <a class="right-0" data-action="next" href="<?php echo get_image_album_slice()["next"]["url_viewer"]; ?>"><span class="icon-next-alt"></span></a>
        <?php
            }
        ?>
    </div>
    <?php
        }
    ?>
    <?php
        if(!get_image()['nsfw'] or (get_image()['nsfw'] and CHV\get_chv_setting('show_banners_in_nsfw'))) {
            CHV\Render\show_banner('image_image-viewer_foot');
        }
    ?>
</div>
<script>
    // Fix the image-viewer height (or width) asap with native js
    image_viewer_full_fix = function() {

        var viewer = document.getElementById("image-viewer"),
            viewer_container = document.getElementById("image-viewer-container"),
            top = document.getElementById("top-bar"),
            ratio = <?php echo number_format(get_image()['ratio'], 2, '.', ''); ?>;

        var canvas = {
                height: window.innerHeight - (typeof top !== "undefined" ? top.clientHeight : 0),
                width: viewer.clientWidth
            },
            imgSource = {
                width: <?php echo get_image()["width"]; ?>,
                height: <?php echo get_image()["height"]; ?>
            },
            img = {width: imgSource.width, height: imgSource.height};
        
        var viewer_banner_top = <?php echo CHV\get_chv_setting('banner_image_image-viewer_top') ? 1 : 0; ?>,
            viewer_banner_foot = <?php echo CHV\get_chv_setting('banner_image_image-viewer_foot') ? 1 : 0; ?>;
        
        var viewer_banner_height = 90;
        
        if(viewer_banner_top) {
            canvas.height -= viewer_banner_height + 20;
        }
        if(viewer_banner_foot) {
            canvas.height -= viewer_banner_height + 20;
        }
        
        var hasClass = function(element, cls) {
            return (" " + element.className + " ").indexOf(" " + cls + " ") > -1;
        }
        
        if(hasClass(document.documentElement, "phone") || hasClass(document.documentElement, "phablet")) {
            if(img.width > canvas.width) {
                img.width = canvas.width;
            }
            img.height = Math.round(img.width/ratio);
        } else {
            if(img.height > canvas.height && (img.height/img.width) < 3) {
                img.height = canvas.height;
            }
            if(img.height == canvas.height) {
                img.width = Math.round(img.height * ratio);    
            }
        }
        
        if(img.width > canvas.width) {
            img.width = canvas.width;
            img.height = Math.round(img.width/ratio);
        } else if((img.height/img.width) > 3) { // wow, very tall. such heights
            img = imgSource;
            if(img.width > canvas.width) {
                img.width = canvas.width * 0.8;
            }
            img.height = Math.round(img.width/ratio);
        }
        

        
        img = {
            width: img.width + "px",
            height: img.height + "px",
            display: "block"
        }
        

    }
    
    
    // Bind the native fn to the CHV object
    $(document).ready(function() {
        
        CHV.obj.image_viewer.image = {
            width: <?php echo get_image()["width"]; ?>,
            height: <?php echo get_image()["height"]; ?>,
            ratio: <?php echo number_format(get_image()['ratio'], 2, '.', ''); ?>,

        };

        
            
    //    CHV.fn.image_viewer_full_fix = window["image_viewer_full_fix"];
        
    });
</script>

<?php
    if(!get_image()['nsfw'] or (get_image()['nsfw'] and CHV\get_chv_setting('show_banners_in_nsfw'))) {
        CHV\Render\show_banner('image_after_image-viewer');
    }
?>

<div class="content-width">
    
    <div class="header header-content margin-bottom-10">
        <div class="header-content-left">
            <div class="header-content-breadcrum">
                <?php
                    if(get_image()["user"]["id"]) {
                        global $owner;
                        $owner = get_image()["user"];
                        G\Render\include_theme_file("snippets/breadcrum_owner_card");
                    } else {
                ?>
                <div class="breadcrum-item">
                    <div class="user-image default-user-image"><span class="icon icon-user"></span></div>
                    <span class="breadcrum-text float-left"><span class="user-link"><?php _se('Guest'); ?></span></span>
                </div>
                <?php
                    }
                ?>
                <div class="breadcrum-item">
                    <span class="breadcrum-text"><span class="icon icon-eye-blocked margin-right-5 <?php if(!get_image()["album"] or get_image()["album"]["privacy"] == "public") echo "soft-hidden"; ?>" data-content="privacy-private" title="<?php _se('This content is private'); ?>" rel="tooltip"></span>
                </div>
                <?php
                    if(is_owner() or is_admin()) {
                ?>
                <div class="breadcrum-item">
                    <a class="edit-link" data-modal="edit"><span class="icon-edit"></span><span><?php _se('Edit image details'); ?></span></a>
                </div>
                <div class="breadcrum-item">
                    <a class="delete-link" data-confirm="<?php _se("Do you really want to delete this image? This can't be undone."); ?>" data-submit-fn="CHV.fn.submit_resource_delete" data-ajax-deferred="CHV.fn.complete_resource_delete" data-ajax-url="<?php echo G\get_base_url("json"); ?>"><?php _se('Delete image'); ?></a>
                </div>
                <?php
                    }
                ?>
            </div>
        </div>

        <div class="header-content-right">
            <?php
                if(CHV\get_chv_setting('theme_peafowl_download_button')) {
            ?>
            <a href="<?php echo get_image()["url"]; ?>" download="<?php echo get_image()["filename"]; ?>" class="btn btn-download default" rel="tooltip" title="<?php echo strtoupper(get_image()["extension"]); ?> <?php echo get_image()["size_formatted"]; ?>"><span class="btn-icon icon-download"></span><span class="btn-text phone-hide"><?php echo get_image()["width"]; ?> x <?php echo get_image()["height"]; ?></span></a>
            <?php
                }
            ?>
            <a class="btn red" data-modal="simple" data-target="modal-share"><span class="btn-icon icon-share"></span><span class="btn-text"><?php _se('Share'); ?></span></a>
        </div>
        
    </div>
    
    <?php
        if(!get_image()['description']) {
    ?>
    <h1 class="viewer-title soft-hidden" data-text="image-description"><?php echo get_pre_doctitle(); ?></h1>
    <?php
        } else {
    ?>
    <h1 class="viewer-title" data-text="image-description"><?php echo nl2br(get_image_safe_html()['description']); ?></h1>
    <?php
        }
    ?>
    
    <?php
        if(!get_image()['nsfw'] or (get_image()['nsfw'] and CHV\get_chv_setting('show_banners_in_nsfw'))) {
            CHV\Render\show_banner('image_before_header');
        }
    ?>
    
    <div class="header">
        <?php
            global $tabs; // Define it as a global to bind it on the included tab.php
            $tabs = [
                0 => [
                    "label"        => _s('About'),
                    "id"        => "tab-about",
                    "current"    => true,
                ],
                1 => [
                    "label"        => _s('Embed codes'),
                    "id"        => "tab-codes",
                ]
            ];
            if(is_admin()) {
                $tabs[2] = [
                    "label"        => _s('Full info'),
                    "id"        => "tab-full-info"
                ];
            }
            
            G\Render\include_theme_file("snippets/tabs");
        ?>
        
        <div class="header-content-right phone-hide">
            <div class="number-figures float-left"><?php echo get_image()["views"]; ?> <span><?php echo get_image()["views_label"]; ?></span></div>
        </div>
    </div>
    
    <?php
        if(!get_image()['nsfw'] or (get_image()['nsfw'] and CHV\get_chv_setting('show_banners_in_nsfw'))) {
            CHV\Render\show_banner('image_after_header');
        }
    ?>
    
    <div id="tabbed-content-group">
        
        <div id="tab-about" class="tabbed-content visible">
            <div class="c9 phablet-c1 fluid-column grid-columns">
                <div class="panel-description default-margin-bottom">
                    <p class="description-meta margin-bottom-5">
                    <?php
                        $category = get_categories()[get_image()['category_id']];
                        $category_link = '<a href="'.$category['url'].'" rel="tag">'.$category['name'].'</a>';
                        if(get_image()['album']['id']) {
                            $album_link = '<a href="'.get_image()['album']['url'].'">'.get_image()['album']['name'].'</a>';
                            if($category) {
                                echo _s('Added to %a and categorized in %c', ['%a' => $album_link, '%c' => $category_link]);
                            } else {
                                echo _s('Added to %s', $album_link);
                            }
                            echo ' — ' .  CHV\time_elapsed_string(get_image()['date_gmt']);
                        } else {
                            if($category) {
                                echo _s('Uploaded to %s', $category_link) . ' — ' .  CHV\time_elapsed_string(get_image()['date_gmt']);
                            } else {
                                _se('Uploaded %s', CHV\time_elapsed_string(get_image()['date_gmt']));
                            }
                            
                        }
                    ?>
                    </p>
                    <?php
                        $image_exif = CHV\Render\getFriendlyExif(get_image()["original_exifdata"]);
                        if($image_exif) {
                    ?>
                    <p class="exif-meta"><span class="icon-camera"></span><?php echo $image_exif->camera; ?> <span class="exif-data"><?php echo $image_exif->capture; ?></span></p>
                    <?php
                        }
                    ?>
                </div>
                
                <div class="phone-show phablet-show hidden panel-share-networks margin-bottom-30">
                    <h4 class="title"><?php _se('Share image'); ?></h4>
                    <ul>
                    <?php echo '<li>'.join("</li><li>"."\n", $share_links_array); ?>
                    </ul>
                </div>
                
                <?php
                    if(is_admin()) {
                ?>
                <div class="tabbed-content-section margin-bottom-30">
                    <ul class="tabbed-content-list table-li">
                        <?php
                            $image_list_values = [
                                [
                                    'label'        => _s('Image ID'),
                                    'content'    => get_image()['id'] . ' ('.get_image()['id_encoded'].')'
                                ],
                                [
                                    'label'        => _s('Uploader IP'),
                                    'content'    => sprintf(str_replace('_IP_','%1$s', '<a href="http://whatismyipaddress.com/ip/_IP_" target="_blank">_IP_</a> &middot; <a href="'.G\get_base_url('search/images/?q=IP:_IP_').'">'._s('search content').'</a>'), get_image()['uploader_ip']) 
                                ],
                                [
                                    'label'     => _s('Upload date'),
                                    'content'    => get_image()['date']
                                ],
                                [
                                    'label'     => '',
                                    'content'     => get_image()['date_gmt'] . ' (GMT)'
                                ]
                            ];
                            
                            if(!is_null(get_image()['album']['id'])) {
                                $album_values = [
                                    'label'        => _s('Album ID'),
                                    'content'    => get_image()['album']['id'] . ' ('.get_image()['album']['id_encoded'].')'
                                ];
                                $image_list_values = array_slice($image_list_values, 0, 1, true) +
                                    ['album' =>
                                        [
                                            'label'        => _s('Album ID'),
                                            'content'    => get_image()['album']['id'] . ' ('.get_image()['album']['id_encoded'].')'
                                        ]
                                    ] +
                                    array_slice($image_list_values, 1, count($image_list_values) - 1, true) ;
                            }
                            
                            foreach($image_list_values as $v) {
                        ?>
                        <li><span class="c4 display-table-cell padding-right-10"><?php echo $v['label']; ?></span> <span class="display-table-cell"><?php echo $v['content']; ?></span></li>
                        <?php
                            }
                        ?>
                    </ul>                    
                </div>
                <?php
                    }
                ?>
                
                <?php
                    if(!get_image()['nsfw'] or (get_image()['nsfw'] and CHV\get_chv_setting('show_banners_in_nsfw'))) {
                        CHV\Render\show_banner('content_before_comments');
                    }
                ?>
                
                <div class="default-margin-bottom">
                    <?php echo CHV\get_chv_setting('comment_code'); ?>
                </div>
                
            </div>
            
            <div class="tablet-show laptop-show desktop-show hidden c15 phablet-c1 fluid-column grid-columns default-margin-bottom margin-left-10 panel-share-networks">
                <h4 class="title c4 grid-columns"><?php _se('Share image'); ?></h4>
                <ul>
                <?php echo '<li>'.join("</li><li>"."\n", $share_links_array); ?>
                </ul>
            </div>
        
            
            <?php
                if(get_image()["user"]["id"] != NULL) {
            ?>
            <div class="c15 phablet-c1 fluid-column grid-columns margin-left-10 phablet-margin-left-0">
                <h4 class="title c4 phablet-c1 grid-columns"><span data-content="album-panel-title"<?php if(get_image()["album"]["id"] == NULL) echo ' class="soft-hidden"'?>><?php _se('In this album'); ?></span></h4>
                <ul class="panel-thumb-list grid-columns" data-content="album-slice">
                    <?php
                        global $image_album_slice, $image_id;
                        $image_album_slice = get_image_album_slice();
                        $image_id = get_image()["id"];
                        G\Render\include_theme_file("snippets/image_album_slice");
                    ?>
                </ul>
            </div>
            <?php
                }
            ?>
            
            <div class="c15 phablet-c1 fluid-column grid-columns margin-left-10 phablet-margin-left-0">
                <?php
                    if(!get_image()['nsfw'] or (get_image()['nsfw'] and CHV\get_chv_setting('show_banners_in_nsfw'))) {
                        CHV\Render\show_banner('content_tab-about_column');
                    }
                ?>
            </div>
            
        </div>
        
    
        <?php
            if(is_admin()) {
        ?>
        <div id="tab-full-info" class="tabbed-content">
            <?php echo CHV\Render\arr_printer(get_image(), '<li><div class="c4 display-table-cell padding-right-10 font-weight-bold">%K</div> <div class="display-table-cell">%V</div></li>', ['<ul class="tabbed-content-list table-li">', '</ul>']); ?>
        </div>
        <?php
            }
        ?>
        
    </div>
    
    <?php
        if(!get_image()['nsfw'] or (get_image()['nsfw'] and CHV\get_chv_setting('show_banners_in_nsfw'))) {
            CHV\Render\show_banner('image_footer');
        }
    ?>
    
</div>

<!--googleoff: index-->
<?php
    if(is_owner() or is_admin()) {
?>
<div data-modal="form-modal" class="hidden" data-submit-fn="CHV.fn.submit_image_edit" data-before-fn="CHV.fn.before_image_edit" data-ajax-deferred="CHV.fn.complete_image_edit" data-ajax-url="<?php echo G\get_base_url("json"); ?>">
    <h1><?php _se('Edit image details'); ?></h1>
    <div class="modal-form">
        <?php
            global $user_items_editor;
            $user_items_editor = [
                'user_albums'    => get_image()['user']['albums'],
                'type'            => 'image',
                'album'            => get_image()['album'],
                'category'        => get_image()['category_id']
            ];
            G\Render\include_theme_file('snippets/form_image');
        ?>
    </div>
</div>
<?php
    }

    global $share_modal;
    $share_modal = array(
        'type'            => 'image',
        'url'            => get_image()['url_viewer'],
        'links_array'    => $share_links_array,
        'privacy'        => get_image()['album']['privacy']
    );
    G\Render\include_theme_file('snippets/modal_share');
    
?>
<!--googleon: index-->

<?php G\Render\include_theme_footer(); ?>

---