Wt gallery: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
Zeile 399: Zeile 399:
  
 
Natürlich muß die Lightbox installiert sein für das Beispiel hier wurde perfectlightbox benutzt.
 
Natürlich muß die Lightbox installiert sein für das Beispiel hier wurde perfectlightbox benutzt.
 +
 +
 +
== Beispielkonfiguration (ak-freizeiten) ==
 +
 +
=== Constants ===
 +
<pre>
 +
plugin.wtgallery {
 +
  main.path = fileadmin/bilder
 +
  template {
 +
    single = fileadmin/templates/wtgallery/single.html
 +
    list = fileadmin/templates/wtgallery/list.html
 +
    category = fileadmin/templates/wtgallery/category.html
 +
  }
 +
  list {
 +
    rows = 5
 +
    columns = 4
 +
    limit = 80
 +
    width = 100c
 +
    height = 100c
 +
    metainformation = TXT
 +
  }
 +
  category {
 +
    width = 126c
 +
    height = 100c
 +
    rows = 3
 +
    columns = 3
 +
    previewpicture_order = ASC
 +
    metainformation = TXT
 +
  }
 +
  single{
 +
    pid_single = 82
 +
    width = 400
 +
    #height = 300
 +
    metainformation = TXT
 +
  }
 +
}
 +
#plugin.perfectlightbox.captionField = titleText
 +
 +
/*  cooliris {
 +
    title = BDP-Cooliris
 +
    url = http://www.bawue.bdp.org/
 +
    width = 400
 +
    height = 300
 +
    limit = 100
 +
    window_width = 460
 +
    window_height = 400
 +
  }*/
 +
</pre>
 +
 +
=== Setup ===
 +
<pre>
 +
plugin.tx_wtgallery_pi1 {
 +
  single.image.imageLinkWrap.bodyTag = <body style="background:#FFF;margin:0;padding:0;">
 +
  _LOCAL_LANG.de.wtgallery_ll_title_category = Freizeiten
 +
  _LOCAL_LANG.de.wtgallery_ll_startcategorylink = Zurück zur Übersicht
 +
 +
# WT Gallery PerfectLightbox für Listenansicht
 +
  category.text.wrap >
 +
  category.text.if >
 +
  list {
 +
    image = IMAGE
 +
    image {
 +
      imageLinkWrap.typolink {
 +
        title.field = title
 +
        comments.field = comments
 +
        parameter.cObject = IMG_RESOURCE
 +
        parameter.cObject.file.import.field = picture
 +
        parameter.cObject.file.maxW = 600
 +
        parameter.cObject.file.maxH = 600
 +
        ATagParams = rel="lightbox[galerie]"
 +
      }
 +
    }
 +
  }
 +
}
 +
plugin.tx_wtgallery_pi1.list.text.wrap >
 +
plugin.tx_wtgallery_pi1.list.text.if >
 +
plugin.tx_wtgallery_pi1.single.text.wrap >
 +
plugin.tx_wtgallery_pi1.single.text.if >
 +
 +
#Orig: plugin.tx_wtgallery_pi1.list.image.titleText.field = filename
 +
plugin.tx_wtgallery_pi1.list.image.titleText.field = title
 +
 +
</pre>

Version vom 26. Juli 2011, 08:17 Uhr

Allgemein

Arbeitet standardmäßig mit mehreren Template Files (s.u.), müßte aber auch funktionieren wenn alles in einer Datei steht.

Basiert auf 3.3.1

Constants

plugin.wtgallery.main.path = fileadmin/bilder
plugin.wtgallery.list.rows = 5
plugin.wtgallery.list.columns = 4
plugin.wtgallery.list.limit = 80
plugin.wtgallery.category.rows = 3
plugin.wtgallery.category.columns = 3
plugin.wtgallery.category.previewpicture_order = newest
plugin.wtgallery.cooliris.title = BDP-Cooliris
plugin.wtgallery.single.pid_single = 82
plugin.wtgallery.single.width = 400
#plugin.wtgallery.single.height = 300

plugin.wtgallery.list.width = 100c
plugin.wtgallery.list.height = 100c
plugin.wtgallery.category.width = 126c
plugin.wtgallery.category.height = 100c
plugin.wtgallery.template.single = fileadmin/templates/wtgallery/single.html
plugin.wtgallery.template.list = fileadmin/templates/wtgallery/list.html
plugin.wtgallery.template.category = fileadmin/templates/wtgallery/category.html
plugin.wtgallery.cooliris.url = http://www.mydomain.org/
plugin.wtgallery.cooliris.width = 400
plugin.wtgallery.cooliris.height = 300
plugin.wtgallery.cooliris.limit = 100
plugin.wtgallery.cooliris.window_width = 460
plugin.wtgallery.cooliris.window_height = 400

Setup

plugin.tx_wtgallery_pi1.single.image.imageLinkWrap.bodyTag = <body style="background:#FFF;margin:0;padding:0;">
plugin.tx_wtgallery_pi1._LOCAL_LANG.de.wtgallery_ll_title_category = Kategorie
plugin.tx_wtgallery_pi1._LOCAL_LANG.de.wtgallery_ll_startcategorylink = Zurück zur Übersicht

HTML-Template

category.html 

wt_gallery HTML Template for category view

--- Markers within loop ---
Imagetag (e.g. <img src="typo3temp/pic.jpg">):	###IMAGE###
Imagepath (e.g. typo3temp/pic.jpg):		###PICTURE###
Picture filename (e.g. pic.jpg):		###BASENAME###
Filename without extension (e.g. pic):		###FILENAME###
Extension(e.g.jpg):				###EXTENSION###
Relative path to this folder (e.g. fileadmin/folder/):###DIRNAME###
Timestamp of current picture:			###TSTAMP###
Name of folder:					###CURRENTFOLDER###
Text from txt files to any folder:		###TEXT###
Dynamic class (firstofrow, centerofrow, lastofrow):	###CLASS###
Subpart link to list view:			<!-- ###CATEGORYLINK### -->
	
--- Markers out of the loop ---
Insert category browser				###PAGEBROWSER###
    
GLOBAL MARKERS:
Displaying any value from pi1/locallang.xml:			###WTGALLERY_LL_YOURFIELD### (Could be filled via locallang.xml or typoscript - see manual for details)
Displaying any value from typoscript:					###WTGALLERY_TS_YOURFIELD### (Could be filled via typoscript - see manual for details)
	
		
<!-- ###WTGALLERY_CATEGORY### begin --> 
<div class="wtgallery_category_area">
   <!-- ###CONTENT### -->
      <!-- ###ITEM### -->
      <div class="wtgallery_categories ###CLASS###">
         <div class="wtgallery_category_pic">###IMAGE###</div>
            <!-- ###CATEGORYLINK### -->###TEXT###<!-- ###CATEGORYLINK### -->
         </div>
      <!-- ###ITEM### -->
   <!-- ###CONTENT### -->
   <div class="clear"></div>
	###PAGEBROWSER###
   </div>
<!-- ###WTGALLERY_CATEGORY### end -->

wt_directory HTML Template for category_browser view

	Current page - from X to...:							###CURRENT_MIN###
    Current page - to X pictures:							###CURRENT_MAX###
    Overall pictures on all pages: 							###OVERALL###
    Insert HMENU (define via TS):							###PAGELINKS###
    Insert link to start category (define via TS):			###STARTCATEGORYLINK###
    
	GLOBAL MARKERS:
	Displaying any value from pi1/locallang.xml:			###WTGALLERY_LL_YOURFIELD### (Could be filled via locallang.xml or typoscript - see manual for details)
	Displaying any value from typoscript:					###WTGALLERY_TS_YOURFIELD### (Could be filled via typoscript - see manual for details)

<!-- ###WTGALLERY_CATEGORY_PAGEBROWSER### begin --> 
	<div class="wtgallery_category_pagebrowser_area">   
        <p>###CURRENT_MIN### ###WTGALLERY_LL_PAGEBROWSER_UPTO### ###CURRENT_MAX### ###WTGALLERY_LL_PAGEBROWSER_WITHIN### ###OVERALL###</p>
        <p>###PAGELINKS###</p>
        ###STARTCATEGORYLINK###
	</div>
<!-- ###WTGALLERY_CATEGORY_PAGEBROWSER### end -->

cooliris.html 

wt_gallery HTML Template for cooliris rss

	--- Markers within loop ---
	Picture resource (like typo3temp/picture.jpg)			###IMAGE###
	Picture filename (e.g. pic.jpg):						###BASENAME###
    Filename without extension (e.g. pic):					###FILENAME###
    Extension (e.g. jpg):									###EXTENSION###
    Relative path to this folder (e.g. fileadmin/folder/):	###DIRNAME###
    Timestamp of current picture:							###TSTAMP###
	Name of folder:											###CURRENTFOLDER###
    
    --- Markers out of loop ---
    ###TITLE###
    ###URL###
    ###DESCRIPTION###
    

	GLOBAL MARKERS:
	Displaying any value from pi1/locallang.xml:			###WTGALLERY_LL_YOURFIELD### (Could be filled via locallang.xml or typoscript - see manual for details)
	Displaying any value from typoscript:					###WTGALLERY_TS_YOURFIELD### (Could be filled via typoscript - see manual for details)
    
    
<!-- ###WTGALLERY_COOLIRIS_RSS### begin --> 
    <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
    <rss version="2.0" xmlns:media="http://search.yahoo.com/mrss" xmlns:atom="http://www.w3.org/2005/Atom">
        <channel>
                <title>wt_gallery</title>
                <link>http://testumgebung.einpraegsam.net/</link>
                <description>Description</description>
                
                <!-- ###CONTENT### --><!-- ###ITEM### -->
                    <item>
						<title>###FILENAME###</title>
            			<link>###IMAGE###</link>
                        <guid>###FILENAME###</guid>
                        <media:thumbnail url="###IMAGE###" />
                        <media:content url="###IMAGE###" type="image/jpeg" />
                    </item>
                <!-- ###ITEM### --><!-- ###CONTENT### -->
        
        </channel>
    </rss>
<!-- ###WTGALLERY_COOLIRIS_RSS### end -->

list.html 

wt_gallery HTML Template for list view

	--- Markers within loop ---
	Imagetag (e.g. <img src="typo3temp/pic.jpg">):			###IMAGE###
	Imagepath (e.g. typo3temp/pic.jpg):						###PICTURE###
	Picture filename (e.g. pic.jpg):						###BASENAME###
    Filename without extension (e.g. pic):					###FILENAME###
    Extension (e.g. jpg):									###EXTENSION###
    Relative path to this folder (e.g. fileadmin/folder/):	###DIRNAME###
    Timestamp of current picture:							###TSTAMP###
	Name of folder:											###CURRENTFOLDER###
    Image text (from EXIF or txt file):						###TEXT###
    Dynamic class (firstofrow, centerofrow, lastofrow):		###CLASS###
    Subpart for Single view link:							<!-- ###SINGLELINK### -->Image<!-- ###SINGLELINK### -->
    
    --- Markers out of the loop ---
    Inserts pagebrowser to Marker							###PAGEBROWSER###
    

	GLOBAL MARKERS:
	Displaying any value from pi1/locallang.xml:			###WTGALLERY_LL_YOURFIELD### (Could be filled via locallang.xml or typoscript - see manual for details)
	Displaying any value from typoscript:					###WTGALLERY_TS_YOURFIELD### (Could be filled via typoscript - see manual for details)
	
	
	
<!-- ###WTGALLERY_LIST### begin --> 
    <div class="wtgallery_list_area">
        <!-- ###CONTENT### --><!-- ###ITEM### -->
            <div class="wtgallery_list ###CLASS###">
                ###IMAGE###
            </div>
        <!-- ###ITEM### --><!-- ###CONTENT### -->
        <div class="clear"></div>
        ###PAGEBROWSER###
    </div>
<!-- ###WTGALLERY_LIST### end -->





wt_gallery HTML Template for pagebrowser in listview

	Current page - from X to...:						###CURRENT_MIN###
    Current page - to X pictures:						###CURRENT_MAX###
    Overall pictures on all pages: 						###OVERALL###
    Insert HMENU:										###PAGELINKS###

	GLOBAL MARKERS:
	Displaying any value from pi1/locallang.xml:		###WTGALLERY_LL_YOURFIELD### (Could be filled via locallang.xml or typoscript - see manual for details)
	Displaying any value from typoscript:				###WTGALLERY_TS_YOURFIELD### (Could be filled via typoscript - see manual for details)
	
	
	
<!-- ###WTGALLERY_LIST_PAGEBROWSER### begin --> 
    <div class="wtgallery_list_pagebrowser_area">
        <p>###CURRENT_MIN### ###WTGALLERY_LL_PAGEBROWSER_UPTO### ###CURRENT_MAX### ###WTGALLERY_LL_PAGEBROWSER_WITHIN### ###OVERALL###</p>
        <p>###PAGELINKS###</p>
    </div>
<!-- ###WTGALLERY_LIST_PAGEBROWSER### end -->

single.html 

wt_directory HTML Template for single view

	Imagetag (e.g. <img src="typo3temp/pic.jpg">):		###IMAGE###
    Image text (from EXIF or txt file):					###TEXT###
    Picture (e.g. fileadmin/pics/pic.jpg):				###PICTURE###
    Filename (e.g. pic):								###FILENAME###
    Dirname (e.g. fileadmin/pics):						###DIRNAME###
    Basename (e.g. pic.jpg):							###BASENAME###
    Extension (e.g. jpg):								###EXTENSION###
    Timestamp of changedate:							###TSTAMP###
    Insert link to listview (define via TS):			###LISTVIEWLINK###
    Subpart for next link:								<!-- ###NEXT### -->Next<!-- ###NEXT### -->
    Subpart for previous link:							<!-- ###PREVIOUS### -->Previous<!-- ###PREVIOUS### -->
    

	GLOBAL MARKERS:
	Displaying any value from pi1/locallang.xml:		###WTGALLERY_LL_YOURFIELD### (Could be filled via locallang.xml or typoscript - see manual for details)
	Displaying any value from typoscript:				###WTGALLERY_TS_YOURFIELD### (Could be filled via typoscript - see manual for details)



<!-- ###WTGALLERY_SINGLE### begin -->
	<div class="wtgallery wtgallery_single wt_gallery_single_###FILENAME###">
		<!--<h2 class="wtgallery_single">###WTGALLERY_LL_TITLE_SINGLE###</h2>-->
        ###IMAGE###
        <div class="wtgallery_single_browser">
        	<div class="wtgallery_single_browser_previous">
            	<!-- ###PREVIOUS### -->###WTGALLERY_LL_PREVIOUS###<!-- ###PREVIOUS### -->
            </div>
            <div class="wtgallery_single_browser_next">
            	<!-- ###NEXT### -->###WTGALLERY_LL_NEXT###<!-- ###NEXT### -->
            </div>
        </div>
        ###TEXT###
        ###LISTVIEWLINK###
    </div>
<!-- ###WTGALLERY_SINGLE### end -->

CSS

Zusätzliches CSS für wt_gallery (rest kommt aus der Extension wt_gallery.css 

/*gallery*/
div.tx-wtgallery-pi1 {
	padding: 0px;
	background-color: #FFF;
margin: 0 0 1em 0;
}

div.tx-wtgallery-pi1 ul{
padding: 0 0 0 0px !important;
margin: 0;
}
div.tx-wtgallery-pi1 li{
display: inline;
padding-right:0.5em;
margin: 0;
}
div.tx-wtgallery-pi1 p{
margin:0;
padding: 0 0 0 0px;}

div.tx-wtgallery-pi1 a{
margin: 0;
padding: 0;
}
/*categories*/
div.wtgallery_categories{
background: #cae5b7;
border: 1px solid #6fa24a;
text-align:center;
margin: 0 5px 10px 5px;
padding: 0;
width: 150px;
height: 155px;
}

div.wtgallery_category_pic{
padding:8px 0 2px 0;
}
div.wtgallery_category_pic img{
border: 1px solid #6fa24a !important;
}
div.wtgallery_category_folder,
div.wt_gallery_category_inner_text{
font-size: 11px;
}

div.wt_gallery_category_inner_text{
margin: 0 4px;
}

/*list*/
div.wtgallery_list {
	padding: 1px;
	margin: 7px;
	background-color: #FFF;
}
div.wtgallery_list_area{
/*background: pink;*/
}

div.wtgallery_list_area .list_row{
padding-left:9px;
}

div.wtgallery_list a img {
	padding: 1px;
/*	filter: alpha(opacity=66);
	-moz-opacity: 0.66;
	opacity: 0.66;*/
	border: 1px solid #6fa24a !important;
}
div.wtgallery_list_current a img {
	border: 1px solid #6fa24a !important;
}
div.wtgallery_list a:hover img {
/*	filter: alpha(opacity=100);
	-moz-opacity: 1.00;
	opacity: 1.00;*/
        background: #cae5b7;
}

/*single*/
div.wt_gallery_single_inner_pic {
	margin: 10px;
	padding: 1px;
}
div.wt_gallery_single_inner_pic a img {
	border: 1px solid #6fa24a !important;
}

div.wtgallery_single{
width: 496px;
margin: 0 0 0 12px;
}
div.wtgallery_single img{
padding: 1px;
}

div.wt_gallery_single_inner_title {
	font-weight: bold;
	margin-top: 5px;
}
div.wt_gallery_single_inner_comments {

}
div.wtgallery_single_browser{
text-align: center;
margin: auto;
}
div.wtgallery_single_browser_previous{
display: inline;
margin: 0 0.5em;
}
div.wtgallery_single_browser_next{
display: inline;
margin: 0 0.5em;
}


Singleansicht mit Perfect Light Box

Folgender Schnipsel eignet sich um eine Listenseite mit Imagelightbox anzuschauen: 

# WT Gallery PerfectLightbox für Listenansicht
plugin.tx_wtgallery_pi1 {
  list {
    image = IMAGE
    image {
      imageLinkWrap.typolink {
        parameter.cObject = IMG_RESOURCE
        parameter.cObject.file.import.field = picture
        parameter.cObject.file.maxW = 600
        parameter.cObject.file.maxH = 600
        ATagParams = rel="lightbox[galerie]"
      }
    }

Natürlich muß die Lightbox installiert sein für das Beispiel hier wurde perfectlightbox benutzt.


Beispielkonfiguration (ak-freizeiten)

Constants

plugin.wtgallery {
  main.path = fileadmin/bilder
  template {
    single = fileadmin/templates/wtgallery/single.html
    list = fileadmin/templates/wtgallery/list.html
    category = fileadmin/templates/wtgallery/category.html
  }
  list {
    rows = 5
    columns = 4
    limit = 80
    width = 100c
    height = 100c
    metainformation = TXT
  }
  category {
    width = 126c
    height = 100c
    rows = 3
    columns = 3
    previewpicture_order = ASC
    metainformation = TXT
  }
  single{
    pid_single = 82
    width = 400
    #height = 300
    metainformation = TXT
  }
}
#plugin.perfectlightbox.captionField = titleText

/*  cooliris {
    title = BDP-Cooliris
    url = http://www.bawue.bdp.org/
    width = 400
    height = 300
    limit = 100
    window_width = 460
    window_height = 400
  }*/

Setup

plugin.tx_wtgallery_pi1 {
  single.image.imageLinkWrap.bodyTag = <body style="background:#FFF;margin:0;padding:0;">
  _LOCAL_LANG.de.wtgallery_ll_title_category = Freizeiten
  _LOCAL_LANG.de.wtgallery_ll_startcategorylink = Zurück zur Übersicht

# WT Gallery PerfectLightbox für Listenansicht
  category.text.wrap >
  category.text.if >
  list {
    image = IMAGE
    image {
      imageLinkWrap.typolink {
        title.field = title
        comments.field = comments
        parameter.cObject = IMG_RESOURCE
        parameter.cObject.file.import.field = picture
        parameter.cObject.file.maxW = 600
        parameter.cObject.file.maxH = 600
        ATagParams = rel="lightbox[galerie]"
      }
    }
  }
}
plugin.tx_wtgallery_pi1.list.text.wrap >
plugin.tx_wtgallery_pi1.list.text.if >
plugin.tx_wtgallery_pi1.single.text.wrap >
plugin.tx_wtgallery_pi1.single.text.if >

#Orig: plugin.tx_wtgallery_pi1.list.image.titleText.field = filename
plugin.tx_wtgallery_pi1.list.image.titleText.field = title
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Wt_gallery&oldid=18781“