what's the best approach for making reference for assets, for nested urls.
e.g. if in my html I refer to image this way: , it does not work when the url is myapp/admin/edit/1 or any custom url.
Use the asset tag helpers, image_tag and so on:
http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html
Wherever your current path is should make no difference, as accessing assets should be done from root, e.g. /images/whatever.jpg, /stylesheets/whatever.css
The asset tag helpers will make this transparent, and additionally, they will transform paths for you if you ever use an asset host other than your web server. For example.
# if you define a different asset_host, Rails will handle it.
ActionController::Base.asset_host = "assets.example.com"
image_tag("rails.png")
# => <img alt="Rails" src="http://assets.example.com/images/rails.png?1230601161" />
Related
So, I have this Angular code base where both ./assets/... and /assets/.... paths are used interchangeably in HTML (<img src='...'>) and CSS (background: url(...)) files.
The issue is, after exporting the app with --base-href=http://localhost/path/, some resources (images) resolve with http://localhost/path/assets/... while the other resolve with http://localhost/assets/... (resolving to the top directory on the server). I am unable to pin-point this behaviour.
I can surely put a dot in front of the resources with the pattern /assets/..., but how come they are working fine in the first place i.e. resolving correctly to http://localhost/path/assets/...? The behaviour is ambiguous. Any ideas?
i gonna explain it, but I recommend you to take a look at the documentation of angular.io
to define the base href:
Click Here
"./assets" -> Relative URL, in angular always is the Base Href
"/assets" -> It's a absolute url Trying to get from the root of the domain
Relative -> mydomain.com/my/app/assets
Absolute -> mydomain.com/assets
So the first thing I want to do with a new Polymer app is deploy to a directory on an existing website. The only thing that seems to work is deploying to root /.
Let's take the Shop example. I do:
polymer init and choose shop
polymer build
Robocopy.exe .\build\bundled\ C:\inetpub\wwwroot\p\ /MIR
start http://localhost/p/
You see I'm on Windows. I assume that using IIS is irrelevant, since I'm relying on the server just to serve static content.
What do I need to edit in the shop template to make it work at the url http://localhost/p/?
The polymer-cli created apps came with assumption of serving from root level '/'. In generated project index.html you will find two comments
<!--
The `<base>` tag below is present to support two advanced deployment options:
1) Differential serving. 2) Serving from a non-root path.
Instead of manually editing the `<base>` tag yourself, you should generally either:
a) Add a `basePath` property to the build configuration in your `polymer.json`.
b) Use the `--base-path` command-line option for `polymer build`.
Note: If you intend to serve from a non-root path, see [polymer-root-path] below.
-->
<base href="/">
<!-- ... -->
<script>
/**
* [polymer-root-path]
*
* By default, we set `Polymer.rootPath` to the server root path (`/`).
* Leave this line unchanged if you intend to serve your app from the root
* path (e.g., with URLs like `my.domain/` and `my.domain/view1`).
*
* If you intend to serve your app from a non-root path (e.g., with URLs
* like `my.domain/my-app/` and `my.domain/my-app/view1`), edit this line
* to indicate the path from which you'll be serving, including leading
* and trailing slashes (e.g., `/my-app/`).
*/
window.Polymer = {rootPath: '/'};
// ...
</script>
if in this index.html file you comment out base tag and set window.Polymer rootPath to something like '/0/polymer-test/build/es5-bundled/' you will be able to navigate in app on http://localhost/0/polymer-test/build/es5-bundled/
The Polymer shop-app assumes it will be deployed on the server root. Therefore it has all of the links and routes hard-coded to that assumption.
This means, that you will have to change all of the following:
all absolute links between the pages,
all pattern parameters in app-route elements (this is not necessary when useHashAsPath = true),
all absolute imports, including the lazy ones via importHref,
update the absolute locations within the service worker (use instructions from here) and
all references to static content (CSS, images, JS files)
I'm guessing your main goal isn't porting the shop-app, but rather future proofing your own app so that it can also be deployed to non-root locations on the server.
For this, I will mention two ways, depending on which value of useHashAsPath you use for the app-location element. This setting defaults to false, which means that you must use full URLs, instead of the hashbang equivalents.
Scenario 1: useHashAsPath = true
This is the easiest of both approaches, since you simply treat all URLs between the pages as absolute links. For example: Tabs.
The next step is to reference all static content and imports via relative links.
The last step is to update your service worker as shown here.
Scenario 2: useHashAsPath = false
If you dislike the hashbang URLs, go for this scenario. As you can figure out, this approach is a bit more difficult, but still manageable (especially when you start from scratch).
Firstly, you should still use absolute links, since relative links between a complex routing scheme can quickly cause problems (e.g. when not all pages are on the same directory level).
But since absolute links are a no-go, you will have to add some additional pre-processing upon build time. The point is to prefix all links with, say __ROOT__, and then replace all of those values with your actual document root. The links would then look like something this:
Some page
And you would use gulp-replace or something similar to replace __ROOT_ with /your-document-root across all of your source files in order to produce something like this:
Some page
At this point, you've got your links fixed. But this is only part of the problem. You must also apply the same fix to all of your app-route elements. For example:
<app-route pattern="__ROOT__/some/page" [...]></app-route> // Other parameters ommited
As with other resources, such as images and CSS files, you can also include them as absolute links and add the __ROOT__ prefix, but I would advise against this and would rather use relative paths.
The last step is to update your service worker as shown here.
Read more about routing: https://www.polymer-project.org/1.0/blog/routing
I am busy building a static site using middleman, I have finally got it to serve correctly, only when i run build all my images will not show up. After a little while i think i know whats going on.
My config looks like this:
activate :livereload
set :relative_links, true
set :partials_dir, 'partials'
set :css_dir, 'stylesheets'
set :js_dir, 'javascripts'
set :images_dir, 'images'
set :build_dir, 'public_html'
# Build-specific configuration
configure :build do
# For example, change the Compass output style for deployment
activate :minify_css
# Minify Javascript on build
activate :minify_javascript
# Enable cache buster
# activate :asset_hash
# Use relative URLs
activate :relative_assets
# Or use a different image path
# set :http_prefix, "/images/"
end
Within my partials that i reference my images like this (note: i am using haml):
%ul.features
%li.third
%p
%img{:src=>"../images/icon1.png", :class=>"left"}
%span 2 days, 20 speakers, single track
I also have global partials that are used within every file pretty much that are now one level deeper than the partials folder.
When i run middleman build it compiles all my partials to html / css / js found within the public_html folder at the root level, but all my images are missing, upon inspecting the page i see that the images are pointing to a folder one level higher than they should be.
<div class='wrapper'>
<a name='about'></a>
<h1>
<a alt='RubyFuza Home' href='/'>
<img src='../images/logo.png'>
Below is what the directory looks like:
You will see that the source partials need to traverse up one level to get to the image folder hence the ../ before the path reference, however the files that are built using middleman build only need to look in the same directory level.
Is there a way to configure middleman to look for images within source at x level, but then when you have built to find the images at y level? and then just reference the images in the html like %img{:src=>"icon1.png"} rather than provide the whole path?
Try the image tag helper:
<%= image_tag 'logo.svg', :alt => 'My app', :class => "logo" %>
then the image file goes under source/images and in the config.rb you put set :images_dir, 'images'
I'm building a Rails app, but I'm using a plugin in which I have to render my images using only html.
Since I haven't deployed yet, all my images are in RAILS_ROOT/app/assets/images/, so to render an image I have to write the following code:
<img src="/assets/image.jpg">
But when I'm ready to deploy to the web and I perform a precompile, all my images are supposedly going to be moved to my public folder. Will the html still work to link to the image, or will I have to change to link to a different path?
The plugin I'm using is Typeahead:
application.html.erb*
<script type="text/javascript">
//....
$('#typeahead').typeahead(null, {
maxLength: 5,
displayKey: function(thing) {
return "<div class='typeahead'><img src='" + thing.image_url + "'></div>";
},
source: bloodhound.ttAdapter(),
});
</script>
things_controller.rb
def typeahead
#render json: Thing.where(name: params[:query])
q = params[:query]
render json: Thing.where('name LIKE ?', "%#{q}%")
end
*Thing.image_tag is currently set to "/assets/[image.jpg]", except for each thing it's adjusted with the proper file name.
Not only are they going to be in the public folder, but they'll be renamed to include the fingerprint.
You must use the Rails helpers for all assets, see how to here and read the rest of the guide while you're at it :)
I think you should use non-stupid-digest-assets gem as it copies all your assets(mentioned in assets precompile list) in public/assets folder and then you need not to change your code before/after compiling.To install, you just need to add it into your Gemfile.
gem 'non-stupid-digest-assets'
I hope it might help you.
Joe, my suggestion would be to create a directory in your public folder to house your images, instead us using the app/assets directory. The public folder will allow the assets to not be altered by the rails pipeline, and you can link to them reliably using any external services that need the images.
As stated in RailsGuides:
Assets can still be placed in the public hierarchy. Any assets under
public will be served as static files by the application or web server
when config.serve_static_files is set to true. You should use
app/assets for files that must undergo some pre-processing before they
are served.
So you would need to add this line in config/application.rb
config.serve_static_files = true
As described in Rails general configuration.
It looks like you're storing your image_url in your model, and that's not working because assets don't have fixed URLs in Rails. I would override the getter in your model to use the asset_path helper, so it translates the path when that attribute is read (e.g., when the JSON is generated).
Something like:
# thing.rb
[...]
def image_url
ActionController::Base.helpers.asset_path(read_attribute(:image_url))
end
[...]
Short answer, no.
But it isn't that big a deal to remedy. Just move the images you need to reference with html into your Public folder. Then you can simply reference them with this code:
<img src="/image_name.image_type">
and the html will link to the correct path, both before and after precompile. So you don't have to change any code before you deploy.
BTW: I assume image_tag and image_url are the same column and you just made a mistake in one of the two times you mentioned it. If that's the case, then don't forget to change it to simply "/[image.jpg]".
So there should be a very basic way to do this, but unfortunately I don't seem to be able to find it.
How can one set an Href link to point to the 'base website url' + the 'link', rather than adding the link to the current page.
I.e. if I'm at www.example.com/content1/
I want the search function to go to www.example.com/search/
and not www.example.com/content1/search
I could just specify "www.example.com/search/" but then if it page is deployed locally I end up with a bunch of links to non-existent pages or vice versa. How can I specify the The Base hosting URL using DJango (whichever the server is running, whether the hostname, the current server ip, localhost etc.).
The best way to do this is the name your urls and then use the url template tag. Example below:
First, name your views. Use something like:
urlpatterns = [
...
url(r'^search/$', views.search_view, name="search"),
...
]
In this example, you've got your url for your example.com/search/ view. It is named 'search', which can be used url template tags and using the reverse() function.
Next, in your template, use the url tag with your url name:
Search
You shouldn't need to add 'base website url' to your href, it is implied. Make sure href is prefixed with '/' to set and absolute path and no '/' for relative.
home
is the same as
home
and will work no matter which sub directory you are in
If you are on the homepage and you use the link:
sample
it will effectively equal:
sample
but that same link used on the page http://www.mywebsite.com/sample will equate to:
sample
using:
sample
Will always equate to the following no matter where on the site it is used:
sample
If you are using django consider using the url template tag as Alex suggested:
https://docs.djangoproject.com/en/dev/ref/templates/builtins/#url
Make the link point to /search.
Any link that starts with / is relative to the domain root (say, http://example.com/) whereas any other relative link is relative to the current URL.