xXx

Hexid M1n1 5h3ll MobiLe

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

File:C:/Abyss Web Server/htdocs/htdocsweat/cpg/docs/nl/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>Theme examples - Coppermine Photo Gallery - Documentation &amp; Manual</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<meta name="copyright" content="Coppermine dev team" />
<meta name="description" content="This page contains a summary of modification examples that frequently are being requested on the Coppermine support board. The wording differs as well as the extra items that users want to add. Most users are looking for information how to add adverts (like Google's adsense) in particular places." />
<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/nl/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 and Manual</h1>
<div id="toc">
<a href="toc.htm">Inhoudstafel</a>
</div>
<div id="doc_en_only">No translation available</div>


<a name="theme_examples"></a><h1>Theme examples<a href="#theme_examples" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h1>
<p>This page contains a summary of modification examples that frequently are being requested on the Coppermine support board. The wording differs as well as the extra items that users want to add. Most users are looking for information how to add adverts (like Google's adsense) in particular places.</p>
<p>We assume that you have read and understood the basics about themes in Coppermine: by now, you should know that</p>
<ul>
	<li>static content that is meant to display on all Coppermine-driven pages should reside in <a href="theme_template.htm">template.html</a></li>
	<li>style changes can be accomplished in style.css</li>
	<li>sections of theme.php that need editing can be found in the <a href="theme_theme_php.htm#theme_sample">sample theme</a></li>
</ul>
<p class="cpg_message_success">This page will only explain what sections of theme.php need editing to accomplish particular extra features. You need to read up <strong>how</strong> to copy those sections first.</p>

<a name="theme_examples_summary"></a><h2>Summary<a href="#theme_examples_summary" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2>
<ul>
	<li><a href="#theme_examples_content">Additional content</a>
		<ul>
			<li><a href="#theme_examples_content_thumbnail">Additional content on the thumbnail page</a>
				<ul>
					<li><a href="#theme_examples_content_thumbnail_extra_row">Extra row between thumbnail rows</a></li>
					<li><a href="#theme_examples_content_thumbnail_cell">Extra table cell on each thumbnail page</a></li>
				</ul>
			</li>
			<li><a href="#theme_examples_content_displayimage">Additional content on the intermediate-image pages</a>
			<ul>
				<li><a href="#theme_examples_content_displayimage_image">Directly next to the intermediate image</a></li>
				<li><a href="#theme_examples_content_displayimage_filmstrip">Directly next to the film strip</a></li>
			</ul>
			</li>
			<li><a href="#theme_examples_content_fullsize">Additional content on the full-size pop-up</a></li>
		</ul>
	</li>
</ul>

<a name="theme_examples_content"></a><h2>Additional content<a href="#theme_examples_content" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2>
<p>This section is meant to how to add additional content to particular places of Coppermine's output. Most users want to display adverts as additional content, like Google's adsense or Adbrite (as seen on Yahoo and ebay).</p>
<p>As examples, we will only add a short sentence like "your custom content" or similar. You can replace that of course with any HTML/JavaScript as you see fit. This documentation will not cover how to actually add the HTM markup for those ad-programs nor will it explain how that works. There are much better places on the web to get an impression how those advert technlogies aork and how to implement the basics.</p>

<a name="theme_examples_content_thumbnail"></a><h3>Additional content on the thumbnail page<a href="#theme_examples_content_thumbnail" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3>
<p>Modifications that will have an impact on the display of the thumbnail pages.</p> 

<a name="theme_examples_content_thumbnail_extra_row"></a><h4>Extra row between thumbnail rows<a href="#theme_examples_content_thumbnail_extra_row" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h4>
<p class="cpg_message_info">This modification will modify the separator between the table rows that compose the thumbnail screen: a row will be added where you can add textual content or a horizontal banner ad.</p>
Edit themes/yourtheme/theme.php using a plain-text editor, find <tt class="code">$template_thumbnail_view</tt> and modify as suggested below. If <tt class="code">$template_thumbnail_view</tt> doesn't exist in your custom theme, copy that section from the sample theme first.<br />
Inside the variable definition for <tt class="code">$template_thumbnail_view</tt>, find
<pre class="cpg_code">&lt;!-- BEGIN row_separator --&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
&lt;!-- END row_separator --&gt;</pre>
and replace with
<pre class="cpg_code">&lt;!-- BEGIN row_separator --&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td colspan="{$CONFIG['thumbcols']}"&gt;
                your custom content
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
&lt;!-- END row_separator --&gt;</pre>

<a name="theme_examples_content_thumbnail_cell"></a><h4>Extra table cell on each thumbnail page<a href="#theme_examples_content_thumbnail_cell" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h4>
<p>This is a more advanced mod that will require more editing. What it does though is more subtle: it doesn't add an entire row or column to the thumbnail page, but replaces one of the thumbnails on each thumbnail page with a cell with your custom content (e.g. your advert).</p>
Edit themes/yourtheme/theme.php using a plain-text editor, find <tt class="code">$template_thumbnail_view</tt> and modify as suggested below. If <tt class="code">$template_thumbnail_view</tt> doesn't exist in your custom theme, copy that section from the sample theme first.<br />
In the variable definition for <tt class="code">$template_thumbnail_view</tt>, find
<pre class="cpg_code">&lt;!-- END spacer --&gt;</pre>
and add after it (into a new line of it's own)
<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;
									Your custom content here
                                &lt;/td&gt;
                        &lt;/tr&gt;
                &lt;/table&gt;
        &lt;/td&gt;
&lt;!-- END advert --&gt;</pre>
Next, you'll need to edit the function definition for the function named <tt class="code">theme_display_thumbnails</tt>. In themes/yourtheme/theme.php, find <tt class="code">function theme_display_thumbnails</tt> and modify as suggested below. If that particular section doesn't exist in your custom theme, copy the function definition from the sample theme. To accomplish that, copy everything starting at (and including)
<pre class="cpg_code">/******************************************************************************
** Section &lt;&lt;&lt;theme_display_thumbnails&gt;&gt;&gt; - START
******************************************************************************/</pre>
untill (and including)
<pre class="cpg_code">/******************************************************************************
** Section &lt;&lt;&lt;theme_display_thumbnails&gt;&gt;&gt; - END
******************************************************************************/</pre>
into a new line before <tt class="code">?&gt;</tt> of themes/yourtheme/theme.php<br />
In that function definition, find
<pre class="cpg_code">    static $spacer = '';</pre>
and add into a new line after it
<pre class="cpg_code">    static $advert = '';</pre><br />
Next, find
<pre class="cpg_code">        $spacer = template_extract_block($template_thumbnail_view, 'spacer');</pre>
and add after it into a new line 
<pre class="cpg_code">        $advert = template_extract_block($template_thumbnail_view, 'advert');</pre><br />
After that, find
<pre class="cpg_code">    $thumbcols = $CONFIG['thumbcols'];</pre>
and add after that into a new line
<pre class="cpg_code">    $thumbrows = $CONFIG['thumbrows'];</pre><br />
Now, find
<pre class="cpg_code">    foreach($thumb_list as $thumb) {</pre>
and add <strong>before</strong> it in a line of it's own
<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 />
Scroll down and find
<pre class="cpg_code">        echo template_eval($thumb_cell, $params);</pre>
and <strong>replace</strong> that line with
<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>You have to make sure to apply this mod thoroughly. It's advisable to back up your custom theme.php first in case anything should go wrong, so that you can safely go back just in case.</p>

<hr />

<a name="theme_examples_content_displayimage"></a><h3>Additional content on the intermediate-image pages (displayimage.php)<a href="#theme_examples_content_displayimage" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3>
<p>The output of displayimage.php - the page that shows the intermediate-sized image embedded into your site's layout is the page that your visitors will pay most attention to, as you managed to attract their attention on previous pages, so they decided to click on a thumbnail that sent them to the intermediate imaghe view. On this page, you can display adverts easily and you will almost certainly get a good click-through-rate, but you need to pay attention: the site already contains a lot of information - cluttering it more with even more content can be dangerous, as the visitor might feel overwhelmed and leave.</p>

<a name="theme_examples_content_displayimage_image"></a><h4>Directly next to the intermediate image<a href="#theme_examples_content_displayimage_image" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h4>
<p>The instructions apply for all extra content that should be applied <em>above</em>, <em>below</em> or next to (at the <em>right</em> or <em>left</em>) of your actual intermediate image that is embedded into the page. Keep in mind though that the place at the right or left may already be small, depending on the screen resolution of your visitor and the size of your intermediate image, so it's advisable to add your extra content at the top or bottom rather.</p>
Edit <tt class="code">themes/yourtheme/theme.php</tt>, find the variable definition for <tt class="code">$template_display_media</tt> and edit as suggested below. If that definition doesn't exist in your custom theme, copy it first from the sample theme, then edit accordingly.<br />
The section that needs changing is the table that wraps the template token <tt class="code">{IMAGE}</tt>, so you need to edit
<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;/tr&gt;
                        &lt;/table&gt;
                &lt;/td&gt;
            &lt;/tr&gt;</pre>
Just modify the inner table as you see fit. To add some content at the bottom, you would have to change those lines to
<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;
                                                Your custom content
                                        &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>Directly next to the film strip<a href="#theme_examples_content_displayimage_filmstrip" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h4>
<p>The instructions apply for all extra content that should be applied <em>above</em> or <em>below</em> of your film strip that is displayed on the page if the corresponding option "<a href="configuration.htm#admin_image_comment_filmstrip_toggle">Show film strip</a>" is enabled in Coppermine's config.</p>
Edit <tt class="code">themes/yourtheme/theme.php</tt>, find the function definition for <tt class="code">theme_display_film_strip</tt> and edit as suggested below. If that definition doesn't exist in your custom theme, copy it first from the sample theme, then edit accordingly.<br />
The section that needs changing is at the end where the template is finally evaluated. Find
<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>
To output extra content right above the film strip, you would need to change that code snippet to
<pre class="cpg_code">    echo '&lt;div id="filmstrip"&gt;';
    echo <<< EOT
    Your custom content
EOT;
    starttable($CONFIG['picture_table_width']);
    echo template_eval($template, $params);
    endtable();
    echo '&lt;/div&gt;';</pre>

<hr />

<a name="theme_examples_content_fullsize"></a><h3>Additional content on the full-size pop-up<a href="#theme_examples_content_fullsize" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3>
<p>The pop-up that shows up if you click on the intermediate image can contain additional content (e.g. adverts) as well. However, you need to make up your mind if there will be enough space on the screen of your site visitors to ad even more content. In other words: only display additional content on the full-size pop-up if your full-size images have a resolution that is smaller than your visitor's minimum monitor resolution. Since you can't tell for sure what size they will have, you can still consider 800 x 600 pixels to be the minimum. Remember as well that with smartphones and other mobile devices that have internet acccess recently you can't even be sure that there will be resolutions that are even smaller.</p>
<p>If you must have an advert on the fullsize pop-up, make sure to use a text advert only and not a banner. This being said as a warning, here's how to add custom content to the full-size pop-up:</p>
Edit <tt class="code">themes/yourtheme/theme.php</tt>, find
<pre class="cpg_code">// Display the full size image
function theme_display_fullsize_pic()</pre>
and edit that function definition as suggested below. If this piece of code doesn't exist in your custom theme, copy the function definition from the sample theme, starting at
<pre class="cpg_code">/******************************************************************************
** Section &lt;&lt;&lt;theme_display_fullsize_pic&gt;&gt;&gt; - START
******************************************************************************/</pre>and ending with
<pre class="cpg_code">/******************************************************************************
** Section &lt;&lt;&lt;theme_display_fullsize_pic&gt;&gt;&gt; - END
******************************************************************************/</pre>
To add the Adsense code or any other custom content, add it as you see fit in the HTML section of above mentioned code, e.g. right after the closing tag of the div container.<br />
In this particular case, you'll have to circumvent another issue: the window size of the full-size pic is being calculated based on the dimensions of the pic. Therefore, if you add content to the window, you'll have to make sure that the dimensions of the window increase by the space the advert "eats up". The dimensions of the window are being calculated in the function <tt class="code">function theme_html_picture()</tt>. The same method used above applies: search your custom theme (themes/yourtheme/theme.php) for that function definition. If it exists there, edit it as suggested below. If it doesn't, copy the function defintion from themes/sample/theme.php into a new line before <tt class="code">?&gt;</tt> of themes/yourtheme/theme.php.<br />
The piece of code that actually needs editing is
<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>
Edit it as you see fit - you will have to increase the variable's value by the amount of space (in pixels) that your ads need. As an example: if you decide to add your adsense code at the top of the full-size pop-up and it eats up 200 pixels, change
<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>
to
<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 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