iarv/Piwigo
1
0
Fork 0
mirror of https://github.com/Piwigo/Piwigo.git synced 2026-03-28 17:42:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

feature 434: split thumbnails in template so customization could be easyer

Browse Source 
git-svn-id: http://piwigo.org/svn/trunk@1384 68402e56-0260-453c-a942-63ccdbb3a9ee
This commit is contained in:
chrisaga
2006-06-24 08:56:59 +00:00
parent 235cd53539
commit 300eaed892
8 changed files with 113 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
include/category_default.inc.php
View File

@@ -60,6 +60,7 @@ SELECT *
}
// template thumbnail initialization
$template->set_filenames( array( 'thumbnails' => 'thumbnails.tpl',));
if (count($pictures) > 0)
{
$template->assign_block_vars('thumbnails', array());
@@ -165,6 +166,7 @@ SELECT COUNT(*) AS nb_comments
$row_number = 0;
}
}
$template->assign_var_from_handle('THUMBNAILS', 'thumbnails');
pwg_debug('end include/category_default.inc.php');
?>

45
template/yoga/content.css
View File

@@ -29,51 +29,6 @@ BODY#theNBMPage #content
text-align: center;
}
/* Thumbnails customization */
#content UL.thumbnails SPAN.thumbLegend {
font-size: 80%; /* font size */
overflow: hidden; /* oversized legend is clipped */
}
/* Thumbnail "elastic" layout */
#content UL.thumbnails {
margin: 0;
padding: 0;
list-style: none;
text-align: center; /* to center the whole collection in #content */
}
#content UL.thumbnails LI { display: inline }
#content UL.thumbnails SPAN.wrap1 {
margin: 0 5px 5px 5px;
display: table-cell; display: inline-table; display: inline-block;
vertical-align: top; /* OK with Opera and IE6 not Geko */
text-align: center; /* to center the thumbnail and legend in Geko/Opera */
}
#content UL.thumbnails SPAN.wrap2 {
margin: 0; /* important reset the margins */
display: table-cell; /* block prevents vertical-align here */
vertical-align: middle; /* Ok with Opera and Geko not IE6 */
}
#content UL.thumbnails SPAN.wrap2 A,
#content UL.thumbnails SPAN.wrap2 LABEL {
display: block;
border-bottom: none;
}
#content UL.thumbnails IMG {
margin-bottom: -4px; /* why ??? something wrong with Geko and Opera ignored by IE6*/
}
/* label and input used for caddie in admin section */
#content UL.thumbnails SPAN.wrap2 LABEL {
position: relative;
}
:root #content UL.thumbnails SPAN.wrap2 INPUT { /* hide from Opera */
position: absolute;
left: 0;
top: 0;
}
#content .navigationBar, #content .additional_info {
margin: 10px 0;
text-align: center;

28
template/yoga/fix-ie5-ie6.css
View File

@@ -1,6 +1,8 @@
/* $Id$ */
/* Issues in IE from 5 to 6 only not to be used with IE7 */
@import "thumbnails-fix-ie5-ie6.css";
/* fix lack of :hover behaviour for non link objects */
BODY {
behavior:url("template-common/csshover.htc");
@@ -21,32 +23,6 @@ UL.tagSelection LI INPUT,
background-color: transparent;
}
/* fix IE with another layout for thumbnails */
#content UL.thumbnails SPAN.wrap2 {
display: block;
position: relative;
text-align: left;
}
#content UL.thumbnails SPAN.wrap2 A,
#content UL.thumbnails SPAN.wrap2 LABEL {
overflow: visible;
position: absolute;
top: 50%;
text-align: center;
}
#content UL.thumbnails IMG.thumbnail {
position: relative;
top: -50%;
/*\*//*/
margin-top: -40%;
/**/
}
#content UL.thumbnails SPAN.wrap2 input {
position: absolute;
left: 0;
top: -50%; /* same as other browsers but not so pretty */
}
/* fix category thumbnails on main page */
#content UL.thumbnailCategories {
width: 99%; /* buggy IE box model */

35
template/yoga/index.tpl
View File

@@ -76,40 +76,7 @@
<!-- END calendar -->
{MONTH_CALENDAR}
<!-- BEGIN thumbnails -->
<ul class="thumbnails">
<!-- BEGIN line -->
<!-- BEGIN thumbnail -->
<li class="{thumbnails.line.thumbnail.CLASS}">
<span class="wrap1">
<span class="wrap2">
<a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
<img class="thumbnail" src="{thumbnails.line.thumbnail.IMAGE}"
alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
title="{thumbnails.line.thumbnail.IMAGE_TITLE}">
</a>
</span>
<span class="thumbLegend">
<!-- BEGIN element_name -->
{thumbnails.line.thumbnail.element_name.NAME}
<!-- END element_name -->
<!-- BEGIN category_name -->
[{thumbnails.line.thumbnail.category_name.NAME}]
<!-- END category_name -->
{thumbnails.line.thumbnail.IMAGE_TS}
<!-- BEGIN nb_comments -->
<br />{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {lang:comments}
<!-- END nb_comments -->
</span>
</span>
</li>
<!-- END thumbnail -->
<!-- END line -->
</ul>
<!-- END thumbnails -->
{THUMBNAILS}
{CATEGORIES}
<!-- BEGIN cat_infos -->

1
template/yoga/layout.css
View File

@@ -3,6 +3,7 @@
/* template css */
@import "menubar.css";
@import "content.css";
@import "thumbnails.css";
@import "image.css";
@import "popuphelp.css";
@import "default-layout.css";

27
template/yoga/thumbnails-fix-ie5-ie6.css Normal file
View File

@@ -0,0 +1,27 @@
/* $Id: $ */
/* fix IE with another layout for thumbnails */
#content UL.thumbnails SPAN.wrap2 {
display: block;
position: relative;
text-align: left;
}
#content UL.thumbnails SPAN.wrap2 A,
#content UL.thumbnails SPAN.wrap2 LABEL {
overflow: visible;
position: absolute;
top: 50%;
text-align: center;
}
#content UL.thumbnails IMG.thumbnail {
position: relative;
top: -50%;
/*\*//*/
margin-top: -40%;
/**/
}
#content UL.thumbnails SPAN.wrap2 input {
position: absolute;
left: 0;
top: -50%; /* same as other browsers but not so pretty */
}

47
template/yoga/thumbnails.css Normal file
View File

@@ -0,0 +1,47 @@
/* $Id: $ */
/* Thumbnails customization */
#content UL.thumbnails SPAN.thumbLegend {
font-size: 80%; /* font size */
overflow: hidden; /* oversized legend is clipped */
}
/* Thumbnail "elastic" layout */
#content UL.thumbnails {
margin: 0;
padding: 0;
list-style: none;
text-align: center; /* to center the whole collection in #content */
}
#content UL.thumbnails LI { display: inline }
#content UL.thumbnails SPAN.wrap1 {
margin: 0 5px 5px 5px;
display: table-cell; display: inline-table; display: inline-block;
vertical-align: top; /* OK with Opera and IE6 not Geko */
text-align: center; /* to center the thumbnail and legend in Geko/Opera */
}
#content UL.thumbnails SPAN.wrap2 {
margin: 0; /* important reset the margins */
display: table-cell; /* block prevents vertical-align here */
vertical-align: middle; /* Ok with Opera and Geko not IE6 */
}
#content UL.thumbnails SPAN.wrap2 A,
#content UL.thumbnails SPAN.wrap2 LABEL {
display: block;
border-bottom: none;
}
#content UL.thumbnails IMG {
margin-bottom: -4px; /* why ??? something wrong with Geko and Opera ignored by IE6*/
}
/* label and input used for caddie in admin section */
#content UL.thumbnails SPAN.wrap2 LABEL {
position: relative;
}
:root #content UL.thumbnails SPAN.wrap2 INPUT { /* hide from Opera */
position: absolute;
left: 0;
top: 0;
}

33
template/yoga/thumbnails.tpl Normal file
View File

@@ -0,0 +1,33 @@
<!-- $Id: $ -->
<!-- BEGIN thumbnails -->
<ul class="thumbnails">
<!-- BEGIN line -->
<!-- BEGIN thumbnail -->
<li class="{thumbnails.line.thumbnail.CLASS}">
<span class="wrap1">
<span class="wrap2">
<a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
<img class="thumbnail" src="{thumbnails.line.thumbnail.IMAGE}"
alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
title="{thumbnails.line.thumbnail.IMAGE_TITLE}">
</a>
</span>
<span class="thumbLegend">
<!-- BEGIN element_name -->
{thumbnails.line.thumbnail.element_name.NAME}
<!-- END element_name -->
<!-- BEGIN category_name -->
[{thumbnails.line.thumbnail.category_name.NAME}]
<!-- END category_name -->
{thumbnails.line.thumbnail.IMAGE_TS}
<!-- BEGIN nb_comments -->
<br />{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {lang:comments}
<!-- END nb_comments -->
</span>
</span>
</li>
<!-- END thumbnail -->
<!-- END line -->
</ul>
<!-- END thumbnails -->