Design 4 - TriBeCa Old Template Settings
Design 4 | TriBeCa
Your ideal image size is 1800 x 1200 pixels, but there’s no need to crop your images just match one of those numbers (The thumbnail box ratio is 1:1.5. So if images are uploaded with a 1:1.5 ratio such a 1200×1800 then the thumb will appear full). The site uses dynamic resizing so you can load any size image you want, just make sure you save for web in photoshop (quality of 40% seems to be nice), because large files take a long time to load and will bum out your clients (oh, and then everyone will start talkin’ about how slow the APF sites are).
Important note about naming: Your image names cannot have spaces or characters like this: å, é, ü, ö or symbols except dash and underscore.
THIS IS VERY IMPORTANT: You have the ability to load huge images on your site. Please make a conscious decision about this and realize that the bigger the image the slower it will load. Anything over 300-350kb is big and we strongly recommended using save for web at a quality of 40% and a width of no more than 1860 pixels. It’s your call so decide what’s best for you.
If you add a logo start with 320 x 74 pixels (or around that). Use a photoshop png file and knockout the background if you want only the logo to show up.
If you want to add pictures to text pages start with 300 x 215 pixels (or around that).
Your website comes with a slideshow on the landing page (after the intro but before someone clicks on a menu item). To activate simply load images in the extra files folder under the advanced tab (you can also use FTP to do this. Put them in httpdocs–>extra and make sure you save for web in photoshop so they’re not huge (100-350 kb max)). Make sure to name them 01, 02, 03… to force a display order. Speed of the show and image positioning (center, right, left) can be adjusted in the template settings.
There are two settings for the slideshow that can be found in the template settings. Normal will give you a slideshow that fits within the picture box and full will give you a slideshow that fills the browser window.
You can also have a single image or logo display instead by loading a background image. Note: The sideshow will override the background image if both are used.
Here are the color maps that will help you figure out what the different color settings control:
D4 ColorMap 1(click to download the pdf)
D4 ColorMap 2(click to download the pdf)
(Click to make bigger)
(Click to make bigger)
Custom Thumbnails For The Design 4 Menu: You can add custom thumbnails to the top menu on D4 (200 px wide x 133 px tall). Just upload a thumbnail to the ‘images’ directory (use ftp access inside the httpdocs folder). If it is present it will use that instead of the first image in the gallery. The name must match exactly (case sensitive) whatever the gallery name is. So if the gallery name is ‘lifestyle’ the thumbnail name must be ‘lifestyle.jpg’
NOTE: Design 4 Template settings have changed to a completely new design. Much of the information below is still helpful but the templates settings look nothing like that. We hope to have updated settings information shortly.
The template settings for Design 4 offer plenty of flexibility but there’s so many adjustments we have a pdf guide for you to use.
D4 Template Settings(click to download the pdf)
