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') ? 0?>,
            viewer_banner_foot = <?php echo CHV\get_chv_setting('banner_image_image-viewer_foot') ? 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 = [
                
=> [
                    
"label"        => _s('About'),
                    
"id"        => "tab-about",
                    
"current"    => true,
                ],
                
=> [
                    
"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_values01true) +
                                    [
'album' =>
                                        [
                                            
'label'        => _s('Album ID'),
                                            
'content'    => get_image()['album']['id'] . ' ('.get_image()['album']['id_encoded'].')'
                                        
]
                                    ] +
                                    
array_slice($image_list_values1count($image_list_values) - 1true) ;
                            }
                            
                            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(); ?>