Photo Gallery Templates with Subtitles

Contents at a Glance ~ page 1 of 4Template compliments of Nu Mil 3 Design
Top of PageHTML Code for a "3 row x 3 pic" Image Template
The Basic Structure of the TemplatesHTML Code for a "4 row x 3 pic" Image Template
Demonstration Model for a Photo TemplateAn Example of the Final Layout of a Photo Gallery
Notes, Tips and SuggestionsYou're a ( Gentleman / Lady )...
Known Issues, Fixes and WorkaroundsHave You Successfully Added a Photo Template ?
HTML Code for a "1 row x 3 pic" Image TemplateMore Sites by Nu Mil 3 Design
HTML Code for a "2 row x 3 pic" Image Template

Page 2: Templates with BUY NOW ButtonsPage 4: Site Evaluation
Page 3: Appendix

1. The photo gallery templates are constructed of a required attribution
   ( Image Template compliments of Nu Mil 3 Design ) located above one or more rows of pictures paired with their center-aligned captions. The captions can be as brief, or as detailed, as you want. If you use the image templates with "BUY NOW" buttons on page 2, the buttons will be positioned as shown below.
   
   On most websites the photo gallery will be centered on the recipient web page column via a snippet of CSS code. As just described, the diagrammatic structure of a two row template is:
   

Image Template compliments of Nu Mil 3 Design
Row 1-Left ImageRow 1-Middle ImageRow 1-Right Image
Row 1-Left Subtitle
BUY NOWRow 1-Middle Subtitle
BUY NOWRow 1-Right Subtitle
BUY NOW
Row 2-Left ImageRow 2-Middle ImageRow 2-Right Image
Row 2-Left Subtitle
BUY NOWRow 2-Middle Subtitle
BUY NOWRow 2-Right Subtitle
BUY NOW

2. The images in the templates are set at: width=162px and height=162px. Using square pictures with dimensions equal to or greater than 162px x 162px will usually generate the best results. Square pics significantly smaller than
   162px x 162px will work, but might tend to be a little blurry. Your photos must be hosted at a site that allows hot-linking and provides an image linking source code. Nu Mil 3 Design primarily uses Zazzle.com's image linking code for 325px x 325px product photos from the Nu Mil 3 Design store.
   
   For example, Zazzle.com designers and promoters can find the product image URL source code on the selected product detail page ( such as the fabric tote bag page at Nu Mil 3 Design). Click the link that's labeled "Link" located under the large product picture, and the "Link to this" page should now be in view. Then pick an image size for the product: small or large. The Zazzle-generated HTML code below shows the product destination page URL ( highlighted in red ) and the image source URL ( highlighted in blue ), which you can then copy and paste into the photo gallery templates found on this site:
   
   <div style="text-align:center;line-height:150%"> <a href="http://www.zazzle.com/my_stuff_personalized_reusable_fabric_tote_bag-149547239527120915?gl=NuMil3Design&rf=238598684682530650"> <img src="http://rlv.zcache.com/my_stuff_personalized_reusable_fabric_tote_bag-p149547239527120915bhd94_325.jpg" alt="My Stuff. Personalized, Reusable Fabric Tote Bag" style="border:0;" /> </a> <br /> <a href="http://www.zazzle.com/my_stuff_personalized_reusable_fabric_tote_bag-149547239527120915?gl=NuMil3Design&rf=238598684682530650">My Stuff. Personalized, Reusable Fabric Tote Bag</a> by <a href="http://www.zazzle.com/numil3design*">NuMil3Design</a> <br /> Design your own <a href="http://www.zazzle.com/custom/bags">customizable tote bags</a> at zazzle.com </div>
   
   
   Be advised that the division tags ( <div> & </div> ) that enclose the Zazzle HTML code above are not currently supported on Squidoo lenses.
   


3. Next, take a look at the Demonstration Model below to familiarize yourself with the task ahead. It shows the actual HTML code for a "2 row x 3 pic" multi-pic template, along with the resulting browser display. After that we will lay out some Notes, Tips and Suggestions, discuss known issues and provide several generic templates that you can edit for your site.
   

Top of Page ~ Menu

<p style="font-size:13px; margin:0 auto; width:554px; text-align:center; word-wrap:break-word;"><span style="text-align:left; float:left; width:552px; margin:0 0 2px 0; font-size:10px; font-weight:bold; color:#555;"><a href="http://www.squidoo.com/multi-image-template" target="_blank" title="Add a clickable image template with subtitles to your website.">Image Template</a> compliments of <a href="http://www.squidoo.com/lensmasters/NuMil3Design" target="_blank" title="Click now to visit Nu Mil 3 Design on Squidoo.">Nu Mil 3 Design</a></span>
<span style="float:left; width:552px; margin:0 0 5px 0;"><a href="http://www.zazzle.com/numil3design*/gifts?cg=196199216395924183" target="_blank"><img src="http://rlv.zcache.com/personalized_3_ring_avery_binder-p127618367821068852f7kh6_325.jpg" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 0; padding:0;" alt="Buy custom design 3-Ring Binders." /></a><a href="http://www.zazzle.com/numil3design*/gifts?cg=196749447110978503" target="_blank"><img src="http://rlv.zcache.com/my_stuff_personalized_reusable_fabric_tote_bag-p1495472395271209152ih9q_325.jpg" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 15px; padding:0;" alt="Shop for reusable fabric tote bags." /></a><a href="http://www.zazzle.com/numil3design*/gifts?cg=196310306578950531" target="_blank"><img src="http://rlv.zcache.com/guess_who_gave_you_this_tie_daddy-p151696065397813264td9w_210.jpg" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 0 0 15px; padding:0;" alt="Browse men's novelty ties." /></a></span>
<span style="float:left; width:552px;"><a href="http://www.zazzle.com/numil3design*/gifts?cg=196199216395924183" style="float:left; margin:0 15px 0 0; width:164px; text-decoration:none;" target="_blank">3-Ring Binders</a><a href="http://www.zazzle.com/numil3design*/gifts?cg=196749447110978503" style="float:left; margin:0 15px 0 15px; width:164px; text-decoration:none;" target="_blank">Fabric Tote Bags</a><a href="http://www.zazzle.com/numil3design*/gifts?cg=196310306578950531" style="float:left; margin:0 0 0 15px; width:164px; text-decoration:none;" target="_blank">Men's Novelty Ties</a></span>
<span style="float:left; width:552px; margin:25px 0 5px 0;"><a href="http://www.zazzle.com/numil3design*/gifts?cg=196076237420301131" target="_blank"><img src="http://rlv.zcache.com/sarah_palins_grocery_list_mousepad-p1447950054651749477pdd_325.jpg" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 0; padding:0;" alt="Find one-of-a-kind mousepads." /></a><a href="http://www.zazzle.com/numil3design*/gifts?cg=196509543639526225" target="_blank"><img src="http://rlv.zcache.com/sarah_palins_grocery_list_white_black_trim_mug-p1684256467753622042gq8k_325.jpg" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 15px; padding:0;" alt="Buy custom designed mugs." /></a><a href="http://www.zazzle.com/numil3design*/gifts?cg=196536252643628197" target="_blank"><img src="http://rlv.zcache.com/sarah_palins_grocery_list_poster-p2286164371432185837g1w_325.jpg" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 0 0 15px; padding:0;" alt="Original posters and prints for sale." /></a></span>
<span style="float:left; width:552px;"><a href="http://www.zazzle.com/numil3design*/gifts?cg=196076237420301131" style="float:left; margin:0 15px 0 0; width:164px; text-decoration:none;" target="_blank">Mousepads</a><a href="http://www.zazzle.com/numil3design*/gifts?cg=196509543639526225" style="float:left; margin:0 15px 0 15px; width:164px; text-decoration:none;" target="_blank">Mugs and Steins</a><a href="http://www.zazzle.com/numil3design*/gifts?cg=196536252643628197" style="float:left; margin:0 0 0 15px; width:164px; text-decoration:none;" target="_blank">Posters and Prints</a></span></p><br style="clear:both;" />

Test the live demo code above by copying and pasting it into a Squidoo text module or into your non-Squidoo web page. A template that exhibits substantially the same form and function as the resulting photo gallery below is an indication of good compatibility with your site:

Image Template compliments of Nu Mil 3 Design

3-Ring BindersFabric Tote BagsMen's Novelty Ties

MousepadsMugs and SteinsPosters and Prints

.......................

Inserting the raw, unedited code of a "2 row x 3 pic" template into a webpage yields the display below. Depending on which browser/browser settings are utilized, the photo gallery shell might appear structured and organized, or it could appear quite disorderly and dysfunctional. Rely only on an installation test of the live demo template code above to determine the suitability of the templates for your site.

Image Template compliments of Nu Mil 3 Design

Row 1-Left Subtitle-TextRow 1-Middle Subtitle-TextRow 1-Right Subtitle-Text

Row 2-Left Subtitle-TextRow 2-Middle Subtitle-TextRow 2-Right Subtitle-Text

Top of Page ~ Menu

1. Take care with the HTML code in the templates below. Internet browsers, Squidoo text modules and web page editors can sometimes be quite unforgiving of HTML mistakes, and may discombobulate your coding because of small errors in syntax, punctuation, spacing and unintentional page breaks or carriage returns.
   
   Preparation, organization and precision editing are keys to the successful installation of a template.
   


2. It's easy to get lost when you're working with large blocks of code, especially since the color coding built into the templates for ease of viewing and tracking doesn't appear in the Squidoo text modules. Microsoft Word ( MS Word ), or other applications that preserve the color coding of the templates, are suggested work aids that are an enormous help in editing the templates.
   
   Paste the template code into a blank MS Word sheet, edit the coding and then paste it into the text module or into your web page. If your MS Word is set to preserve the color formatting, editing is a relative breeze. The screen shot below shows a snippet of the coding for a "1 row x 3 pic" template pasted into MS Word:
   
   
   
   Editing is even easier if your editor has a "Find and Replace" feature:
   
   
   
   In the screen shot above, a template descriptor (Row 1-Left Subtitle Click-Destination URL) has been carefully copied from the photo gallery template and pasted into the "Find what" space.
   
   As pictured above, the "Replace with" space has been filled with the appropriate destination URL associated with the Row 1-Left Subtitle Click-Destination URL template descriptor, which in this particular case is a link to a Nu Mil 3 Design store page (http://www.zazzle.com/numil3design*/gifts?cg=196199216395924183).
   
   Press the "Replace" button, and the required editing of that particular descriptor is finished. Edit the other descriptors in the same manner. Easy!
   


3. If you don't have Microsoft Word, or a similar editing application, try the Nu Mil 3 Design online text editor set up on a Blogspot page. It doesn't preserve the color coding of the templates, but the available editing area is much roomier and easier to visualize than the Squidoo text module.
   


4. Print pertinent sections of this website for an invaluable reference aid.
   


5. Brief explanations of editable coding elements:
   
   
   1. <p style="font-size:13px; margin:0 auto; width:554px; ....">
      
      [ editing is optional ] The "font-size:" property controls the size of the subtitle text in the templates. The templates are preloaded with a font-size value of 13px and can comfortably range from about 11px to 14px. The font-size of all the subtitles in a template is controlled by one global setting. To reset the font-size of all the subtitles in a template, change the numerical value of the global setting found on the left side of the top row of the template code.
      
   
   
   2. href="Row 1-Left Image Click-Destination URL"
      
      "href" refers to the destination page, or landing page, that you want a visitor to go to after clicking an image link. If you have a referral ID, attach it to the destination URL according to the instructions or examples provided by the authority that issued the referral ID.
      
   
   
   3. src="Row 1-Left Image-Source URL"
      
      "src" refers to the source URL ( web address ) of an image, and it allows a picture to be displayed on a web page. Do NOT add a referral ID to the image source URL; this is not the place for it, and it will probably prevent the image from being properly displayed.
      
   
   
   4. alt="Row 1-Left Image-Image Description"
      
      "alt" is displayed as an alternative text description for an image that cannot be properly displayed for some reason. "alt" text is supposed to remain unseen if the picture is properly displayed, but Internet Explorer usually displays it anyway as a visible , mouse-over tooltip. Most HTML standards groups and search engines consider the inclusion of alternative text for images to be an important best practice. "alt" text might give a small boost to some search engine keyword rankings.
      
   
   
   5. href="Row 1-Left Subtitle Click-Destination URL"
      
      "href" refers to the destination page, or landing page, that you want a visitor to go to after clicking a subtitle text link. If you have a referral ID, attach it to the destination URL according to the instructions or examples provided by the authority that issued the referral ID.
      
   
   
   6. Row 1-Left Subtitle-Text
      
      Refers to the visible, free-standing caption text associated with an image in the template and linked to a destination page via HTML coding in the template.
      
   
   
   7. BUY NOW
      
      [ editing is optional ] Change the button text to the wording of your choice.
      Suggested choices include: Details , More Info... , View Now & Features .
      Picture templates designed with "BUY NOW" buttons are located on page 2.

6. If you have a referral code, be sure to attach it to the destination URL according to the instructions or examples provided by the authority that issued the referral ID.
   
   Zazzlers, remember to add your Zazzle star ( * ) or your associates "rf" numeric code. Even though Zazzle claims it's not necessary, you can activate your Zazzle star now. Find your Zazzle associates code on the "Associates" tab of your "My Account" page.
   
   Zazzlers, get definitive answers regarding the proper usage and formatting of the Zazzle star ( * ) and the "rf" code from the Zazzle newsletter article "What You Should Know about Referrals: Part 1 & Part 2". Topics include the dissimilar indications for the use of the "?rf" and "&rf" codes.
   


7. All links in the templates are precoded to open the destination page or landing page in a new window, leaving your originating page accessible in the background.
   


8. The Squidoo text module has a 10,000 character limit, so the size of a template is limited on Squidoo...but there is no limit on the number of Text Modules that can be used. The prefabricated templates without a "BUY NOW" button range from 1 row of pics to 4 rows of pics. Templates with a "BUY NOW" button have 1-3 rows of pics.
   

Top of Page ~ Menu

1. Horizontal alignment issues:
1. The HTML templates are precoded to center align the picture galleries in their installed space. If the centering code does not work on your website, or if you prefer a left-aligned or a right-aligned gallery, see the instructions for changing the horizontal alignment on page 3: Appendix.


2. Column width issue:
1. The available column width on some websites is too narrow to accommodate the regular size templates. Somewhat narrower templates designed to accomodate narrower recipient webpages are available on page 3: Appendix.

Top of Page ~ Menu

<p style="font-size:13px; margin:0 auto; width:554px; text-align:center; word-wrap:break-word;"><span style="text-align:left; float:left; width:552px; margin:0 0 2px 0; font-size:10px; font-weight:bold; color:#555;"><a href="http://www.squidoo.com/multi-image-template" target="_blank" title="Add a clickable photo template with subtitles to your website.">Photo Template</a> compliments of <a href="http://www.squidoo.com/lensmasters/NuMil3Design" target="_blank" title="Click now to visit Nu Mil 3 Design on Squidoo.">Nu Mil 3 Design</a></span>
<span style="float:left; width:552px; margin:0 0 5px 0;"><a href="Row 1-Left Image Click-Destination URL" target="_blank"><img src="Row 1-Left Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 0; padding:0;" alt="Row 1-Left Image-Image Description" /></a><a href="Row 1-Middle Image Click-Destination URL" target="_blank"><img src="Row 1-Middle Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 15px; padding:0;" alt="Row 1-Middle Image-Image Description" /></a><a href="Row 1-Right Image Click-Destination URL" target="_blank"><img src="Row 1-Right Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 0 0 15px; padding:0;" alt="Row 1-Right Image-Image Description" /></a></span>
<span style="float:left; width:552px;"><a href="Row 1-Left Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 0; width:164px; text-decoration:none;" target="_blank">Row 1-Left Subtitle-Text</a><a href="Row 1-Middle Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 15px; width:164px; text-decoration:none;" target="_blank">Row 1-Middle Subtitle-Text</a><a href="Row 1-Right Subtitle Click-Destination URL" style="float:left; margin:0 0 0 15px; width:164px; text-decoration:none;" target="_blank">Row 1-Right Subtitle-Text</a></span></p><br style="clear:both;" />

Top of Page ~ Menu

<p style="font-size:13px; margin:0 auto; width:554px; text-align:center; word-wrap:break-word;"><span style="text-align:left; float:left; width:552px; margin:0 0 2px 0; font-size:10px; font-weight:bold; color:#555;"><a href="http://www.squidoo.com/multi-image-template" target="_blank" title="Add a clickable image template with subtitles to your website.">Image Template</a> compliments of <a href="http://www.squidoo.com/lensmasters/NuMil3Design" target="_blank" title="Click now to visit Nu Mil 3 Design on Squidoo.">Nu Mil 3 Design</a></span>
<span style="float:left; width:552px; margin:0 0 5px 0;"><a href="Row 1-Left Image Click-Destination URL" target="_blank"><img src="Row 1-Left Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 0; padding:0;" alt="Row 1-Left Image-Image Description" /></a><a href="Row 1-Middle Image Click-Destination URL" target="_blank"><img src="Row 1-Middle Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 15px; padding:0;" alt="Row 1-Middle Image-Image Description" /></a><a href="Row 1-Right Image Click-Destination URL" target="_blank"><img src="Row 1-Right Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 0 0 15px; padding:0;" alt="Row 1-Right Image-Image Description" /></a></span>
<span style="float:left; width:552px;"><a href="Row 1-Left Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 0; width:164px; text-decoration:none;" target="_blank">Row 1-Left Subtitle-Text</a><a href="Row 1-Middle Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 15px; width:164px; text-decoration:none;" target="_blank">Row 1-Middle Subtitle-Text</a><a href="Row 1-Right Subtitle Click-Destination URL" style="float:left; margin:0 0 0 15px; width:164px; text-decoration:none;" target="_blank">Row 1-Right Subtitle-Text</a></span>
<span style="float:left; width:552px; margin:25px 0 5px 0;"><a href="Row 2-Left Image Click-Destination URL" target="_blank"><img src="Row 2-Left Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 0; padding:0;" alt="Row 2-Left Image-Image Description" /></a><a href="Row 2-Middle Image Click-Destination URL" target="_blank"><img src="Row 2-Middle Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 15px; padding:0;" alt="Row 2-Middle Image-Image Description" /></a><a href="Row 2-Right Image Click-Destination URL" target="_blank"><img src="Row 2-Right Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 0 0 15px; padding:0;" alt="Row 2-Right Image-Image Description" /></a></span>
<span style="float:left; width:552px;"><a href="Row 2-Left Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 0; width:164px; text-decoration:none;" target="_blank">Row 2-Left Subtitle-Text</a><a href="Row 2-Middle Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 15px; width:164px; text-decoration:none;" target="_blank">Row 2-Middle Subtitle-Text</a><a href="Row 2-Right Subtitle Click-Destination URL" style="float:left; margin:0 0 0 15px; width:164px; text-decoration:none;" target="_blank">Row 2-Right Subtitle-Text</a></span></p><br style="clear:both;" />

Top of Page ~ Menu

<p style="font-size:13px; margin:0 auto; width:554px; text-align:center; word-wrap:break-word;"><span style="text-align:left; float:left; width:552px; margin:0 0 2px 0; font-size:10px; font-weight:bold; color:#555;"><a href="http://www.squidoo.com/multi-image-template" target="_blank" title="Add a clickable picture template with subtitles to your website.">Picture Template</a> compliments of <a href="http://www.squidoo.com/lensmasters/NuMil3Design" target="_blank" title="Click now to visit Nu Mil 3 Design on Squidoo.">Nu Mil 3 Design</a></span>
<span style="float:left; width:552px; margin:0 0 5px 0;"><a href="Row 1-Left Image Click-Destination URL" target="_blank"><img src="Row 1-Left Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 0; padding:0;" alt="Row 1-Left Image-Image Description" /></a><a href="Row 1-Middle Image Click-Destination URL" target="_blank"><img src="Row 1-Middle Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 15px; padding:0;" alt="Row 1-Middle Image-Image Description" /></a><a href="Row 1-Right Image Click-Destination URL" target="_blank"><img src="Row 1-Right Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 0 0 15px; padding:0;" alt="Row 1-Right Image-Image Description" /></a></span>
<span style="float:left; width:552px;"><a href="Row 1-Left Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 0; width:164px; text-decoration:none;" target="_blank">Row 1-Left Subtitle-Text</a><a href="Row 1-Middle Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 15px; width:164px; text-decoration:none;" target="_blank">Row 1-Middle Subtitle-Text</a><a href="Row 1-Right Subtitle Click-Destination URL" style="float:left; margin:0 0 0 15px; width:164px; text-decoration:none;" target="_blank">Row 1-Right Subtitle-Text</a></span>
<span style="float:left; width:552px; margin:25px 0 5px 0;"><a href="Row 2-Left Image Click-Destination URL" target="_blank"><img src="Row 2-Left Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 0; padding:0;" alt="Row 2-Left Image-Image Description" /></a><a href="Row 2-Middle Image Click-Destination URL" target="_blank"><img src="Row 2-Middle Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 15px; padding:0;" alt="Row 2-Middle Image-Image Description" /></a><a href="Row 2-Right Image Click-Destination URL" target="_blank"><img src="Row 2-Right Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 0 0 15px; padding:0;" alt="Row 2-Right Image-Image Description" /></a></span>
<span style="float:left; width:552px;"><a href="Row 2-Left Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 0; width:164px; text-decoration:none;" target="_blank">Row 2-Left Subtitle-Text</a><a href="Row 2-Middle Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 15px; width:164px; text-decoration:none;" target="_blank">Row 2-Middle Subtitle-Text</a><a href="Row 2-Right Subtitle Click-Destination URL" style="float:left; margin:0 0 0 15px; width:164px; text-decoration:none;" target="_blank">Row 2-Right Subtitle-Text</a></span>
<span style="float:left; width:552px; margin:25px 0 5px 0;"><a href="Row 3-Left Image Click-Destination URL" target="_blank"><img src="Row 3-Left Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 0; padding:0;" alt="Row 3-Left Image-Image Description" /></a><a href="Row 3-Middle Image Click-Destination URL" target="_blank"><img src="Row 3-Middle Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 15px; padding:0;" alt="Row 3-Middle Image-Image Description" /></a><a href="Row 3-Right Image Click-Destination URL" target="_blank"><img src="Row 3-Right Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 0 0 15px; padding:0;" alt="Row 3-Right Image-Image Description" /></a></span>
<span style="float:left; width:552px;"><a href="Row 3-Left Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 0; width:164px; text-decoration:none;" target="_blank">Row 3-Left Subtitle-Text</a><a href="Row 3-Middle Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 15px; width:164px; text-decoration:none;" target="_blank">Row 3-Middle Subtitle-Text</a><a href="Row 3-Right Subtitle Click-Destination URL" style="float:left; margin:0 0 0 15px; width:164px; text-decoration:none;" target="_blank">Row 3-Right Subtitle-Text</a></span></p><br style="clear:both;" />

Top of Page ~ Menu

<p style="font-size:13px; margin:0 auto; width:554px; text-align:center; word-wrap:break-word;"><span style="text-align:left; float:left; width:552px; margin:0 0 2px 0; font-size:10px; font-weight:bold; color:#555;"><a href="http://www.squidoo.com/multi-image-template" target="_blank" title="Add a clickable gallery template with subtitles to your website.">Gallery Template</a> compliments of <a href="http://www.squidoo.com/lensmasters/NuMil3Design" target="_blank" title="Click now to visit Nu Mil 3 Design on Squidoo.">Nu Mil 3 Design</a></span>
<span style="float:left; width:552px; margin:0 0 5px 0;"><a href="Row 1-Left Image Click-Destination URL" target="_blank"><img src="Row 1-Left Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 0; padding:0;" alt="Row 1-Left Image-Image Description" /></a><a href="Row 1-Middle Image Click-Destination URL" target="_blank"><img src="Row 1-Middle Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 15px; padding:0;" alt="Row 1-Middle Image-Image Description" /></a><a href="Row 1-Right Image Click-Destination URL" target="_blank"><img src="Row 1-Right Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 0 0 15px; padding:0;" alt="Row 1-Right Image-Image Description" /></a></span>
<span style="float:left; width:552px;"><a href="Row 1-Left Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 0; width:164px; text-decoration:none;" target="_blank">Row 1-Left Subtitle-Text</a><a href="Row 1-Middle Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 15px; width:164px; text-decoration:none;" target="_blank">Row 1-Middle Subtitle-Text</a><a href="Row 1-Right Subtitle Click-Destination URL" style="float:left; margin:0 0 0 15px; width:164px; text-decoration:none;" target="_blank">Row 1-Right Subtitle-Text</a></span>
<span style="float:left; width:552px; margin:25px 0 5px 0;"><a href="Row 2-Left Image Click-Destination URL" target="_blank"><img src="Row 2-Left Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 0; padding:0;" alt="Row 2-Left Image-Image Description" /></a><a href="Row 2-Middle Image Click-Destination URL" target="_blank"><img src="Row 2-Middle Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 15px; padding:0;" alt="Row 2-Middle Image-Image Description" /></a><a href="Row 2-Right Image Click-Destination URL" target="_blank"><img src="Row 2-Right Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 0 0 15px; padding:0;" alt="Row 2-Right Image-Image Description" /></a></span>
<span style="float:left; width:552px;"><a href="Row 2-Left Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 0; width:164px; text-decoration:none;" target="_blank">Row 2-Left Subtitle-Text</a><a href="Row 2-Middle Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 15px; width:164px; text-decoration:none;" target="_blank">Row 2-Middle Subtitle-Text</a><a href="Row 2-Right Subtitle Click-Destination URL" style="float:left; margin:0 0 0 15px; width:164px; text-decoration:none;" target="_blank">Row 2-Right Subtitle-Text</a></span>
<span style="float:left; width:552px; margin:25px 0 5px 0;"><a href="Row 3-Left Image Click-Destination URL" target="_blank"><img src="Row 3-Left Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 0; padding:0;" alt="Row 3-Left Image-Image Description" /></a><a href="Row 3-Middle Image Click-Destination URL" target="_blank"><img src="Row 3-Middle Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 15px; padding:0;" alt="Row 3-Middle Image-Image Description" /></a><a href="Row 3-Right Image Click-Destination URL" target="_blank"><img src="Row 3-Right Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 0 0 15px; padding:0;" alt="Row 3-Right Image-Image Description" /></a></span>
<span style="float:left; width:552px;"><a href="Row 3-Left Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 0; width:164px; text-decoration:none;" target="_blank">Row 3-Left Subtitle-Text</a><a href="Row 3-Middle Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 15px; width:164px; text-decoration:none;" target="_blank">Row 3-Middle Subtitle-Text</a><a href="Row 3-Right Subtitle Click-Destination URL" style="float:left; margin:0 0 0 15px; width:164px; text-decoration:none;" target="_blank">Row 3-Right Subtitle-Text</a></span>
<span style="float:left; width:552px; margin:25px 0 5px 0;"><a href="Row 4-Left Image Click-Destination URL" target="_blank"><img src="Row 4-Left Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 0; padding:0;" alt="Row 4-Left Image-Image Description" /></a><a href="Row 4-Middle Image Click-Destination URL" target="_blank"><img src="Row 4-Middle Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 15px 0 15px; padding:0;" alt="Row 4-Middle Image-Image Description" /></a><a href="Row 4-Right Image Click-Destination URL" target="_blank"><img src="Row 4-Right Image-Source URL" style="height:162px; width:162px; border:1px solid grey; border-radius:6px; margin:0 0 0 15px; padding:0;" alt="Row 4-Right Image-Image Description" /></a></span>
<span style="float:left; width:552px;"><a href="Row 4-Left Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 0; width:164px; text-decoration:none;" target="_blank">Row 4-Left Subtitle-Text</a><a href="Row 4-Middle Subtitle Click-Destination URL" style="float:left; margin:0 15px 0 15px; width:164px; text-decoration:none;" target="_blank">Row 4-Middle Subtitle-Text</a><a href="Row 4-Right Subtitle Click-Destination URL" style="float:left; margin:0 0 0 15px; width:164px; text-decoration:none;" target="_blank">Row 4-Right Subtitle-Text</a></span></p><br style="clear:both;" />

Top of Page ~ Menu

Picture Template compliments of Nu Mil 3 Design

3-Ring BindersFabric Tote BagsMen's Novelty Ties

MousepadsMugs and SteinsPosters and Prints

SweatshirtsT-ShirtsU.S. Postage Stamps

Top of Page ~ Menu

Contents at a Glance ~ page 1 of 4Template compliments of Nu Mil 3 Design
Top of PageHTML Code for a "3 row x 3 pic" Image Template
The Basic Structure of the TemplatesHTML Code for a "4 row x 3 pic" Image Template
Demonstration Model for a Photo TemplateAn Example of the Final Layout of a Photo Gallery
Notes, Tips and SuggestionsYou're a ( Gentleman / Lady )...
Known Issues, Fixes and WorkaroundsHave You Successfully Added a Photo Template ?
HTML Code for a "1 row x 3 pic" Image TemplateMore Sites by Nu Mil 3 Design
HTML Code for a "2 row x 3 pic" Image Template

Page 2: Templates with BUY NOW ButtonsPage 4: Site Evaluation
Page 3: Appendix

© 2010. Nu Mil 3 Design™

►HomeTemplates with BUY NOWAppendixSite EvaluationPage 1 of 4