Putting it together one Note at a time

*protoTyping

A Tinderbox Toolshed

protoTyping

The Front Door


There's No Place Like Home


Quick Notes


About Me


A Picture's Worth a Thousand Words


Recent Notes


The Workbench


My ToDo List


The Storage Shed


The Junkdrawer


Drop Me a Line


Adding Pictures to a Blog


map.jpg

It's time to add pictures to *protoTyping. I'll begin with the Picture Template ideas suggested by M.B.. I'll expand on it in by including pictures for the blurb and for each of the Level 2 note in the "Read More" section. **Revised**

  • **Revised Again***


category.jpg

I created a new User Attribute called PictureFile. This will be where I paste the name of the picture, including the jpeg extension (because it's easy to copy the whole thing when I get the name from the source).

  • **I also use the system attribute URL, where I paste the link for the picture.*** Revised!
    • Because of problems encountered in the sidebar (sidebar template used URL for links) I created a new attribute called PictureURL.**

Added PictureFile and PictureURL attributes to the list of Key Attributes.

Put if-then code, img tag, and link in traintemplate.html as well as in my more complex trainItem.html (more later).

The if-then conditional test to see if PictureFile exists. If so, show the picture with a link, where the values are provided by ^Get

The path is preset to the location where my ImageRodeo document will always automatically put the thumbnails: /protophoto/thumb/

The URL I set by exporting my pictures from ImageRodeo and determining the URL for the display sized picture that I show in the thumbnail. That way, following the img link opens a window on the display page for the image that is created by ImageRodeo.

Here is the code with angle brackets removed and double carets so it will be displayed properly in my TBX document:

^if(PictureFile)

A HREF="^Get(PictureURL)" TARGET="_blank" TITLE="^Get(PictureFile)" IMG SRC="/protophoto/thumb/^Get(PictureFile)" ALIGN="left" ALT="^Get(PictureFile)" /A

^endif

^text(this, trainitem.html)^


boilerplate.jpg

I also have pictures that show up in the note items. This is accomplished by including the same code in the trainitem.html template that I constructed for my multilevel notes within notes. It allows me to have a number of pictures in a single story made up of many notes where each note has a single PictureFile and URL along with accompanying text.


toolshed.jpg

For a live example check out *protoTyping at

http://prototyping.home.attbi.com/

Next time I'll detail how I managed to get Notes with many notes to work in a "Read More... break out posting approach" to longer blogging entries.




 

--- Ryan Holcomb 2005 --

A Shed with a View


Tinderbox Help


GTD on the Web


My Toolbox


The Bookshelf


Tinderbox



tinderbox