Coda Paths in Preview

[willow1]

Hi - I'm looking to move from Dreamweaver to Coda as I'm tired of the vast array of unneeded DW functions.

In my code I regularly my paths of CSS / Image files relative to the site root, eg src="/images/logo.png"

Coda preview doesn't seem to recognise this, and only renders the file if the path is used "images/logo.png"

Is there a way I can get Coda to preview these correctly?

 

[lucidmedia]

Hi - I'm looking to move from Dreamweaver to Coda as I'm tired of the vast array of unneeded DW functions.

In my code I regularly my paths of CSS / Image files relative to the site root, eg src="/images/logo.png"

Coda preview doesn't seem to recognise this, and only renders the file if the path is used "images/logo.png"

Is there a way I can get Coda to preview these correctly?

great choice. Coda and Textmate get a lot of love from the professional developer community.

I am no Coda expert, but I did not see a place where you could tell Coda to ignore the initial slash.

The simple work around is to keep your html files inside a running web server on your local machine (MAMP or the osX web server).

I *believe* that modern versions of dreamweaver get around this problem by running as an local web server (i.e. just like MAMP). I know it is how they allow for quick previews on devices like ipad, iphone and android.

Professionally, however, I would push you away from using absolute linking. It can become an administrative nightmare if the site ever has to be moved or sub-foldered on the server. Better to code the site relatively to a directory root.

Also, I would push you away from relying on the preview in Coda too heavily. While the preview does get updated when you update major versions of safari, it does not reflect the nightly builds... and webkit is certainly not the only browser engine you need to target. Your process will go more smoothly if you are previewing in several real running browsers concurrently.

 

[bpaluzzi]

Professionally, however, I would push you away from using absolute linking. It can become an administrative nightmare if the site ever has to be moved or sub-foldered on the server. Better to code the site relatively to a directory root.

Different horses for different courses, I suppose. I'd never use relative linking on a production site. Always absolute links -- the physical folder structure should be totally obfuscated from the code by using VHosts, so the "absolute" base is the top level of the site's world, as far as it's concerned.

No right or wrong way, just different ways

 

[willow1]

Thanks for the replies. Absolute linking is a must though, because of site folders and php includes. It won't work any other way!

Sadly I still can't get Coda to display the images - it would just be good to try and see the overall look of a page without having to upload it to preview!

 

[bpaluzzi]

Thanks for the replies. Absolute linking is a must though, because of site folders and php includes. It won't work any other way!

Sadly I still can't get Coda to display the images - it would just be good to try and see the overall look of a page without having to upload it to preview!

There's a way to set the site base path in Coda. I haven't worked with Coda for a while, and I don't have it on my work machine, so I can't check right now. I'll try and take a look when i get home. I don't think I have the latest version of Coda (I believe mine is the latest version before they went to the Mac App Store, but that could be wrong, too -- it's been at least a year since I've even opened that app), but hopefully it hasn't changed too much with the latest version. I'll check and post back tonight if I figure it out. If I don't post, it means I've slunk back into the shadows after being soundly defeated by the boys at Panic ;-)

 

[bpaluzzi]

There's a way to set the site base path in Coda. I haven't worked with Coda for a while, and I don't have it on my work machine, so I can't check right now. I'll try and take a look when i get home. I don't think I have the latest version of Coda (I believe mine is the latest version before they went to the Mac App Store, but that could be wrong, too -- it's been at least a year since I've even opened that app), but hopefully it hasn't changed too much with the latest version. I'll check and post back tonight if I figure it out. If I don't post, it means I've slunk back into the shadows after being soundly defeated by the boys at Panic ;-)

Looked into this last night -- you can do it, but you need to be running a proper web server (either the built-in Apache on the Mac, or an instance of MAMP, etc.). You can set the local URL and local path, and Coda's preview tool will then correctly display absolute links. Although, at that point, why not just view the pages in a real browser, with real debugging tools, etc.

 

[willow1]

Thank you. I've installed MAMP and got it working well, but the trouble is I have several domains I look after all in a folder called Design.

If I set the MAMP Apache Document Root to the Design folder, the leading '/' in the HTML takes Coda back to this root. The only way round is to set the MAMP Root each time to the correct sub folder in the Design bin, but with multiple sites that's a bit of a nightmare ....

Oh well!!

 

[bpaluzzi]

Thank you. I've installed MAMP and got it working well, but the trouble is I have several domains I look after all in a folder called Design.

If I set the MAMP Apache Document Root to the Design folder, the leading '/' in the HTML takes Coda back to this root. The only way round is to set the MAMP Root each time to the correct sub folder in the Design bin, but with multiple sites that's a bit of a nightmare ....

Oh well!!

You can set up virtual hosts on your machine to point to different sites -- you can have site1.com.local pointing to /Design/site1, site2.com.local pointing to /Design/site2.

Then when you visit site1.com.local in your browser (or set that to the "Local URL" in Coda), the "/" will only take you to the site's root, in that case /Design/site1.

To do this, you'll need to do two things:

1 - set up the Virtual Hosts in your httpd.conf file.
This file is located in /Applications/MAMP/conf/apache

At the end of this file, add something like this:
#
# Use name-based virtual hosting.
#

NameVirtualHost *

#add one of the following blocks for each site you'd like to run
<VirtualHost *>
ServerName site1.com.local
DocumentRoot /Users/<yourusername>/Documents/Design/site1/
</VirtualHost>



2. Add the URLs to your hosts file
This file is located at /private/etc
You'll need to edit this from inside of terminal:
sudo nano /private/etc/hosts
enter your password, then you'll be entered into the nano text editor.
Add the following line for each site to add:
127.0.0.1 site1.com.local

Save the file with ctrl-o (then return)
Exit nano with ctrl-x

Restart MAMP, and you should be all set to go.

 

[willow1]

Thank you - very detailed - I'll give it a go! Cheers!

 

[design-is]

Thanks bpaluzzi, I'll be giving that a go too