4images Forum & Community
4images Issues / Ausgaben => Installation, Update & Configuration => Topic started by: thunderstrike on October 03, 2007, 12:59:16 AM
-
This is for use top, left, right (if have for right) and below layout for HTML template tags. So, no more need for re-copy in all HTML files from {header} to {footer} for same HTML table code. Is now in one single file with load all same design with 4 tags command in HTML template. ;)
// Step 1
In includes/template.php file,
find:
if ($name == 'header' || $name == 'footer') {
replace:
if ($name == 'header' || $name == 'ste_layout_top' || $name == 'ste_layout_left' || $name == 'ste_layout_right' || $name == 'ste_layout_below' || $name == 'footer') {
Find:
if (strpos($template, $this->start.'header'.$this->end) !== false) {
$header = $this->parse_template("header");
$template = str_replace($this->start.'header'.$this->end, $header, $template);
}
if (strpos($template, $this->start.'footer'.$this->end) !== false) {
$footer = $this->parse_template("footer");
$template = str_replace($this->start.'footer'.$this->end, $footer, $template);
}
replace:
if (strpos($template, $this->start.'header'.$this->end) !== false) {
$header = $this->parse_template("layout/header");
$template = str_replace($this->start.'header'.$this->end, $header, $template);
}
if (strpos($template, $this->start.'ste_layout_top'.$this->end) !== false) {
$header = $this->parse_template("layout/ste_layout_top");
$template = str_replace($this->start.'ste_layout_top'.$this->end, $header, $template);
}
if (strpos($template, $this->start.'ste_layout_left'.$this->end) !== false) {
$header = $this->parse_template("layout/ste_layout_left");
$template = str_replace($this->start.'ste_layout_left'.$this->end, $header, $template);
}
if (strpos($template, $this->start.'ste_layout_right'.$this->end) !== false) {
$header = $this->parse_template("layout/ste_layout_right");
$template = str_replace($this->start.'ste_layout_right'.$this->end, $header, $template);
}
if (strpos($template, $this->start.'ste_layout_below'.$this->end) !== false) {
$footer = $this->parse_template("layout/ste_layout_below");
$template = str_replace($this->start.'ste_layout_below'.$this->end, $footer, $template);
}
if (strpos($template, $this->start.'footer'.$this->end) !== false) {
$footer = $this->parse_template("layout/footer");
$template = str_replace($this->start.'footer'.$this->end, $footer, $template);
}
// Step 2
Ok now is very important. Before test in live gallery. Install fresh 4images copy (with fresh DB name for safety). My instruction is from default template of 4images. After, you can test on live custom template.
In templates/default folder, create folder: layout. Inside, create: ste_layout_top.html - ste_layout_top.html - ste_layout_right.html - ste_layout_below.html file.
// Step 3
Ok so one example I do. You get the rest - is very easy. ;)
In templates/default/home.html file,
find:
<table width="640" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="640" border="0" cellspacing="0" cellpadding="0" class="tablehead">
<tr>
<td colspan="4"><img src="{template_url}/images/header_top.gif" width="640" height="6" alt="" /></td>
</tr>
<tr>
<td width="6"><img src="{template_url}/images/header_left.gif" width="6" height="60" alt="" /></td>
<td width="405"><img src="{template_url}/images/header_logo.gif" width="405" height="60" alt="" /></td>
<td width="225" align="right">
<form method="post" action="{url_search}">
<table border="0" cellspacing="0" cellpadding="1">
<tr>
<td>
<input type="text" name="search_keywords" size="15" class="searchinput" />
</td>
<td>
<input type="submit" value="{lang_search}" class="button" name="submit" />
</td>
</tr>
<tr valign="top">
<td colspan="2"><a href="{url_search}" class="smalltext">{lang_advanced_search}</a></td>
</tr>
</table>
</form>
</td>
<td align="right" width="6"><img src="{template_url}/images/header_right.gif" width="6" height="60" alt="" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="bordercolor">
<table width="640" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="tablebgcolor">
<table width="638" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="navbar" height="23">
<table width="636" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="{template_url}/images/spacer.gif" width="4" height="4" alt="" />{clickstream}</td>
<td align="right">
<a href="{url_top_images}"><b>{lang_top_images}</b></a>
<a href="{url_new_images}"><b>{lang_new_images}</b></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Cut paragraph (keep in new notepad for copy) and in HTML replace:
{ste_layout_top}
(for top side)
(Note: ste = Site in word).
Find:
<table width="638" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" class="row2" valign="top">
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="head2" height="20"><img src="{template_url}/images/spacer.gif" alt="" width="4" height="4" />{lang_registered_user}</td>
</tr>
<tr>
<td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>
<tr>
<td align="center" class="row1">{user_box}</td>
</tr>
<tr>
<td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>
</table>
{if random_image}
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="head2" height="20"> <img src="{template_url}/images/spacer.gif" alt="" width="4" height="4" />{lang_random_image}</td>
</tr>
<tr>
<td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>
<tr>
<td align="center" class="row1">
<br />
{random_image}
<br />
<br />
</td>
</tr>
<tr>
<td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>
</table>
{endif random_image}
</td>
<td width="1" class="bordercolor" valign="top"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
<td width="18" valign="top"><img src="{template_url}/images/spacer.gif" alt="" width="18" height="18" /></td>
Same thing for notepad and in HTML replace:
{ste_layout_left}
(for left side)
Ok, for the right side, is option so if have right side (I no have) so cut paragraph and paste in new notepad and on HTML file - replace:
{ste_layout_right}
(for right side)
Ok - last one - find:
<p> </p>
</td>
<td width="19" valign="top"><img src="{template_url}/images/spacer.gif" alt="" width="19" height="19" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="640" border="0" cellspacing="0" cellpadding="0" class="tablebottom">
<tr>
<td width="6"><img src="{template_url}/images/footer_left.gif" width="6" height="19" alt="" /></td>
<td width="405"> </td>
<td width="225"> </td>
<td width="6"><img src="{template_url}/images/footer_right.gif" width="6" height="19" alt="" /></td>
</tr>
</table>
</td>
</tr>
</table>
Same thing for new notepad and replace in HTML:
{ste_layout_below}
(for below side)
// Step 4
Ok, good step.
In templates/default/layout/ste_layout_top.html file,
paste:
<table width="640" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="640" border="0" cellspacing="0" cellpadding="0" class="tablehead">
<tr>
<td colspan="4"><img src="{template_url}/images/header_top.gif" width="640" height="6" alt="" /></td>
</tr>
<tr>
<td width="6"><img src="{template_url}/images/header_left.gif" width="6" height="60" alt="" /></td>
<td width="405"><img src="{template_url}/images/header_logo.gif" width="405" height="60" alt="" /></td>
<td width="225" align="right">
<form method="post" action="{url_search}">
<table border="0" cellspacing="0" cellpadding="1">
<tr>
<td>
<input type="text" name="search_keywords" size="15" class="searchinput" />
</td>
<td>
<input type="submit" value="{lang_search}" class="button" name="submit" />
</td>
</tr>
<tr valign="top">
<td colspan="2"><a href="{url_search}" class="smalltext">{lang_advanced_search}</a></td>
</tr>
</table>
</form>
</td>
<td align="right" width="6"><img src="{template_url}/images/header_right.gif" width="6" height="60" alt="" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="bordercolor">
<table width="640" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="tablebgcolor">
<table width="638" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="navbar" height="23">
<table width="636" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="{template_url}/images/spacer.gif" width="4" height="4" alt="" />{clickstream}</td>
<td align="right">
<a href="{url_top_images}"><b>{lang_top_images}</b></a>
<a href="{url_new_images}"><b>{lang_new_images}</b></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
In templates/default/layout/ste_layout_left.html file,
paste:
<table width="638" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" class="row2" valign="top">
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="head2" height="20"><img src="{template_url}/images/spacer.gif" alt="" width="4" height="4" />{lang_registered_user}</td>
</tr>
<tr>
<td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>
<tr>
<td align="center" class="row1">{user_box}</td>
</tr>
<tr>
<td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>
</table>
{if random_image}
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="head2" height="20"> <img src="{template_url}/images/spacer.gif" alt="" width="4" height="4" />{lang_random_image}</td>
</tr>
<tr>
<td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>
<tr>
<td align="center" class="row1">
<br />
{random_image}
<br />
<br />
</td>
</tr>
<tr>
<td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>
</table>
{endif random_image}
</td>
<td width="1" class="bordercolor" valign="top"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
<td width="18" valign="top"><img src="{template_url}/images/spacer.gif" alt="" width="18" height="18" /></td>
In templates/default/layout/ste_layout_right.html file (if have), paste your right content in that file.
In templates/default/layout/ste_layout_below.html file,
paste:
<p> </p>
</td>
<td width="19" valign="top"><img src="{template_url}/images/spacer.gif" alt="" width="19" height="19" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="640" border="0" cellspacing="0" cellpadding="0" class="tablebottom">
<tr>
<td width="6"><img src="{template_url}/images/footer_left.gif" width="6" height="19" alt="" /></td>
<td width="405"> </td>
<td width="225"> </td>
<td width="6"><img src="{template_url}/images/footer_right.gif" width="6" height="19" alt="" /></td>
</tr>
</table>
</td>
</tr>
</table>
// Stats - filesize home.html file.
Ok so if I filesize home.html file,
original: 7.364 bytes
my copy is now: 3.056 bytes for same thing (and faster load foreach HTML template files). ;).
All done :!: 8)
Do same for all HTML files - have {header} to {footer}. Is all same. ;)
// Move header.html and footer.html file to layout folder too.
@Kai:
For next version of 4images ?
-
So, is this for any mod you want to add to 4images, or just headers, footers and sides?
-
or just headers, footers and sides?
This is first but after for MODs for all HTML designer and editor. Is faster and is work for MOD if need. ;)
-
i just wanted to test this tweak..
but, things under "Quote" can't be found.. please use instead of [ quote ] and [ /quote ]
codes > [ code ] and [ /code ] without space.
-
okay.. tested...
searched manual ;)
working fine with home.html
file size 2071 bytes... maybe i deleted to much :twisted:
-
Thank for posting and dream for 4images v1.75 integrate.
-
Hi,
this TWEAK works wonderfull. Its now Easy to change in the whole Site the layout........
Thanks for it......
Gruß
Ingo
-
this is exactly what I looked for!!
thanx a lot!! :D
-
Vielen Dank für diese Erweiterung. :thumbup:
Damit steht einer späteren einfachen Erweiterung meines verwendeten Templates "Iceberg" um eine rechte und untere Spalte nichts mehr im Wege.
Freundliche Grüße, Bommel