I've recently had a trouble making Galleria plugin work with Rails 4 Pipeline and it took me a while to figure out how to make it work, so I wanted to share the solution in case somebody has the similar problem.
1) After downloading the plugin, put galleria-1.3.3.js ( it's the current version on the day I write it ) and galleria.classic.js ( or other style js file ) to vendor/assets/javascripts
2) Put galleria.classic.css ( or other theme stylesheet) to vendor/assets/stylesheets
3)Add //= require galleria-1.3.3 and //= require galleria.classic to your application.js file and *= require galleria.classic to application.css file
4) Asset pipeline adds fingerprints to the images and that makes it difficult to access them via usual css, so it's needed to add 'scss' to your galleria stylesheet, like this galleria.classic.css.scss and change url(classic-map.png) to asset_url("classic-map.png");and the same with the second image.
5)Open galleria.classic.js file and find there css:"galleria.classic.css" or something like that, and change it to css: false
6) Now you just need to add Galleria.run('#galleria'); or something different for other elements in some js file` and that should work :)
PS I am a noob in Rails and might have made some foolish mistakes, but I hope this will be helpful for anybody :)
I've just used this in Rails 4.1 as well with Galleria version 1.3.5. Copy the files from the main galleria folder into the various parts. Note that I'm using the classic/default (free) theme.
# app/assets/images
classic-loader.gif
classic-map.png
# app/assets/javascripts
galleria-1.3.5.js
galleria.classic.js
# app/assets/stylesheets (rename with .scss extension)
galleria.classic.css.scss
Open up galleria.classic.js and edit the line css: '...' to be css: false (around line 17 if you don't alter the code).
That's all I had to do in order to get it working with Rails 4. I played around with placing the files in the vendor/assets folders, but that became a nightmare fairly quickly. I found the above solution to be the simplest/cleanest.
Update: 2016-02-02
I'm still using this same setup with a Ruby 2.2.3, Rails 4.2.4, Galleria 1.4.2 setup.
Make sure in your galleria.classic.scss stylesheet you use the image-url("classic-map.png") helpers. No problems with this current setup.
Thank you this was absolutely amazing and exactly what I needed (I wish I'd found this before the 18 hours of hair pulling trying to get this to freaking work)!
I'll add some more things that might be helpful to whomever:
1) I had to change to galleria.css.scss.erb, so that it would interpolate the class-loader like this: background: url(<%= asset_path "/galleria/classic-loader.gif" %>) (not sure why, but the asset_url didn't work for me)
2) Related, I also had to take the classic-map and loader images and put them in app/assets/images
3) Per Galleria, the files I moved were the min.js files, not regular .js
4) In the header of the view, I added:
<script src="<%= asset_path "/galleria-1.3.5.min.js" %>" ></script>
<script src="<%= asset_path "/galleria.flickr.min.js" %>" ></script>
<script src="<%= asset_path "/galleria.classic.min.js" %>" ></script>
5) In the script on each view to load Galleria, I modified their instructions like such:
Galleria.loadTheme("<%= asset_path "/galleria.classic.min.js" %>");
Related
I would like to inline some CSS within my html. I have done this in the past with Sprockets putting something like that in my layouts/application.html.erb
<style>
<%= Rails.application.assets["application.css"].to_s.html_safe %>
</style>
Now I would like to do the same but with CSS assets bundled by Webpacker.
I am able to get the path of the file with Webpacker.manifest.lookup("application.css"), but I am missing the latest part to get the content and embed it into the layout
The rationale behind this:
To improve page speed I want to embed my critical CSS into the header of the HTML. Using Webpack and PostCss tools (PurgeCss). I am able to get a very compact very of my CSS for the above the fold of my home page.
The rest of the CSS is loading asynchronously with the usual packs helpers
Update 1
Here is the link to the article I wrote thanks to the answer.
https://dev.to/adrienpoly/critical-css-with-rails-and-webpacker-sprocketsless-part-1-2bck
Let's consider having a line in app/javascript/packs/application.js
import `../css/application.css'
and a file app/javascript/css/application.css with some useful content.
Then you spell
<style>
<%= File.read(File.join(Rails.root, 'public', Webpacker.manifest.lookup('application.css'))).html_safe %>
</style>
and it simply works.
Don't forget:
To set extract_css: true in config/webpacker.yml
Exec rake webpacker:compile after changing these .css and/or .js files. Or use webpack-dev-server for a things like Hot Module Replacement
Turn on (though this is default setting for development) config.public_file_server.enabled = true (as #Adrien mentioned in comments) for serving .js resources by puma
I am trying to use a plugin called Shuffletext to give my text a shuffling effect that iterates through different strings. this is the code for it (just have it in the .erb file while trying to get it how to work cause its easier)
<div id="wrapper"></div>
<script type="text/javascript">
$('#wrapper').ShuffleText([
'Hello world !',
"I'm a jquery plugin",
"I like to <strong>shuffle text</strong> !"
],{loop: true, delay: 5000, shuffleSpeed: 50});
</script>
In a simple folder that just has a .html file and the plugin file it works fine, but when I put it into ruby it throws me this error
home:24 Uncaught TypeError: $(...).ShuffleText is not a function
at home:24
I've been trying for a few hours to try and fix this and I am stumped, any help is really appreciated, here is a link to the plugin if it helps
https://github.com/Nyl000/ShuffleText
I suppose, you didn't plug in this library correctly. I didn't find a gem that integrates this plugin into Rails asset pipeline, so you should put plugin file into vendor/assets/javascripts directory. Just copy shuffletext.jquery.js to this folder.
Then you can either add //= require shuffletext.jquery.js to manifest file (usually it's app/assets/javascripts/application.js) after jQuery, or manually add javascript_include_tag 'shuffletext.jquery' to required pages.
If you decided to require plugin in manifest, you can use it on every page where the manifest is plugged. Usually it is plugged in layout, so all pages that use this layout will have it.
If you decided to use javascript_include_tag, you also should add Rails.application.config.assets.precompile += %w( shuffletext.jquery.js ) to your config/initializers/assets.rb file. In this case you will get your plugin only on those pages where you have specified javascript_include_tag.
this post has half the process for using font awesome in a project. The steps are:
download font-awesome zip and extract into grails-app/assets/fonts dir.
modify build.gradle to add includes = ["fonts/*"] under assets
?
Use the font in your code, e.g.
< i class="fa fa-camera-retro fa-4x"> fa-4x
The question is, what is step 3? I assume there are two options:
put something like < link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> at the top of your gsp page, but what is the path? I tried guessing, e.g. href="/assets/fonts/css/font-awesome.min.css" but this does not work even after restart.
Put something in application.css. I have no idea what this could be, as it currently only refers to files in its own directory. I even read the manual, but could not figure it out. The manual mentions "*= require font-awesome" but presumably this requires more code somewhere as it doesn't work.
Any suggestions? Grails certainly makes some very hard things easy, but it also makes some easy things hard.
You may have to change the directory references inside the fontawesome.css file. Try for a replace of all the references to ../fonts/fontawesome for fontawesome and check if it works.
This assumes having the font-awesome.css file inside the assets/stylesheets directory and the fonts inside the fonts directory. Then, in build.gradle you should have something like:
assets {
minifyJs = true
minifyCss = true
includes = ["fonts/*"]
}
In your layout GSP file's (main.gsp) <head> you should have something like:
<asset:stylesheet src="application.css"/>
Finally, in your application.css you should have something like:
*= require font-awesome
The require should have the same name as the CSS file without the .css extension. So, if you have the minified version of font-awesome it should look like this instead:
*= require font-awesome.min
Note that by doing that you don't need to add the CSS include to GSP pages.
Alternatively you can just generate an embedding code on the website of fontawesome (http://fontawesome.io/get-started/) and add it to your main.gsp file
<script src="https://use.fontawesome.com/xxxxxxxxxx.js"></script>
I got the answer to step number 3 from here:
The answer is to add the following to application.css
"*= require css/font-awesome"
Surprisingly, this will pull on font-awesome.min.css from the fonts/css/ dir where the files are exploded from the zip distribution.
Jordi and klocker also supplied valid solutions, but the above one is what I was looking for.
How to reference the assets directly via a link is still a mystery.
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'm a bit confused as to where to put a jQuery framework like Galleria in Rails 3.1's new Asset Pipeline?
I know it, technically, should go into /vendors/assets/javascripts but, it is my understanding that, the Galleria folder with the jQuery & themes wants to be in root (/galleria) of the live site in order to work correctly.
Also, while we're at it, where to put the following script so it will appear only on the page(s) with a gallery?
<script>
$('#gallery').galleria({
width:500,
height:500
});
</script>
Edit: Surprised there's no response!?! Maybe Galleria isn't that popular? These are the files I'm trying to load. They are bundled like this though I could easily move them:
vendor/
assets/
javascripts/
galleria-1.2.5.js
galleria-1.2.5.min.js
galleria/
themes/
classic/
classic-loader.gif
classic-map.png
galleria.classic.css
galleria.classic.js
galleria.classic.min.js
i thought Sprockets require_tree . would load everything in app/assets, lib/assets and vendor/assets?!?
I had the same problem, and it took a while to get working. Initially, it would work fine on development, but when we moved to production, Galleria silently failed, due to the asset filenames now having "fingerprints". This also seems to be an issue with jQuery UI themes, and many other such scripts.
Of course, you could just go back to the old way of doing things and throw everything in "public", but we would like the advantage of automatically merging all css/js files, and doing things the rails way.
This is how I got it working:
vendor/
assets/
images/
classic-loader.gif
classic-map.gif
javascripts/
galleria-1.2.5.js
galleria.classic.js
stylesheets
galleria.classic.css.scss
Rename your galleria.classic.css file to galleria.classic.css.scss. Then replace the image references, like so (I had two):
url("classic-loader.gif") becomes image-url("classic-loader.gif")
UPDATE: It looks like you don't need to do this in Rails 3.1.1. Just rename the file to .css.scss and rails will automatically preprocess the url() calls for you.
In your app/assets/javascripts/application.js file, make sure you have the lines
//= require galleria-1.2.5
//= require galleria.classic
//= require_tree .
In you app/assets/stylesheets/application.css file, make sure you have the lines
*= require galleria.classic
*= require_tree .
Finally, Galleria seems to have some fancy non-standard css loading built in. This is what was preventing Galleria from loading on our production website. Since we have already included the stylesheet, we want to disable this behavior. Simply open up galleria.classic.js (or your Galleria theme javascript file), and replace the line:
css: 'galleria.classic.css',
with:
css: false,
This will tell Galleria not to try loading the stylesheet.
One more thing - when trying to compile these assets, I ran into what is apparently a bug in Rails 3.1.0. When I ran rake assets:precompile, I got errors like:
$ bundle exec rake assets:precompile
rake aborted!
classic-loader.gif isn't precompiled
(in /vendor/assets/stylesheets/galleria.classic.css.scss)
Long story short, you need to set this line in config/environments/production.rb:
config.assets.compile = true
This shouldn't be necessary once 3.1.1 is released.
I like Arjen's suggestion, though I think vendor/assets/libs is more appropriate. Here's my setup:
In config/application.rb
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/vendor/assets/libs"
In app/assets/javascripts/application.js
//= require galleria/galleria-1.2.6.min.js
To initialize:
Galleria.loadTheme('assets/galleria/themes/classic/galleria.classic.min.js');
$('#gallery').galleria();
Notice how the path passed to loadTheme() begins with 'assets'.
I like this setup because it keeps the galleria folder intact. Also, it concatenates galleria-1.2.6.min.js onto my main js file (one less http request).
I've also stumbled upon this problem. Dividing up an existing library so it fits into the current javascripts/stylesheets structure is a bit of a hassle. Therefor you can add an extra path to your application.rb file to load assets from, like this:
# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/libs"
Create a 'libs' folder under app/assets, copy the galleria library to this folder and add this to your application layout file:
<%= javascript_include_tag 'galleria/galleria-1.2.4.min.js' %>
<%= javascript_include_tag 'galleria/themes/classic/galleria.classic.min.js' %>
You could also bundle up the galleria code by requiring the js files, but that's up to you.