fixes #1657 SVG support (both gallery and admin sides)

admin/batch_manager_unit.php

@@ -213,7 +213,8 @@ SELECT
     {
       $legend.= ' ('.$row['file'].')';
     }
-
+    $extTab = explode('.',$row['path']);
+    
     $template->append(
       'elements', array_merge($row,
       array(
@@ -228,6 +229,7 @@ SELECT
         'DESCRIPTION' => htmlspecialchars(isset($row['comment']) ? $row['comment'] : ""),
         'DATE_CREATION' => $row['date_creation'],
         'TAGS' => $tag_selection,
+        'is_svg' => (strtoupper(end($extTab)) == 'SVG'),
         )
       ));
   }

admin/include/functions_metadata.php

@@ -177,12 +177,38 @@ function get_sync_metadata($infos)
         // for width/height (to compute the multiple size dimensions)
         $is_tiff = true;
       }
-
     }
 
     $file = original_to_representative($file, $infos['representative_ext']);
   }
 
+  if (in_array(mime_content_type($file), array('image/svg+xml', 'image/svg')))
+  {
+    $xml = file_get_contents($file);
+
+    $xmlget = simplexml_load_string($xml);
+    $xmlattributes = $xmlget->attributes();
+    $width = (int) $xmlattributes->width; 
+    $height = (int) $xmlattributes->height;
+    $vb = (string) $xmlattributes->viewBox;
+
+    if (isset($width) and $width != "")
+    {
+      $infos['width'] = $width;
+    } elseif (isset($vb))
+    {
+      $infos['width'] = explode(" ", $vb)[2];
+    }
+
+    if (isset($height) and $height != "")
+    {
+      $infos['height'] = $height;
+    } elseif (isset($vb))
+    {
+      $infos['height'] = explode(" ", $vb)[3];
+    }
+  }
+
   if ($image_size = @getimagesize($file))
   {
     $infos['width'] = $image_size[0];
@@ -244,7 +270,7 @@ SELECT id, path, representative_ext
     {
       continue;
     }
-
+    // print_r($data);
     $id = $data['id'];
     foreach (array('keywords', 'tags') as $key)
     {

admin/picture_modify.php

@@ -295,7 +295,8 @@ $intro_vars = array(
   'size' => l10n('%s pixels, %.2f MB', $row['width'].'×'.$row['height'], $row['filesize']/1024),
   'stats' => l10n('Visited %d times', $row['hit']),
   'id' => l10n($row['id']),
-  'ext' => l10n('%s file type',strtoupper(end($extTab)))
+  'ext' => l10n('%s file type',strtoupper(end($extTab))),
+  'is_svg'=> (strtoupper(end($extTab)) == 'SVG'),
   );
 
 if ($conf['rate'] and !empty($row['rating_score']))

admin/themes/default/template/batch_manager_unit.tpl

@@ -56,7 +56,7 @@ jQuery("a.preview-box").colorbox( {
   <legend>{$element.LEGEND}</legend>
 
   <span class="thumb">
-    <a href="{$element.FILE_SRC}" class="preview-box icon-zoom-in" title="{$element.LEGEND|@htmlspecialchars}"><img src="{$element.TN_SRC}" alt=""></a>
+    <a href="{$element.FILE_SRC}" class="preview-box icon-zoom-in" title="{$element.LEGEND|@htmlspecialchars}"><img src="{$element.TN_SRC}" alt="" {if $element.is_svg}style="{if $current.width < 100}min-width: 100px;{/if}{if $current.height < 100} min-height: 100px; {/if}" {/if}></a>
     <a href="{$element.U_EDIT}" class="icon-pencil">{'Edit'|@translate}</a>
   </span>
 

admin/themes/default/template/picture_modify.tpl

@@ -96,7 +96,7 @@ $('#action-delete-picture').on('click', function() {
 {combine_css path="admin/themes/default/fontello/css/animation.css" order=10} {* order 10 is required, see issue 1080 *}
 
 <form action="{$F_ACTION}" method="post" id="pictureModify">
-  <div id='picture-preview'>
+  <div id='picture-preview' {if $INTRO.is_svg} style="padding:50px" {/if}>
     <div class='picture-preview-actions'>
       {if isset($U_JUMPTO)}
         <a class="icon-eye" href="{$U_JUMPTO}" title="{'Open in gallery'|@translate}"></a>
@@ -110,7 +110,11 @@ $('#action-delete-picture').on('click', function() {
       {/if}
     </div>
     <a href="{$FILE_SRC}" class="preview-box icon-zoom-in" title="{$TITLE|htmlspecialchars}" style="{if $FORMAT}width{else}height{/if}:35vw">
+      {if $INTRO.is_svg}
+      <img src="{$PATH}" alt="{'Thumbnail'|translate}" style="{if $FORMAT}width{else}height{/if}:100%;">
+      {else}
       <img src="{$TN_SRC}" alt="{'Thumbnail'|translate}" style="{if $FORMAT}width{else}height{/if}:100%">
+      {/if}
     </a>
   </div>
   <div id='picture-content'>

include/category_default.inc.php

@@ -104,6 +104,8 @@ foreach ($pictures as $row)
     'URL' => $url,
     'DESCRIPTION' => $desc,
     'src_image' => new SrcImage($row),
+    'path_ext' => strtolower(get_extension($row['path'])),
+    'file_ext' => strtolower(get_extension($row['file'])),
     ) );
 
   if ($conf['index_new_icon'])

include/config_default.inc.php

@@ -45,7 +45,7 @@ $conf['picture_ext'] = array('jpg','jpeg','png','gif');
 // file_ext : file extensions (case sensitive) authorized
 $conf['file_ext'] = array_merge(
   $conf['picture_ext'],
-  array('tiff', 'tif', 'mpg','zip','avi','mp3','ogg','pdf')
+  array('tiff', 'tif', 'mpg','zip','avi','mp3','ogg','pdf','svg')
   );
 
 // enable_formats: should Piwigo search for multiple formats?

include/derivative.inc.php

@@ -42,6 +42,8 @@ final class SrcImage
 
     $this->id = $infos['id'];
     $ext = strtolower(get_extension($infos['path']));
+    $infos['file_ext'] = @strtolower(get_extension($infos['file']));
+    $infos['path_ext'] = $ext;
     if (in_array($ext, $conf['picture_ext']))
     {
       $this->rel_path = $infos['path'];
@@ -57,10 +59,17 @@ final class SrcImage
       $this->flags |= self::IS_MIMETYPE;
       if ( ($size=@getimagesize(PHPWG_ROOT_PATH.$this->rel_path)) === false)
       {
-        $this->rel_path = 'themes/default/icon/mimetypes/unknown.png';
+        if ('svg' == $ext) 
+        {
+          $this->rel_path = $infos['path'];
+        }
+        else 
+        {
+          $this->rel_path = 'themes/default/icon/mimetypes/unknown.png';
+        }
         $size = getimagesize(PHPWG_ROOT_PATH.$this->rel_path);
       }
-      $this->size = array($size[0],$size[1]);
+      $this->size = @array($size[0],$size[1]);
     }
 
     if (!$this->size)

picture.php

@@ -507,6 +507,10 @@ while ($row = pwg_db_fetch_assoc($result))
   $row['src_image'] = new SrcImage($row);
   $row['derivatives'] = DerivativeImage::get_all($row['src_image']);
 
+  $extTab = explode('.',$row['path']);
+  $row['path_ext'] = strtolower(get_extension($row['path']));
+  $row['file_ext'] = strtolower(get_extension($row['file']));
+
   if ($i=='current')
   {
     $row['element_path'] = get_element_path($row);

themes/default/template/picture.tpl

@@ -149,7 +149,7 @@ y.callService(
 		{if isset($previous)}
 			<a class="navThumb" id="linkPrev" href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE_ESC}" rel="prev">
 				<span class="thumbHover prevThumbHover"></span>
-				<img src="{$previous.derivatives.square->get_url()}" alt="{$previous.TITLE_ESC}">
+        <img class="{if (isset($previous.path_ext) and $previous.path_ext == 'svg')}svgImg{/if}" src="{if (isset($previous.path_ext) and $previous.path_ext == 'svg')}{$previous.path}{else}{$previous.derivatives.square->get_url()}{/if}" alt="{$previous.TITLE_ESC}">
 			</a>
 		{elseif isset($U_UP)}
 			<a class="navThumb" id="linkPrev" href="{$U_UP}" title="{'Thumbnails'|@translate}">
@@ -159,7 +159,7 @@ y.callService(
 		{if isset($next)}
 			<a class="navThumb" id="linkNext" href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE_ESC}" rel="next">
 				<span class="thumbHover nextThumbHover"></span>
-				<img src="{$next.derivatives.square->get_url()}" alt="{$next.TITLE_ESC}">
+				<img class="{if (isset($next.path_ext) and $next.path_ext == 'svg')}svgImg{/if}" src="{if (isset($next.path_ext) and $next.path_ext == 'svg')}{$next.path}{else}{$next.derivatives.square->get_url()}{/if}" alt="{$next.TITLE_ESC}">
 			</a>
 		{elseif isset($U_UP)}
 			<a class="navThumb" id="linkNext"  href="{$U_UP}"  title="{'Thumbnails'|@translate}">

themes/default/template/picture_content.tpl

@@ -4,7 +4,7 @@
 {footer_script}var error_icon = "{$ROOT_URL}{$themeconf.icon_dir}/errors_small.png"{/footer_script}
 {/if}
 
-<img {if $current.selected_derivative->is_cached()}src="{$current.selected_derivative->get_url()}" {$current.selected_derivative->get_size_htm()}{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax_loader.gif" data-src="{$current.selected_derivative->get_url()}"{/if} alt="{$ALT_IMG}" id="theMainImage" usemap="#map{$current.selected_derivative->get_type()}" title="{if isset($COMMENT_IMG)}{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}{else}{$current.TITLE_ESC} - {$ALT_IMG}{/if}">
+<img class="file-ext-{if isset($current.file_ext)}{$current.file_ext}{/if} path-ext-{if isset($current.path_ext)}{$current.path_ext}{/if}" {if (isset($current.path_ext) and $current.path_ext == 'svg')} src="{$current.path}" {elseif $current.selected_derivative->is_cached()}src="{$current.selected_derivative->get_url()}"{$current.selected_derivative->get_size_htm()}{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax_loader.gif" data-src="{$current.selected_derivative->get_url()}"{/if} alt="{$ALT_IMG}" id="theMainImage" usemap="#map{$current.selected_derivative->get_type()}" title="{if isset($COMMENT_IMG)}{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}{else}{$current.TITLE_ESC} - {$ALT_IMG}{/if}">
 
 {foreach from=$current.unique_derivatives item=derivative key=derivative_type}{strip}
 <map name="map{$derivative->get_type()}">

themes/default/theme.css

@@ -342,6 +342,7 @@ TD.calDayCellFull, TD.calDayCellEmpty {
 }
 .thumbnails IMG {
 	vertical-align: middle;
+  max-width: 100%;
 }
 
 .thumbnails SPAN.thumbLegend {
@@ -429,6 +430,11 @@ TD.calDayCellFull, TD.calDayCellEmpty {
   text-align: right;
 }
 
+#linkPrev img.svgImg,
+#linkNext img.svgImg {
+  width: 50px;
+  height: 50px;
+}
 
 DIV.thumbHover{ /*only first & last holders are divs*/
   width: 108px;