xXx

Hexid M1n1 5h3ll MobiLe

C:/Abyss Web Server/htdocs/htdocsweat/cpg/docs/fr/_[ Writable ]

File:C:/Abyss Web Server/htdocs/htdocsweat/cpg/docs/fr/theme_examples.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Exemples de Thèmes - Coppermine Photo Gallery - Documentation &amp; Manuel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="fr" />
<meta name="copyright" content="Coppermine dev team" />
<meta name="description" content="Cette page contient une liste des exemples de modifications fréquemment demandées sur le forum d'aide de Coppermine. Les mots ainsi que les éléments suplémentaires peuvent différer de ceux que l'utilisateur veut ajouter. La plupart des utilisateurs cherchent les informations sur comment ajouter de la publicité (comme Google adsense) à un endroit particulier." />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="no" />
<!--
  SVN version info:

  Coppermine version: 1.5.8
  $HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.5.x/docs/fr/theme_examples.htm $
  $Revision: 7805 $

  $Date: 2010-08-06 11:59:36 +0200 (Fr, 06 Aug 2010) $
-->
<link rel="stylesheet" type="text/css" href="../style/style.css" media="all" />
<link rel="stylesheet" type="text/css" href="../style/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../style/print.css" media="print" />
<link rel="shortcut icon" href="../favicon.ico" />
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.treeview.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<h1 id="docheader">Coppermine Photo Gallery v1.5.x: Documentation et Manuel</h1>
<div id="toc">
<a href="toc.htm">Table des Matières</a>
</div>


<a name="theme_examples"></a><h1>Exemples de thèmes<a href="#theme_examples" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h1>
<p>Cette page contient une liste des exemples de modifications fréquemment demandées sur le forum d'aide de Coppermine. Les mots ainsi que les éléments suplémentaires peuvent différer de ceux que l'utilisateur veut ajouter. La plupart des utilisateurs cherchent les informations sur comment ajouter de la publicité (comme Google adsense) à un endroit particulier.</p>
<p>Nous pensons que vous avez lu et compris ce qui concerne les bases des thèmes dans Coppermine: donc, vous devez savoir ceci</p>
<ul>
	<li>Le contenu static qui est censé être affiché sur toutes le pages Coppermine doit se trouver dans <a href="theme_template.htm">template.html</a></li>
	<li>Les changements de style peuventêtre réalisés dans style.css</li>
	<li>Les sections de theme.php qui ont besoin d'une modifications peuvent être trouvés dans <a href="theme_theme_php.htm#theme_sample">le thème sample</a></li>
</ul>
<p class="cpg_message_success">Cette page ne va expliquer uniquement quelle section de theme.php doivent être modifiés pour accomplir des fonctions particulières. Vous devrez d'abbord apprendre <strong>comment</strong> copier ces sections.</p>

<a name="theme_examples_summary"></a><h2>Sommaire<a href="#theme_examples_summary" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2>
<ul>
	<li><a href="#theme_examples_content">Contenu additionnel</a>
		<ul>
			<li><a href="#theme_examples_content_thumbnail">Contenu additionnel dans la page des vignettes</a>
				<ul>
					<li><a href="#theme_examples_content_thumbnail_extra_row">Nouvelle ligne entr eles lignes de vignettes</a></li>
					<li><a href="#theme_examples_content_thumbnail_cell">Nouvelle cellule de table sur chaque page de vignettes</a></li>
				</ul>
			</li>
			<li><a href="#theme_examples_content_displayimage">Contenu additionnel sur la page des images intermédiaires</a>
			<ul>
				<li><a href="#theme_examples_content_displayimage_image">Directement après les images intermédiaires</a></li>
				<li><a href="#theme_examples_content_displayimage_filmstrip">Directement à côté du négatif de film</a></li>
			</ul>
			</li>
			<li><a href="#theme_examples_content_fullsize">Contenu additionel sur la fenêtre pop-up des images originales</a></li>
		</ul>
	</li>
</ul>

<a name="theme_examples_content"></a><h2>Contenu additionnel<a href="#theme_examples_content" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2>
<p>Cette section explique comment ajouter du contenu additionnel à différentes places dans les affichages de Coppermines. La plupart des utilisateurs veulent afficher des publicités comme contenu additionnel, comme Google adsense ou Adbrite (comme c'est visible sur Yahoo ou Ebay).</p>
<p>Comme exemple, nous allons ajouter une petite phrase comme "votre contenu personnalisé" ou similaire. Vous pouvez bien entendu le remplacer par tout code HTML/JavaScript que vous souhaitez. Ce document ne va pas expliquer comment ajouter le code spécifique HTML pour ces programmes de publicité, ni expliquer comment ils fonctionnent. Il y a de meilleures places sur le web pour trouver ces informations.</p>

<div class="indent">

<a name="theme_examples_content_thumbnail"></a><h3>Contenu additionnel sur la page des vignettes<a href="#theme_examples_content_thumbnail" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3>
<p>Modifications qui auront un impact sur l'affichage de la page des vignettes.</p> 

<div class="indent">
	<a name="theme_examples_content_thumbnail_extra_row"></a><h4>Nouvelle ligne entre les lignes de vignettes<a href="#theme_examples_content_thumbnail_extra_row" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h4>
	<p class="cpg_message_info">Cette modification va modifier le séparateur entre les lignes de la table qui compose la page des vignettes: une ligne va être ajoutée, dans laquelle vous pourrez ajouter du contenu textuel ou une banière de puplicité.</p>
Ouvrez themes/votretheme/theme.php en utilisant un éditeur de texte, trouvez <tt class="code">$template_thumbnail_view</tt> et modifiez comme indiqué ci-dessous. Si <tt class="code">$template_thumbnail_view</tt> n'existe pas dans votre thème personnalisé, copiez cette setcion depuis le thème sample d'abbord.<br />
Dans la définition de variable pour <tt class="code">$template_thumbnail_view</tt>, trouvez
<pre class="cpg_code">&lt;!-- BEGIN row_separator --&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
&lt;!-- END row_separator --&gt;</pre>
et remplacez par
<pre class="cpg_code">&lt;!-- BEGIN row_separator --&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td colspan="{$CONFIG['thumbcols']}"&gt;
                votre contenu personnalisé
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
&lt;!-- END row_separator --&gt;</pre>

<a name="theme_examples_content_thumbnail_cell"></a><h4>Nouvelle cellule de table sur chaque page de vignettes<a href="#theme_examples_content_thumbnail_cell" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h4>
<p>C'est un Mod plus avancé qui requière plus de modifications. Ce qu'il fait est plus subtil: il n'ajoute pas une ligne ou une colonne entière à la page des vignettes, mais remplace un des vignettes sur chaque page de vignettes par un ecellule avec votre contenu personnalisé (votre publicité).</p>
Ouvrez themes/yourtheme/theme.php avec un éditeur de texte et trouvez <tt class="code">$template_thumbnail_view</tt> puis modifiez comme expliqué ci-dessous. Si <tt class="code">$template_thumbnail_view</tt> n'existe pas dans votre thème, il vous faudra copier la section d'abbord depuis le thème sample.<br />
Dans la définition de variable pour <tt class="code">$template_thumbnail_view</tt>, trouvez
<preclass="cpg_code">&lt;!-- END spacer --&gt;</pre>
et ajoutez juste après (dans une nouvelle ligne)
<pre class="cpg_code">&lt;!-- BEGIN advert --&gt;
        &lt;td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center"&gt;
                &lt;table width="100%" cellpadding="0" cellspacing="0"&gt;
                        &lt;tr&gt;
                                &lt;td align="center"&gt;
									votre contenu personnalisé
                                &lt;/td&gt;
                        &lt;/tr&gt;
                &lt;/table&gt;
        &lt;/td&gt;
&lt;!-- END advert --&gt;</pre>
Ensuite vous devrez modifier la définition de la fonction pour la fonction nommée <tt class="code">theme_display_thumbnails</tt>. In themes/yourtheme/theme.php, find <tt class="code">function theme_display_thumbnails</tt> comme indiqué ci-dessous. Si cette section particulière n'existe pas dans votre thème, copiez la définition de fonction depuis le thème sample. Pour ce faire, copiez tout ce qui se trouve à partir de (et incluant)
<pre class="cpg_code">/******************************************************************************
** Section &lt;&lt;&lt;theme_display_thumbnails&gt;&gt;&gt; - START
******************************************************************************/</pre>
j'usqu'à (inclu)
<pre class="cpg_code">/******************************************************************************
** Section &lt;&lt;&lt;theme_display_thumbnails&gt;&gt;&gt; - END
******************************************************************************/</pre>
dans une nouvelle ligne avant <tt class="code">?&gt;</tt> de themes/votretheme/theme.php<br />
Dans cette définition de focntion, trouvez
<pre class="cpg_code">    static $spacer = '';</pre>
et ajoutez dans une nouvelle ligne après
<pre class="cpg_code">    static $advert = '';</pre><br />
Puis trouvez
<pre class="cpg_code">        $spacer = template_extract_block($template_thumbnail_view, 'spacer');</pre>
et ajoutez dans une nouvelle ligne juste après
<pre class="cpg_code">        $advert = template_extract_block($template_thumbnail_view, 'advert');</pre><br />
Ensuite trouvez
<pre class="cpg_code">    $thumbcols = $CONFIG['thumbcols'];</pre>
et ajoutez dans une nouvelle ligne juste après
<pre class="cpg_code">    $thumbrows = $CONFIG['thumbrows'];</pre><br />
Maintenant trouvez
<pre class="cpg_code">    foreach($thumb_list as $thumb) {</pre>
et ajoutez <strong>avant</strong> dans une nouvelle ligne
<pre class="cpg_code">    // Start modification "random table cell ad"
    $number_of_thumbs = count($thumb_list);
    $advert_position = rand(0,$number_of_thumbs-1);</pre><br />
Descendez et trouvez
<pre class="cpg_code">        echo template_eval($thumb_cell, $params);</pre>
et <strong>remplacez</strong> cette ligne par
<pre class="cpg_code">        // Add the advert cell 
        if (defined('DISPLAY_ADS_FOR_META_ALBUMS') || is_numeric($aid) == TRUE) {
        	$display_advert = 1;
        } else {
        	$display_advert = 0;
        }
        if ($i == $advert_position && $mode == 'thumb' && $display_advert == 1) {
	        if ($number_of_thumbs < $thumbcols * $thumbrows) { // We have room to display
	                                                           // the extra advert cell
	        	//print_r($thumb_list);
	        	$thumb_list[($number_of_thumbs+1)] = $thumb;
	        	echo template_eval($advert, $params);
		    } else { // We do not have room for the extra advert cell, 
		             // so we'll have to replace one (i.e. drop the 
		             // content of the thumb that should usually reside 
		             // here without the ad)
		    	echo template_eval($advert, $params);
		    }
        } else {
        	echo template_eval($thumb_cell, $params);
        }</pre><br />
<!-- Taken from http://forum.coppermine-gallery.net/index.php/topic,58008.0.html -->
<p>Vous devez vous assurer de faire ces modifications très attentivement. Il est préférable de sauvegarder votre fichier personnalisé theme.php avant au cas ou quelque chose irait mal, de manière à pouvoir revenir en arrière au cas ou.</p>
</div>
<hr />

<a name="theme_examples_content_displayimage"></a><h3>Contenu additionnel sur le page des images intermédiaires (displayimage.php)<a href="#theme_examples_content_displayimage" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3>
<p>L'affichage de la page displayimage.php - La page qui montre les images intermédiaires, inclue dans l'aspect général de votre site, est la page qui retiendra le plus l'attention des visiteurs, puisque vous les avez incité à cliquer sur les vignettes sur les pages précédentes pour arriver à la vue des images intermédiaires. Sur cette page, vous pouvez afficher facilement de la publicité et vous aurez certainement un bon "retour sur clic", mais soyez attentif: le site contient déjà pas mal d'informations - l'encombrer avec de plus en plus de contenu peut devenir dangereux, le visiteur peut se sentir submergé et partir.</p>

<div class="indent">

<a name="theme_examples_content_displayimage_image"></a><h4>Directement sous l'image intermédiaire<a href="#theme_examples_content_displayimage_image" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h4>
<p>Ces indtructions s'appliquent pour tout contenu additionnel qui devrait être placé <em>au dessus</em>, <em>en dessous</em> ou juste à côté (à <em>droite</em> ou à <em>gauche</em>) de l'image intermédiaire inclue dans votre page. gardez à l'esprit que la place à droite et à gauche risque d'être très petite, en fonction de la résolution d'écran de vos visiteurs et de la taille de vos images intermédiaires, il est donc préférable d'ajouter votre cntenu additionnel plutôt au dessus ou en dessous.</p>
Ouvrez <tt class="code">themes/votretheme/theme.php</tt>, trouvez la définition de variable pour <tt class="code">$template_display_media</tt> et modifiez la comme expliqué ci-dessous. Si cette définition n'existe pas dans votre theme, cpiez la d'abbord depuis le thème sample, puis modifiez là..<br />
La section qui doit être changée est la table qui habille le conteneur <tt class="code">{IMAGE}</tt>, donc vous devrez modifier
<preclass="cpg_code">           &lt;tr&gt;
                &lt;td align="center" class="display_media" nowrap="nowrap"&gt;
                        &lt;table cellspacing="2" cellpadding="0" &gt;
                                &lt;tr&gt;
                                        &lt;td align="center" style="{SLIDESHOW_STYLE}"&gt;
                                                {IMAGE}
                                        &lt;/td&gt;
                                &lt;/tr&gt;
                        &lt;/table&gt;
                &lt;/td&gt;
            &lt;/tr&gt;</pre>
Modifiez uniquement le contenu de la table pour que celà corresponde à vos souhaits. Pour ajouter du contenu en dessous, vous aurez à changer ces lignes en
<pre class="cpg_code">           &lt;tr&gt;
                &lt;td align="center" class="display_media" nowrap="nowrap"&gt;
                        &lt;table cellspacing="2" cellpadding="0" &gt;
                                &lt;tr&gt;
                                        &lt;td align="center" style="{SLIDESHOW_STYLE}"&gt;
                                                {IMAGE}
                                        &lt;/td&gt;
                                        &lt;td align="center" style="{SLIDESHOW_STYLE}"&gt;
                                                Votre contenu personnalisé
                                        &lt;/td&gt;
                                &lt;/tr&gt;
                        &lt;/table&gt;
                &lt;/td&gt;
            &lt;/tr&gt;</pre>

<hr />

<a name="theme_examples_content_displayimage_filmstrip"></a><h4>Directement avant/après le négatif de film<a href="#theme_examples_content_displayimage_filmstrip" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h4>
<p>Ces instructions s'appliquent à tout contenu additionnel qui devra se placer <em>avant</em> ou <em>après</em> le négatif de film sur la page si l'option correspondante "<a href="configuration.htm#admin_image_comment_filmstrip_toggle">Monter le négatif de film</a>" est activé dans la configuration de Coppermine.</p>
Ouvrez <tt class="code">themes/votretheme/theme.php</tt>, trouvez la définition de fonction pour <tt class="code">theme_display_film_strip</tt> et modifiez la comme indiqué ci-dessous. Si cette section n'existe pas dans votre thème, vous devrez la copier d'abbord depuis le thème sample avant de la modifier.<br />
La section qui doit être changée est à la fin là ou le gabarit est finalement généré. trouvez
<pre class="cpg_code">    echo '&lt;div id="filmstrip"&gt;';
    starttable($CONFIG['picture_table_width']);
    echo template_eval($template, $params);
    endtable();
    echo '&lt;/div&gt;';</pre>
Pour ajouter votre contenu additionnel juste avant le négatif de film, vous devrez changer cette portion de code comme ceci
<pre class="cpg_code">    echo '&lt;div id="filmstrip"&gt;';
    echo <<< EOT
    Votre contenu personnalisé
EOT;
    starttable($CONFIG['picture_table_width']);
    echo template_eval($template, $params);
    endtable();
    echo '&lt;/div&gt;';</pre>

</div>

<hr />

<a name="theme_examples_content_fullsize"></a><h3>Contenu additionnel dans la fenêtre pop-up des images originales<a href="#theme_examples_content_fullsize" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3>
<p>La fenêtr epop-up qui s'affiche lorsque vou scliquez sur l'image intermédiaire peut aussi contenir du contenu additionnel (comme de la publicité). Toutefois, vous devrez vérifier si il reste assez de place sur l'écran pour ajouter plus de contenu. En d'autres termes: n'affichez du contenu addtionnel dans la fenêtre pop-up que si vos images originales ont une dimension inférieure à la résolution minimale de l'écran de vos visiteurs. Si vous ne pouvez affirmer de manière sure quelle est cette taille, vous pouvez considérer  800 x 600 pixels comme un minimum. Rappelez vous aussi qu'avec les téléphones portables ou autres appareils mobiles ayant accès à internet, vous ne serez jamais sur qu'il n'y a pas de résolution plus petite.</p>
<p>Si vous devez palcer une publicité dans la fenêtre pop-up des images originales, utilisez de la publicité textuelle plutôt qu'une banière. Cet avertissement dit, voci comment ajouter du contenu additionnel à la fenêtre pop-up des images originales:</p>
Ouvrez <tt class="code">themes/yourtheme/theme.php</tt>, trouvez
<pre class="cpg_code">// Display the full size image
function theme_display_fullsize_pic()</pre>
et modifiez cette définition de fonction comme indiqué ci-dessous.Si cet élément de code n'existe pas dans votre thème, copiez la définition de fonction depuis le thème sample, à partir de
<pre class="cpg_code">/******************************************************************************
** Section &lt;&lt;&lt;theme_display_fullsize_pic&gt;&gt;&gt; - START
******************************************************************************/</pre>et jusqu'à
<pre class="cpg_code">/******************************************************************************
** Section &lt;&lt;&lt;theme_display_fullsize_pic&gt;&gt;&gt; - END
******************************************************************************/</pre>
Pour ajouter le code Adsense ou tout autre contenu personnalisé, ajoutez le là ou vous le souhaitez dans la section HTML du codementionné ci-dessus (exemple, juste après la balise de fermeture du conteneur div.<br />
Dans ce cas particulier, vous devrez contourner un autre problème: la taille de la fenêtre est calculée en fonction de la taille de l'image. C'est pourquoi, si vous ajoutez du contenu à la fenêtre, vous aurez à vous assurer que les dimensions de la fenêtre sera augmentée de la taille utilisée par le contenu ajouté. Les dimensions de la fenêtre sont calculées dans la fonction <tt class="code">function theme_html_picture()</tt>. La même méthode s'applique: cherchez la définition de la fonction dans votre thème (themes/votretheme/theme.php). si elle existe, modifié la comme indiqué ci-dessous, sinon, vous devrez la copier/coller depuis le thème sample dans une nouvelle ligne avant <tt class="code">?&gt;</tt> de themes/votretheme/theme.php.<br />
Le code que vous devez modifier est
<pre class="cpg_code">            $winsizeX = $CURRENT_PIC_DATA['pwidth'] + $CONFIG['fullsize_padding_x'];  //the +'s are the mysterious FF and IE paddings
            $winsizeY = $CURRENT_PIC_DATA['pheight'] + $CONFIG['fullsize_padding_y']; //the +'s are the mysterious FF and IE paddings</pre>
Modifiez comme vous le souhaitez -  vous devrez augmenter la valeur des variables de la valeur de l'espace en pixel nécessaire à votre ajout. Par exemple: si vou sdécidez d'ajouter votre code Adsense en haut de la denêtre pop-up et que la publivité utilise 200 pixels, changez
<pre class="cpg_code">            $winsizeX = $CURRENT_PIC_DATA['pwidth'] + $CONFIG['fullsize_padding_x'];  //the +'s are the mysterious FF and IE paddings
            $winsizeY = $CURRENT_PIC_DATA['pheight'] + $CONFIG['fullsize_padding_y']; //the +'s are the mysterious FF and IE paddings</pre>
en
<pre class="cpg_code">            $winsizeX = $CURRENT_PIC_DATA['pwidth'] + $CONFIG['fullsize_padding_x'];  //the +'s are the mysterious FF and IE paddings
            $winsizeY = $CURRENT_PIC_DATA['pheight'] + $CONFIG['fullsize_padding_y'] + 200; //the +'s are the mysterious FF and IE paddings</pre>
</div>

<div id="doc_footer">
	<div class="doc_info_wrapper">
		<span id="doc_last_changed">$LastChangedDate: 2010-08-06 11:59:36 +0200 (Fr, 06 Aug 2010) $</span>
		<span id="doc_revision">$Revision: 7805 $</span>
	</div>
</div>
</body>

</html>

Your Access Expired	Date. in : 04-11-2025
Regist : 09-12-2024	Expired : 01-12-2027