david
5aa1be28d5
git-svn-id: https://192.168.0.254/svn/Proyectos.ConstruccionesCNJ_Web/trunk@5 a1d75475-e439-6a4c-b115-a3aab481e8ec
83 lines
3.5 KiB
HTML
83 lines
3.5 KiB
HTML
<!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">
|
|
<head><meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
|
|
<title>README: Gallery 2 Image Frames</title>
|
|
<style type="text/css">
|
|
<!--
|
|
html { font-family: "Lucida Grande", Verdana, Arial, sans-serif; font-size: 62.5%; }
|
|
body { font-size: 1.2em; margin: 10px 28px; }
|
|
p { line-height: 1.2em; }
|
|
h2 { font-family: "Gill Sans", Verdana, Arial, sans-serif; font-size: 1.5em;
|
|
color: #333; border-bottom: 1px solid #ddd; margin: 0; padding: 0.5em 0 0.15em 0; }
|
|
ul, ol { margin-top: 0.7em; }
|
|
ol li { padding: 2px 0; line-height: 1.4em; }
|
|
hr { clear: both }
|
|
img { border: none; }
|
|
.fineprint { font-size: .8em; color: #ccc; }
|
|
.grid { float: left; margin: 0 28px 6px 0; border-spacing: 3px;
|
|
text-align: center; font-size: 90% }
|
|
.grid td { background-color: lightblue; padding: 2px; }
|
|
.grid td.image { font-size: 150%; width: 150px; height: 120px; }
|
|
.grid td.W { width: 25px; }
|
|
.grid td.H { height: 15px; }
|
|
.grid td.T { width: 100px; }
|
|
.grid td.L { height: 90px; }
|
|
//-->
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2> Gallery 2 Image Frames </h2>
|
|
|
|
<table class="grid">
|
|
<tr><td>TL</td><td class="W">TTL</td><td class="T">TT</td><td class="W">TTR</td><td>TR</td></tr>
|
|
<tr><td class="H">LLT</td><td rowspan="3" colspan="3" class="image">IMAGE</td>
|
|
<td class="H">RRT</td></tr>
|
|
<tr><td class="L">LL</td><td class="L">RR</td></tr>
|
|
<tr><td class="H">LLB</td><td class="H">RRB</td></tr>
|
|
<tr><td>BL</td><td class="W">BBL</td><td class="T">BB</td><td class="W">BBR</td><td>BR</td></tr>
|
|
</table>
|
|
|
|
<p>
|
|
To build your own image frame:
|
|
</p>
|
|
<ol>
|
|
<li> Examine the diagram at left and the <i>frame.inc</i> files for existing image
|
|
frames to understand how the frames are constructed. It is not required to use
|
|
all cells in the diagram. The TT/BB/LL/RR cells repeat their image to fill
|
|
available space; all other cells show the image just once. </li>
|
|
<li> Create a new directory here (under modules/imageframe/frames) for your image frame. </li>
|
|
<li> Place your images in that directory. </li>
|
|
<li> Copy an existing <i>frame.inc</i> file into that directory and modify it to
|
|
work with your images and sizes. The name of the image frame is also defined
|
|
in this file. </li>
|
|
<li> The new image frame should now appear in the list of choices for any theme that
|
|
uses image frames. </li>
|
|
</ol>
|
|
|
|
<p>
|
|
Note: you can force a frame to be square: the image/thumb retains it's aspect
|
|
ratio centered in a square frame ('square' => true in frame.inc). The holes
|
|
around non square thumbs left/right or top/bottom are filled with the background image
|
|
given in 'imageCC'. That image is aligned center and fills all available space.
|
|
See <i>slidesquare/frame.inc</i> and <i>notebooksquare/frame.inc</i> for examples.
|
|
</p>
|
|
|
|
<p>
|
|
Note: you can also create a simple image frame using only CSS on the image;
|
|
see <i>dots/frame.inc</i> for an example.
|
|
</p>
|
|
|
|
<hr />
|
|
|
|
<a href="http://validator.w3.org/check?uri=referer">
|
|
<img style="border:none" src="../../../images/xhtml10.png" height="15" width="80"
|
|
alt="This page is valid XHTML 1.0"/>
|
|
</a>
|
|
|
|
<p class="fineprint">
|
|
$Id: README.html 15342 2006-12-01 21:14:46Z andy_st $
|
|
</p>
|
|
</body>
|
|
</html>
|