I have a rails 4 app that properly uses config.action_controller.asset_host = "xxxxxxx.cdn.com" to render asset urls to point to a CDN.
The app also has a documentation site that uses jekyllrb. Now I want to be able to reference assets from a CDN also but no luck so far.
I'm not able to find documentation about how to setup CDN host for doc site.
I'm trying stuff like this:
<img type="image/svg+xml" src="{{ '/docs/images/' | append: page.logo_image | asset_url}}">
but no luck, I just get the image url but no cdn stuff. All that I found are Shoppify links (I think also use Liquid)
Any hint is more than welcome!
thanks
Found this:
Jekyll configuration for CloudFront To make it easy to serve my assets
from CloudFront, I set up a custom Liquid filter:
module Jekyll
module AssetFilter
def cdn(input)
"#{#context.registers[:site].config['cdn']}/#{input}"
end
end
end
Liquid::Template.register_filter(Jekyll::AssetFilter)
Save this in _plugins/cdn.rb off the root of your Jekyll site’s directory.
Then I added a CDN entry to my _config.yml file. If I comment this line out, my
assets will be served off of S3 (or localhost if I’m running Jekyll locally).
cdn: http://cdn.maxmasnick.com
Whenever I want an asset to be served by the CDN, I pass it through this Liquid filter. For example, in my layout file I have:
<link rel="stylesheet" href="{{ "assets/css/frameless.css" | cdn }}" />
Source:
http://www.maxmasnick.com/2012/01/21/jekyll_s3_cloudfront/
Related
When I run rails in production mode , I put the default url of avatar in assets/images and made it like this :
"/assets/" + [version_name, "image.jpeg"].compact.join('_')
it works perfevtly in development mode but in production it doesn't and I don't know why also I have pre compiled assets but still so hope you help .
If the path of your asset is:
/assets/v1_image.png
Then it will perfectly work fine in development if you used something like:
<img src="/assets/v1_image.png" />
Because in development assets are not precompiled by Rails asset pipeline.
But in production the asset pipeline will compile your assets and stamp it with some md5hash so your file name will end-up to be like:
/assets/v1_image-aee4be71f1288037ae78b997df388332edfd246471b533dcedaa8f9fe156442b.png
So the correct way to use it should be something like:
<img src="/assets/v1_image-aee4be71f1288037ae78b997df388332edfd246471b533dcedaa8f9fe156442b.png" />
but still this md5 hash will change from a deployment to another so the rails way to handle this is to use image_path, image_url or image_tag helpers from ActionView::Helpers::AssetUrlHelper to generate the correct path for you as follows:
image_tag('v1_image.png') will return:
<img src="/assets/v1_image-aee4be71f1288037ae78b997df388332edfd246471b533dcedaa8f9fe156442b.png" />
image_path('v1_image.png') will return:
/assets/v1_image-aee4be71f1288037ae78b997df388332edfd246471b533dcedaa8f9fe156442b.png
image_url('v1_image.png') will return:
http://www.example.com/assets/v1_image-aee4be71f1288037ae78b997df388332edfd246471b533dcedaa8f9fe156442b.png
I hope this is clear enough and can fix your problem :)
The problem could be due to /assets interfering with rails asset pipeline.
Please post your code for a better understanding of the question
I'm using Rails 4.2.3 and am trying to customize the 404 error page in public/404.html. How can I include images from the asset pipeline?
There's an excellent post how to build dynamic custom error pages. However, as described there, it requires a whole lot of changes to settings that I, as a beginner, am not ready to take. All I want to do is in my 404 page to include 2 images that are in the asset pipeline. Is there an easy way to do this?
If you want your error page to use images from the asset pipeline, then you have two options:
Use dynamic error pages (I've written a tutorial here).
Monkey patch the asset pipeline to allow non-fingerprinted assets.
Since you are ruling out option #1 for now, I think the monkey patch is the way to go. Install the non-stupid-digest-assets gem in your app. This will patch the asset pipeline so that it produces non-fingerprinted assets (in addition to the fingerprinted ones).
# Gemfile
gem "non-stupid-digest-assets"
And of course, don't forget:
$ bundle install
Then in your 404.html, just refer to the asset as if it were a static file, like this:
<img src="/assets/my-image.png">
This assumes the actual image is stored here in your project:
app/assets/images/my-image.png
Keep in mind, that content of public folder is visible to anyone.
There for, following the convention, I would create assets folder (if you don't have it already), then images and stylesheets.
And create regular html page
- app
...
- public
- 404.html
- images
- image1.jpg
- image2.jpg
- stylesheets
- style.css
Then in your 404.html you will reference it like so:
<img src="./assets/images/image1.jpg" alt=""/>
Add the images to the public folder.
Use root relative path to the images on the public 404/500 html pages.
<img src="/my-logo.png"/>
In a new application, routes that are not found are directed to the static html page found in public/404.html. As you have found this is a .html not .html.erb file which means you have to do fancy stuff to access your asset pipeline.
If you don't want to go through the trouble of creating a dynamic page, the easiest way is to copy* the two images from your asset pipeline into public/assets (or a sub-directory) and then include them with:
<img src="assets/image.jpg">
*You may also be able to use a symbolic link but it may cause problems depending on how your production server is set up.
in your 404.html add...
<head>
<link data-turbolinks-track="true" href="/assets/application.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application.js"></script>
</head>
<body>
<img src="simple.gif">
</body>
Um trying to load a javascript file as follows to my html.erb file
<script src="/public/javascripts/test.js" type="text/javascript" />
its available on the public folder and its in the root directory
root/public/javascript
but it giving me an error saying
"NetworkError: 404 Not Found - http://0.0.0.0:3000/public/javascripts/test.js"
what could possibly wrong ? is there a different way to include a javascipt file in rails ?
If the javascript file is in any of the asset folders (assets, vendor, bundle) for Rails 3.x) you can add the script to your html.erb file by adding the following:
<%= javascript_include_tag('test.js') %>
You don't use public. Public is the implied root of the server.
The server will look for a file in public, then try to route it through your router if it doesn't find a match.
You also may want to consider using the javascript_include_tag helper if you are using the asset pipeline.
Rails defaults to using the asset pipeline, so custom js files need to go into the app/assets/javascript directory. Than you wouldn't even need to load the file in your view.
but as to your question.
To serve the files from the public directory, you will need to enable a config setting
config.serve_static_assets = true
You'd commonly put this in one of you environment config files.
To server files from public directory do above setting and hit
config.serve_static_assets = true
<script src="/javascripts/test.js" type="text/javascript" />
I have a question about using asset_sync and a Heroku CDN. In this article, it says
Make sure you’re using the Rails AssetTagHelper methods (like
image_tag). This will ensure all of your assets will reference the new
asset host.
Does that mean any plain html <img> tags or refs in my app won't work? Or maybe it's just to warn against tags with an absolute URL?
EDIT: I know I can and should use image_tag and image_path in views or css. What I'm asking is, do I HAVE to?
They will work but you will need to point it manually to where you are syncing your assets to, some bucket on Amazon S3. Not really recommended unless your assets will hardly ever change.
You configure your asset path in your production.rb config like so:
config.action_controller.asset_host = "http://assets.domain.com"
Then whenever you reference asset_path it will point to the asset on the host defined in your environment config.
Perhaps a solution (without understanding your exact problem) would be to do something like this:
<img src="<%= asset_path("image.png") %>" />
You should to use
<%= image_path("logo.png") %>
instead of
<img src="<%= asset_path("image.png") %>" />
You can more details about this helper method here. Also As specified by andrew you need to specify asset_host in you config file. Here is a small blogpost for the same
Also:
If you want to pull css background icons/images from amazon s3 then use:
background-image: image_url("icon.png"); // it requires scss extension ie saas and also you must has saas rails gem included.
I began moving all the assets in my site to S3 and ran into a problem with my asset path.
There's a WYSIWYG editor on my site that includes images by absolute path, so when you add an image, it doesn't use the rails image_tag helper but rather adds an image like this:
<img src="/system/images/image_1.jpg" />
The problem is that in production the URL /system/images/image_1.jpg leads to a non-existant file.
Naturally, two solutions are to 1) replace the URL dynamically (gsub) when it's called and 2) to loop through the database and replace the urls.
A better solution, however, would be to rewrite the /system/images/image_1.jpg url to point to S3. How do I do that?
Thanks!