Custom Page Templates: Banner Graphic
The banner graphic is an important part of most pages, and can have a significant impact on your page design. If you are designing a template to create a specific look for just one store, your design decisions are simplified. But if you want to build flexibility into your template, you have to consider these issues:
- Where do you want the banner graphic to appear? Top left corner? Centered below the page header? Top right corner?
- Will your template look good if merchants use a small banner graphic? How about a large one?
- What if the merchant wants to display the banner graphic but not the page name? What if the merchant wants to display both -- will the page layout still look good?
- Do you want the banner graphic to be a link to the main page of the store? That's common in designs that have the banner graphic in the top left corner.
- What if the merchant forgot to select a baner graphic? That is, what if there's no value for the field?
Banner Graphic Page Template Tags
This example uses nested IF tags to display the banner graphic centered below the header, but above the page name. The store data used for the resulting page has the page name set to not display.
-
[-- IF PAGE.DisplayGraphic --]
[-- IF PAGE.Graphic --]
<p style="text-align:center">[-- PAGE.Graphic --]</p>
[-- END_IF --]
[-- END_IF --]
Banner Graphic Tags
There are several custom template tags that you can use to produce the banner graphic. Each has its own benefits:
- [-- PAGE.Graphic --]
This tag returns a fully-formatted <img> tag. It uses the image attributes set for the graphic in the Images section of Shopsite. This is the easiest tag to use, but it gives you the least amount of control over the output, which looks something like this:
<img src="http://mystore.com/media/daisys_flowers.jpg" alt="daisys_flowers.jpg"> - [-- PAGE.Graphic Remove_HTML --]
This tag returns all of the image attributes as defined in the Images section of ShopSite, but without the opening <img and closing >.
src="http://mystore.com/media/daisys_flowers.jpg" alt="daisys_flowers.jpg"
Your template must supply those pieces, as well as any additional attributes.
<img [-- PAGE.Graphic Remove_HTML --] align="right" border="0"> - [-- IMAGE PAGE.Graphic --]
This tag returns just the file name of the banner graphic, or the subdirectory path and file name if the image is in a media subdirectory, like this:
daisys_flowers.jpg
Your template must supply the rest of the <img> tag as well as any parameters.
<img src="media/[-- IMAGE PAGE.Graphic --]" alt="store logo" align="right" border="0">