Printing out a screenshot and scribbling on it
This morning my task is to convert a static HTML design for a new website so that it can be managed within TERMINALFOUR SiteManager. I may of course be stating the obvious to all readers, but this may help someone.
Header and footer
In creating a new SiteManager style you first need to decide how to break up the page into header and footer, so that the appropriate code can be dropped into those fields within the SiteManager Style dialog. This depends on where the main content is going to be, with the code above it being the header, and the code below being the footer.
Links, menus, sections
With that decided you then need to work out where the various links, menus and sections on your design are coming from. Are they going to be pulled in with a top content item from another section, for example, or from a related content sub-section; do the links need to be hard-coded (in the case of a link to a site managed in another SiteManager channel) or dynamically generated by SiteManager using a navigation object, etc.
Print it out
I’ve find the easiest way, by far, to plan the job is to take a screenshot of your design, print it out — we have a colour A3 printer here which is perfect for the task — and then get scribbling on the page. I use coloured highlighter markers too to distinguish different kinds of treatment, e.g. blue for hard-coded links, green for new navigation objects, yellow for main content, etc.
I also make sure that I write on the print-out which unseen elements within the <head> section need to be updated/created, e.g. CSS styles, meta tags, RSS links, etc.
Build it
Once I’ve mapped out what I need to do it’s then just a case of starting somewhere and creating the new navigation objects as required. I always start at top-left and work in a clockwise direction. I also code it in my text editor of choice (Blumentals WeBuilder, thanks for asking) as I find it easier to manage code in that environment (and we also commit all our code to a Subversion repository) and then when finished cut and paste it into SiteManager.
I hope that’s of help to someone.
Gareth @ St Andrews
Hi Gareth,
I was wondering if you had figured out a way to refer to T4 media library items (most likely an image) in your CSS? What about a way to call the image source in the HTML? Something along the lines of <img src="” />??
This has stumped me awhile and figured the T4 Scottish Web Folk would be great to ask!!
Thanks!
-Leanne
First, referring to T4 media library items in your CSS: the University of Strathclyde Web team have developed a broker to do exactly that. As I understand it they can put a media library tag into their CSS and it will be parsed on publish, inserting the URL to the appropriate image. Follow the link above to the Web team page and contact them that way — refer them to this page, if you like.
Second, calling the image source here’s what I suspect. When you use the T4 tag builder in the Style Management section you select which media library item to link to and it will generate a T4 tag, e.g. .
Now, I suspect that this will simply use the default formatter set for that media type in Tools > Templates > Global Templates > Media. The default formatter for images, for us, is set to output the image, e.g. <img src="…etc. />
So I suspect that if you were to create a custom media formatter called something like “Image path” which did nothing apart from output the filename, e.g. and then uploaded a particular image and assigned it to that formatter type you could do what you’re wanting here.
You’d have to test this to see if it worked. Failing that, contact T4 about it and see if they have any further ideas.