Smarty Forum Index Smarty
WARNING: All discussion is moving to https://reddit.com/r/smarty, please go there! This forum will be closing soon.
  www.smarty.net   •  phpinsider.com  •  Forum Index  •  FAQ  •  Search  •  Memberlist  •  Profile  •  Log in to check your private messages  •  Register  •  Log in
How to add an image - output to this code ...

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> General
View previous topic :: View next topic  
Author Message
venOne
Smarty Rookie


Joined: 01 Jul 2009
Posts: 5
PostPosted: Wed Jul 01, 2009 7:23 pm    Post subject: How to add an image - output to this code ... Reply with quote
Hi everybody,

I'm very new to Smarty and now are dealing with some templates. I do have a breadcrumb on that page, and I would like to insert a "divider" between the links in that breadcrumb. See Apple - Store for sample.

Well, I got completly stuck. Maybe someone can help me out please?

How do I advise Smarty to add an image?

Code:
$smarty->assign('navtrail',$breadcrumb->trail(' INSERT COMMAND HERE? '));


The image is placed at: img/tpl/image.gif

Maybe I'm too blind to see? Thanks a lot in advance.

Regards from Zürich,

Tom[/i]
Back to top
View user's profile Send private message
jLix
Smarty Regular


Joined: 01 Apr 2009
Posts: 59
Location: Lowlands, EU
PostPosted: Thu Jul 02, 2009 12:26 am    Post subject: Reply with quote
To markup the breadcrumbs I'd suggest you use an ordered list. The divider image is presentation only, so it should be added as a background-image by CSS.

HTML/Smarty:
Code:
<ol id="breadcrumbs">
    {foreach from=$navtrail item="breadcrumb" name="breadcrumbs"}
        <li{if $smarty.foreach.breadcrumbs.first} class='first"{/if}><a href="{$breadcrumb.url}">{$breadcrumb.name}</a></li>
    {/foreach}
</ol>
Of course you will have to adjust the variable names to yours.

CSS:
Code:
#breadcrumbs {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    #breadcrumbs li {
        float: left;
        padding-left: 15px;
        background: url(img/tpl/image.gif) transparent no-repeat 0 0.5em;
    }

    #breadcrumbs li.first {
        padding-left: 0;
        background-image: none;
    }
Same here: adjust values to your needs. Path to background-image may differ, depending on the relative location of the image to the CSS file.
_________________
http://jlix.net/extensions/smarty
Back to top
View user's profile Send private message Visit poster's website
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> General All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP