On 8/20/07, Jordan, Brian <Brian.Jordan at intermarkgroup.com>
wrote:>
> Hi Jeff,
>
> Thanks for the quick response. Let me make sure I understand. Also let
> me explain my problem instead of asking for a solution and perhaps we can
> find a more elegant solution.
>
> With our setup a designer (HTML/CSS artsy type) gives me (I''m a
Rails
> developer) HTML, CSS, and sometimes Javascript files (usually if we get
> javascript it is common code like navigation) with all of the static
content
> for a site/project. I place the HTML in app/html/ in my Rails directory
> structure for my project, e.g. full path is /projects/myapp/app/html. I
> place the CSS in /projects/myapp/public/stylesheets. Likewise I place the
> images in /projects/myapp/public/images, and the javascript in
> /projects/myapp/public/javascripts/
>
> Of course the original HTML and CSS files from the designer have URLs like
> /stylesheets/x.css, /images/x.jpg, and /javascripts/x.js so I have to
modify
> the URLs so the designers can load them into a browser. I change the links
> for images, stylesheets, and javascripts to ../../../public/xxxxx before
> checking them in. It''s no big deal since find/replace is your
friend.
>
> The problem I am having is with external CSS with image URLs. One
> solution would be to move the HTML to the public directory of the project
so
> that it renders correctly in the browser and at runtime but that gets messy
> when you have numerous files and you need a script to remove the HTML at
> runtime so we don''t do this.
>
> The solution you are recommending seems to be to move the
> /projects/myapp/public/xxxxx directories to /projects/myapp/xxxxx and use
> auto copy to copy the files from /projects/myapp/xxxxx to
> /projects/myapp/public/xxxxx at runtime. Is this right?
>
> I thought there would be something more elegant. Our designers often use
> images for submit buttons, but I have an elegant solutions for that.
> Whenever I see type="image", value="submit" and
> src="../../../public/images/file.jpg" I just use a macro to add
> mv:attr":src => /images/file.jpg" and now the file works for
the designers
> in the browser and at runtime for me. Auto copy seems like it could be
> prone to failure if there is not enough space on the drive or the network
is
> flaky. It seems like we need an mv: tag to replace a CSS attribute.
>
> Am I missing something or is your solution the only one for this problem?
>
Thanks for providing some details, that always helps.
-To have MasterView rewrite images you can use the mv:image_tag.
-To rewrite css stylesheet links - mv:stylesheet_link
-And like you mentioned for other situations mv:attr can do some runtime
rewriting
The problem you mentioned with links in the css needing to be rewritten is a
little tricky since we don''t have anything currently that processes and
operates on the css files themselves, however with a little forethought the
problem goes away like so...
**If you organize things smartly you can use images in your css and have
them work properly at design time and runtime. The key here is to use a
relative path to the image which will match the relative path when running
on the server.
For instance:
If your CSS file foo.css lives in app/public/stylesheets/ and it references
an images ../images/bar.gif then things will work properly at runtime. In
your CSS files the url(''../images/bar.gif'') is relative to
where the
stylesheet lives, so if css is in public/stylesheets and image in
public/images since images is at same level the ../ gets us where we need to
be. At runtime the stylesheet is served from
http://servername/stylesheets/foo.css and the image is served via
http://servername/images/bar.gif again at the same level so the ../ will be
the correct relative path to the image from the css url. You don''t want
to
use absolute urls if you want things to be portable.
So if your main problem is getting the images to work properly from the css
in both design and runtime, using the ../ relative approach should be all
you need. You won''t need to do anything else special other than using
the
mv:link_tag, mv:stylesheet_link and mv:attr things you are already doing.
The image referenced in the css will just work via the nature of the
relative path.
As for the auto copy feature, it can be useful when you want to keep all of
your html, css, and images together in one tree to make it easy for
designers. For instance you may have a directory app/html where you keep the
template files, and underneath that you might have a css, scripts, and
images directories. This just makes it easy for the designer since
everything is under one tree app/html (app/html/css, app/html/images,
app/html/scripts) then the auto copy feature has MasterView copy things to
the public directories. This is also great if you were given a prototype web
application where everything was already in one tree or if you downloaded an
web design template (which are typically structured with html at root and
images, scripts, css as subdirectories). Without having to manually move
things around, MasterView could copy things for you. The location of where
this tree is at is totally configurable.
So hopefully all that makes sense. All you need to do is use a relative path
from your css file to the images, that will also work as relative path at
runtime. Placing css in public/stylesheets and images in public/images will
work great, just use url(''../images/bar.gif'') and you should
be all set.
If I am still missing something, just let me know, but I believe I
understand the situation you have described.
Blessings,
Jeff
--
Jeff Barczewski, MasterView core team
Inspired Horizons Ruby on Rails Training and Consultancy
http://inspiredhorizons.com/
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
http://rubyforge.org/pipermail/masterview-users/attachments/20070821/e707342a/attachment-0001.html