<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>{html_image}</title> <meta name="generator" content="DocBook XSL Stylesheets V1.75.1"> <link rel="home" href="index.html" title="Smarty Manual"> <link rel="up" href="language.custom.functions.html" title="Chapter 8. Custom Functions"> <link rel="prev" href="language.function.html.checkboxes.html" title="{html_checkboxes}"> <link rel="next" href="language.function.html.options.html" title="{html_options}"> </head> <body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"> <div class="navheader"> <table width="100%" summary="Navigation header"> <tr><th colspan="3" align="center">{html_image}</th></tr> <tr> <td width="20%" align="left"> <a accesskey="p" href="language.function.html.checkboxes.html">Prev</a> </td> <th width="60%" align="center">Chapter 8. Custom Functions</th> <td width="20%" align="right"> <a accesskey="n" href="language.function.html.options.html">Next</a> </td> </tr> </table> <hr> </div> <div class="sect1" title="{html_image}"> <div class="titlepage"><div><div><h2 class="title" style="clear: both"> <a name="language.function.html.image"></a>{html_image}</h2></div></div></div> <p> <code class="varname">{html_image}</code> is a <a class="link" href="language.custom.functions.html" title="Chapter 8. Custom Functions">custom function</a> that generates an HTML <code class="literal"><img></code> tag. The <em class="parameter"><code>height</code></em> and <em class="parameter"><code>width</code></em> are automatically calculated from the image file if they are not supplied. </p> <div class="informaltable"><table border="1"> <colgroup> <col align="center"> <col align="center"> <col align="center"> <col align="center"> <col> </colgroup> <thead><tr> <th align="center">Attribute Name</th> <th align="center">Type</th> <th align="center">Required</th> <th align="center">Default</th> <th>Description</th> </tr></thead> <tbody> <tr> <td align="center">file</td> <td align="center">string</td> <td align="center">Yes</td> <td align="center"><span class="emphasis"><em>n/a</em></span></td> <td>name/path to image</td> </tr> <tr> <td align="center">height</td> <td align="center">string</td> <td align="center">No</td> <td align="center"><span class="emphasis"><em>actual image height</em></span></td> <td>Height to display image</td> </tr> <tr> <td align="center">width</td> <td align="center">string</td> <td align="center">No</td> <td align="center"><span class="emphasis"><em>actual image width</em></span></td> <td>Width to display image</td> </tr> <tr> <td align="center">basedir</td> <td align="center">string</td> <td align="center">no</td> <td align="center"><span class="emphasis"><em>web server doc root</em></span></td> <td>Directory to base relative paths from</td> </tr> <tr> <td align="center">alt</td> <td align="center">string</td> <td align="center">no</td> <td align="center"><span class="emphasis"><em><span class="quote">“<span class="quote"></span>”</span></em></span></td> <td>Alternative description of the image</td> </tr> <tr> <td align="center">href</td> <td align="center">string</td> <td align="center">no</td> <td align="center"><span class="emphasis"><em>n/a</em></span></td> <td>href value to link the image to</td> </tr> <tr> <td align="center">path_prefix</td> <td align="center">string</td> <td align="center">no</td> <td align="center"><span class="emphasis"><em>n/a</em></span></td> <td>Prefix for output path</td> </tr> </tbody> </table></div> <div class="itemizedlist"><ul class="itemizedlist" type="disc"> <li class="listitem"><p> <em class="parameter"><code>basedir</code></em> is the base directory that relative image paths are based from. If not given, the web server's document root <code class="varname">$_ENV['DOCUMENT_ROOT']</code> is used as the base. If <a class="link" href="variable.security.html" title="$security"><em class="parameter"><code>$security</code></em></a> is enabled, the path to the image must be within a <a class="link" href="variable.secure.dir.html" title="$secure_dir">secure directory</a>. </p></li> <li class="listitem"><p> <em class="parameter"><code>href</code></em> is the href value to link the image to. If link is supplied, an <code class="literal"><a href="LINKVALUE"><a></code> tag is placed around the image tag. </p></li> <li class="listitem"><p> <em class="parameter"><code>path_prefix</code></em> is an optional prefix string you can give the output path. This is useful if you want to supply a different server name for the image. </p></li> <li class="listitem"><p> All parameters that are not in the list above are printed as name/value-pairs inside the created <code class="literal"><img></code> tag. </p></li> </ul></div> <div class="note" title="Technical Note" style="margin-left: 0.5in; margin-right: 0.5in;"> <h3 class="title">Technical Note</h3> <p> <code class="varname">{html_image}</code> requires a hit to the disk to read the image and calculate the height and width. If you don't use template <a class="link" href="caching.html" title="Chapter 14. Caching">caching</a>, it is generally better to avoid <code class="varname">{html_image}</code> and leave image tags static for optimal performance. </p> </div> <div class="example"> <a name="id3068928"></a><p class="title"><b>Example 8.11. {html_image} example</b></p> <div class="example-contents"> <pre class="programlisting"> {html_image file='pumpkin.jpg'} {html_image file='/path/from/docroot/pumpkin.jpg'} {html_image file='../path/relative/to/currdir/pumpkin.jpg'} </pre> <p> Example output of the above template would be: </p> <pre class="screen"> <img src="pumpkin.jpg" alt="" width="44" height="68" /> <img src="/path/from/docroot/pumpkin.jpg" alt="" width="44" height="68" /> <img src="../path/relative/to/currdir/pumpkin.jpg" alt="" width="44" height="68" /> </pre> </div> </div> <br class="example-break"> </div> <div class="navfooter"> <hr> <table width="100%" summary="Navigation footer"> <tr> <td width="40%" align="left"> <a accesskey="p" href="language.function.html.checkboxes.html">Prev</a> </td> <td width="20%" align="center"><a accesskey="u" href="language.custom.functions.html">Up</a></td> <td width="40%" align="right"> <a accesskey="n" href="language.function.html.options.html">Next</a> </td> </tr> <tr> <td width="40%" align="left" valign="top">{html_checkboxes} </td> <td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td> <td width="40%" align="right" valign="top"> {html_options}</td> </tr> </table> </div> </body> </html>