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>
Related
I have a working edit view to which I'm trying to add CKEditor. I've downloaded the CKEditor folder/files and placed them in my_app/vendor/assets/ckeditor/. I'm using Rails 4 and this folder is included in the asset pipeline. To application.js I've added //= require ckeditor.js and to application.css #import "contents";.
In my edit view I have (I'd like to use the inline option):
<%= f.text_area :page, contenteditable: 'true' %>
<script>
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'image_page' );
</script>
Problem: Now when loading the edit view, the text field is not displayed as an editable field but just as plain text. There's no way to edit this text and no sign of CKEditor. Any idea what I'm doing wrong?
The page's source code that is being generated, includes:
<textarea contenteditable="true" name="image[page]" id="image_page">
Arbor cubo vel.
</textarea>
<script>
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'image_page' );
</script>
Update: I got it working by moving the CKEditor files from the vendor folder to the public folder. Could someone perhaps confirm whether or not CKEditor is compatible with the asset pipeline?
I would prefer to place it in the vendor folder if anyway possible. This old post as well as this one refer to something similar (if I place <% var CKEDITOR_BASEPATH = '/ckeditor/'; %> as a header line in application.html.erb my app crashes with the error dynamic constant assignment '.freeze). Could someone with more experience with CKEditor provide a more definitive answer than these old posts?
Try adding the ckeditor assets under either vendor/assets/javascripts for the JavaScript files and vendor/assets/stylesheets for the CSS files (separate the ckeditor assets among those folders)
The whenever an asset is referring to another asset use the asset-url helper instead of url so that this asset is served through the asset pipeline
You also need to include all the assets that you'll put in vendor.... folders in the asset pipeline by //require or import
On a side not you can use the ckeditor gem https://github.com/galetahub/ckeditor it will save you a lot of time also it handles some features out of the box like images upload and gallery of ckeditor
May be the script is executing before the textarea is fully loaded on the DOM. Try to use a post load wrapper to your script like the jquery's:
$(function(){
// ... your code
})
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/
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" />
Chrome DevTools Autosave doesn’t work with Rails Asset Pipeline. The culprit of the problem is in the assets URLs — I cannot decipher the actual file path by its URL. For example, /assets/application.css may refer to either app/assets/stylesheets/application.css, lib/assets/stylesheets/application.css,
or vendor/assets/stylesheets/application.css.
I wonder, how do I change assets URL to one of the following:
/app/assets/stylesheets/application.css (matches exactly actual file path, perfect solution)
/assets/application.css?source_url=app/assets/stylesheets/application.css (introduces source_url query parameter)
I would appreciate any help writing Rails plugin for that.
Update: I filled an issue to sprockets.
I'll try to get the ball rolling, but I'd have to do a lot more to verify or provide a better answer, so I'll mark this answer community wiki. That way others can answer below and or edit this post.
I've had to set up asset pipelining for Sinatra, and generally speaking, in the latest versions of Sprockets (which is used to provide the asset pipelining in Rails) the Sprockets::Asset class has methods to obtain the path and logical path.
I believe Rails uses the asset_path helper to generate the public facing url from the Sprockets class. This in turn appears to use the AssetPaths#compute_public_path instance method. A good first step would be to modify these parts of the code to add a source_url parameter based on your parsing of the source.pathname. This is assuming that source is an instance of Sprockets::Asset in some form or another.
I'm not quite sure how you expect the source to come from but it's already provided by ActionView::Helpers::AssetTagHelper
http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html
image_tag("rails.png")
# => <img alt="Rails" src="http://assets.example.com/images/rails.png?1230601161" />
stylesheet_link_tag("application")
# => <link href="http://assets.example.com/stylesheets/application.css?1232285206" media="screen" rel="stylesheet" type="text/css" />
I was working on overriding boiler plate 404 Rails page in RAIlS_ROOT/public. This is Rails 3.1.1 hosted on Pasenger. I noticed that paths in the html document loose context on routes inside a controller resource path in a production environment. This is probably something basic, but wanted to put it out there.
I have
/public /public/404.html
/public/error_stylesheet/styles.css
/public/error_images/image.jpg
404.html has references to the resources
<link href="error_stylesheets/styles.css" rel="stylesheet" type="text/css" />
<img src="error_images/errorpageheader.jpg">
For example,
If I request http://app/wrongurlname
My 404.html loads with resources err_stylesheets and err_images folders are seen and retrieved.
If I request
http://app/controller/wrong or
//app/wrong/wrong
The 404 page loads, but can't see the resources.
I was probably not interested in overriding behavior of ApplicationController or routing which seems like it would be necessary to serve erb pages. I'm not sure if serving
Maybe, you should try this kind of paths:
<link href="/error_stylesheets/styles.css" rel="stylesheet" type="text/css" />
<img src="/error_images/errorpageheader.jpg">
Without first slash you have relative paths, but with slash you've got an absolute path you need.