I'm trying to get fancybox (technically fancybox-rails) working in Rails 3.1. I started with the directions here ... https://github.com/hecticjeff/fancybox-rails and then after quite some time discovered that I needed to add
<%= javascript_include_tag :application %>
to get things working (as an aside, why is the new asset pipeline better than just putting a javascript file in a known directory and using a javascipt_include_tag?). Anyway, now I'm not quite sure what to do. First is the css file for fancybox. Is this included somehow already? Do I have to do something similar to the above for the asset pipeline (I believe it's supposed to handle css files also). Finally, here's what I'd like to have "lightboxed" ...
<% #image_files.each do |image_file_name| %>
<%=link_to(image_tag image_file_name, :class=>"fancybox", :size => "200x200") %>
<% end %>
I have some images (jpg) in a directory pointed to by the image_file_name. These are showing up fine, but I'd like to be able to click on them and get the light box effect. So ... what does my link_to/image_tag need to look like?
Am I missing anything else here?
------- Added information --------
I should not that I do have some javascript for this ...
$(document).ready(function(){
// $("a img.fancybox").fancybox({'type': 'image'});
a#single_image").fancybox({'type': 'image'});
// $("$("a:has(img)").fancybox();
});
trying a few different things here and none seem to do much. I also added the following in the html just to simplify things with the Rails stuff ...
<a class="single_image" href="/assets/card_images/birthday_cake.jpeg"><img src="/assets/card_images/birthday_cake.jpeg" alt=""/></a>
The image shows, but when I click on it, it just goes to a page showing the image. I also checked and it looks like the css is there based on this ...
puts Rails.application.assets['jquery.fancybox.css'].body
which gave me something that started with this ...
/*
* FancyBox - jQuery Plugin
* Simple and fancy lightbox alternative
*
* Examples and documentation at: http://fancybox.net
*
* Copyright (c) 2008 - 2010 Janis Skarnelis
* That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
*
* Version: 1.3.4 (11/11/2010)
* Requires: jQuery v1.3+
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
followed by a bunch of css. So I believe it's there.
So ... anyone have anything to try?
If you are using:
<a class="single_image" ....
then your script should be:
$(document).ready(function(){
$("a.single_image").fancybox({'type': 'image'});
});
but if with rails you are setting a different class ("fancybox" for instance) like:
<% #image_files.each do |image_file_name| %>
<%=link_to(image_tag image_file_name, :class=>"fancybox", :size => "200x200") %>
<% end %>
then the js script should match the selector's class:
$(document).ready(function(){
$("a.fancybox").fancybox({'type': 'image'});
});
I'll answer your aside first: "why is the new asset pipeline better than just putting a javascript file in a known directory and using a javascipt_include_tag?"
The Pipeline is parts of the Rails "fast by default" strategy. The old way of doing things - linking each file - resulted in multiple downloads and was slower than having just one file. The old way did not compress (minify) the content of the file, adding to download size (and page slowness).
The Pipeline combines content minification and compression with file concatenation to give you a single file for javascript and CSS for use in production. Added to this, the pipeline uses fingerprints in the filenames that are served. Have a read of the Rails asset pipeline guide, as this has a good explanation of why fingerprinting is useful.
Now on to your specific issue.
Fancybox works by attaching a click handler to the image links, and this drives the popup behaviour.
If you click on an image and it shows you full size image, this means that fancybox has not attached itself to the link.
I can see in your code that you are using the class "single_image" on your links. The Javascript snippet you have posted is expecting the class "fancybox". (as JFK has the other answer)
You'll need to change them to match.
The javascript snippet itself should be in the application.js file.
To get the CSS working for this you'll also need to include the application CSS into your layout:
stylesheet_link_tag "application", :media => "all"
javascript_include_tag "application"
Related
Unfortunately there's no details/summary element in the default CKEditor configuration of TYPO3 and I'm looking for a way to add it.
What I've been trying to do:
I searched and found a widget on https://ckeditor.com/cke4/addon/detail , but it's repository on GitHub has been archived and the widget does not work as expected. It requires 'api,widget' and this generates a JavaScript error:
[CKEDITOR.resourceManager.load] Resource name "api" was not found at "/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Contrib/plugins/api/plugin.js?t=K24B-4e13cc129f".
When removing this requirement for "api", there's an error regarding line 72
CKEDITOR.api.parser.add(item, el);.
Then I found a similar widget at GitHub , which looks like an older version of the former without requirement for "api".
It already looks quite good, but is still a bit buggy: the HTML structure is changed when saving and the summary is duplicated. When switching to the source code, the HTML structure specified in the template ...
<details><summary>Summary</summary><div class="details-content"></div></details>
… get's partially lost.
I'm not sure if the widgets are buggy or if the editor is limited by the integration into TYPO3 and I was also not able to combine the two in a way that would lead to a working solution.
Update (Jul 22):
I successfully modified the Creating a Simple CKEditor Widget (Part 1) example to create
a widget with the following HTML structure:
<div class="expander">
<p class="expander-title">Title</p>
<div class="expander-content"><p>Content...</p></div>
</div>
With the help of a small JavaScript snippet and some CSS it now behaves almost like a details-summary element, but is not quite as good in terms of SEO and accessibility.
If I replace the elements <div class="expander"> and <p class="expander-title"> with <details> and <summary> in the widget, it unfortunately doesn't work properly anymore and changes the structure when saving. For some reason the RTE treats them differently.
I have already manually added the following to the RTE configuration:
processing:
allowTags:
- details
- summary
allowTagsOutside:
- details
- summary
On the main page of every repository in GitHub or BitBucket it shows the Readme.md in a very pretty format.
Is there a way to make the same thing with ruby? I have already found some gems like Redcarpet, but it never looks pretty. I've followed this instructions for Redcarpet.
Edit:
After I tried Github's markup ruby gem, the same thing is happening.
What is shown is this:
And what I want is this:
And I'm sure it's not only css missing, because after 3 backquotes (```) I write the syntax like json or bash and in the first image it is written.
Edit2:
This code here:
renderer = Redcarpet::Render::HTML.new(prettify: true)
markdown = Redcarpet::Markdown.new(renderer, fenced_code_blocks: true)
html = markdown.render(source_text)
'<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>'+html
Generated this:
Github provides its own ruby gem to do so: https://github.com/github/markup.
You just need to install the right dependencies and you're good to go.
You need to enable a few nonstandard features.
Fenced code blocks
Fenced code blocks are nonstandard and are not enabled by default on most Markdown parsers (some older ones don't support them at all). According to Redcarpet's docs, you want to enable the fenced_code_blocks extension:
:fenced_code_blocks: parse fenced code blocks, PHP-Markdown style. Blocks delimited with 3 or more ~ or backticks will be considered as code, without the need to be indented. An optional language name may be added at the end of the opening fence for the code block.
Syntax Highlighting
Most Markdown parsers to not do syntax highlighting of code blocks. And those that do always do it as an option. Even then, you will still need to provide your own CSS styles to have the code blocks styled properly. As it turns out, Redcarpet does include support for a prettify option to the HTML renderer:
:prettify: add prettyprint classes to <code> tags for google-code-prettify.
You will need to get the Javascript and CSS from the google-code-prettify project to include in your pages.
Solution
In the end you'll need something like this:
renderer = Redcarpet::Render::HTML.new(prettify: true)
markdown = Redcarpet::Markdown.new(renderer, fenced_code_blocks: true)
html = markdown.render(source_text)
As #yoones said Github shares their way to do it but to be more precise they use the gem "commonmarker" for markdown. Though as far as I can tell this thing does not give the full formatted HTML file but only a piece that you insert into <body>. So you can do it like I did:
require "commonmarker"
puts <<~HEREDOC
<!DOCTYPE html>
<html>
<head>
<style>#{File.read "markdown.css"}</style>
</head>
<body class="markdown-body Box-body">
#{CommonMarker.render_html ARGF.read, %i{ DEFAULT UNSAFE }, %i{ table }}
</body>
</html>
HEREDOC
Where did I get the markdown.css? I just stole the CSS files from an arbitrary Github page with README rendered and applied UNCSS to it -- resulted in a 26kb file, you can find it in the same repo I just linked.
Why the table and UNSAFE? I need this to render an index.html for Github Pages because their markdown renderer can't newlines within table cells, etc. so instead of asking it to render my README.md I make the index.html myself.
I'm working on a project using Middleman. In one of the pages (videos.html.markdown.erb), I'd like to add partials working with both markdown and Middleman helpers.
<h3><%= video.title %> : Récit de tournage</h3>
<%= partial "partials/shootandlook1" %>
</div>
It works fine except that Markdown is not converting into HTML... :-(
I named my partial _shootandlook1.html.markdown.erb and my page videos.html.markdown.erb.
I really don't understand what I did wrong... Could someone please help me?
The whole source code is here.
Many, many thanks in advance!
This should work fine if you name your page template file videos.html.erb, and name your content partial _shootandlook1.md.
The Markdown file will be processed first, then inserted into the ERB template appropriately.
I usually find that it's best to avoid having multiple template formats in one file, unless the format explicitly supports blocks (like Haml)
I want to generate dynamic CSS using templates and Tilt andSASS in Rails 4.
Let's say I have the following css.sass template:
$class_name: test
$width: 329
$height: 425
.view-#{$class_name}
width: #{$width}px
height: #{$height}px
I need master.css.sass.erb (I am not sure about the format) in which I am going to render my template as many times as I like with different parameters.
In application.css, I am going to have something like this
*= require master.css.sass.erb
Each time I use the template with different parameters, I am going to add a line in my master.css.sass.erb file. I do not know how to pass parameters using Tilt to the css.sass template. Could anyone assist and tell if this is possible?
This is what I have till now:
The template test.css.sass.erb:
$color: <%= color %>
body
background: #{$color} !important
The master.css.sass.erb file:
<%
require 'erb'
config_path = File.expand_path("../test.css.sass.erb", __FILE__)
template = Tilt.new(config_path)
template.render(self, :color => 'yellow')
%> .thisisrendered
color: red
Note that the two files in one folder. The issue is that only the following css is renrered:
.thisisrendered
color: red
To answer your question: when erb is compiled, it only outputs ruby code contained in a <%= code %> wrapper. Your current code is probably running fine (I'm not familiar with Tilt or straight SASS), but you aren't telling it to output the result to the sass file. Change the first line of master.css.sass.erb from <% to <%= and then you can debug from there.
That being said, I would recommend against this process. You're going to be wasting resources compiling the stylesheet every time it is called.
An alternate method would be to just keep your stylesheets static as in your opening example so they can be precompiled and cacheable, and then create a partial like layouts/_conditional_styles.html.erb using stock html and css like:
<% unless #your_sanitized_style_object.nil? %>
<style>
body{
background: <%= #your_sanitized_style_object.background_color.html_safe %> !important;
}
</style>
<% end %>
Which could override the application stylesheet by being rendered after the application css file in your layouts/application.html.erb file such as:
<%= stylesheet_link_tag "application" %>
<%= render "layouts/conditional_styles" %>
To answer your question as to why you use less resources using precompiled assets and then overriding them, consider your example test.css.sass.erb
$color: <%= color %>
body
background:$color !imporant
Assuming the color variable is red, the process would go something like this... First your application will run through it with its erb compiler and give you a test.css.sass file such as:
$color: #ff0000
body
background:$color !important
Then your application will run through the code again with its sass compiler to give you a test.css file such as:
body{ background:#ff0000 !important; }
And after all of that, it will serve up the file. In your development environment you will not see that much of a performance difference as your application defaults to rebuilding the assets for every request. The difference comes when it's time to serve your application to the web in production.
If your assets aren't dependent on variables in the application, the stylesheets can be precompiled. What this means is that your application compiles the asset once, and after it compiles the asset you get a stylesheet like test-f25ab2b1286feb7cc98375sac732f7d0.css.
The stylesheets will be identical but what is unique is all that jargon that rails throws on the end of the file name when it precompiles something. That jargon is known as a fingerprint and its purpose is to tell the server on an incoming request whether or not there is a newer version of the file. If the file hasn't been modified, and the system making the request has already downloaded that file to its cache, then your browser will use the cached version instead of downloading the stylesheet over again.
Now lets say your test.css.sass.erb file is something huge like 50kB for example's sake.
Without precompilation your resource cost is:
having to traverse that 50kB file 2 times on every request to compile it from erb > sass > css
having to serve up that 50kB file on every request.
With precompiled assets that are overridden by conditional styles embedded in the html of the layout as explained in my first answer:
Your compilation cost goes down to almost zero because the stylesheet is precompiled so there's nothing to do to it and your whatever.html.erb template that contains the conditional styles is already being compiled by your erb compiler so you're just adding the work of rendering variables.
You only serve up the precompiled stylesheet once meaning you save ~50kB in bandwidth on every request, using only the bytes needed for the rendered dependent styles.
Hope this helps, for more information on how all of this works I would recommend starting with the Asset Pipeline Rails Guide.
wrong number of arguments (2 for 1)
Extracted source (around line #5):
<html>
<head>
<title>Assets</title>
<%= stylesheet_link_tag 'application'%>
<%= javascript_include_tag %>
<%= csrf_meta_tags %>
</head>
I've tried:
<%= stylesheet_link_tag :all %>
but I got:
<link href='assets/all.css' ...>
What confused me most is that I run an app on my MAC OS with almost the same config except mysql&Gemfile and it works well, but when I turn to centos5 I got these errors!
I had this problem too, and it turned out to be due to some code still targeting an older rails version, before the new asset pipeline work. Specifically, I had a redmine plugin using the method image_path with two arguments:
image_path('database_refresh.png', :plugin => 'redmine_rate')
This was no longer possible, and needed to be replaced with code that explicitly calculated the plugin specific path. I used code based on the wiki document at http://www.redmine.org/boards/3/topics/31445#Links-and-paths-to-plugin-assets
Note that this solution was for a problem I had with redmine, not rails, but could in fact be relevant.
<%= stylesheet_link_tag "application" %>
Should be fine. Rails has an assets pipeline to merges all the different stylesheets into one for the productive environment. I think it is an error in the assets pipeline.
Here is a good tutorial about this pipeline:
http://railscasts.com/episodes/279-understanding-the-asset-pipeline
To possibly fix your error have a look at config/environments/production.rb and try to set this to true
config.assets.compile = true
Another problem might be the configuration in the application.css have you perhaps deleted the comments or added something?
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require_tree .
*/
But these are just guesses... but I hope this leads you towards the solution of the problem.