So I have my simple rails application (not data driven), and I have managed (with help from Stackoverflow) to localize it. So I can view the web application in English or German. I have done so using the bundled i18n library. All is good, it was a joy to work with.
Now however, I want to load different images and or css files depending on what locale is active. I want a neat solution to this problem. Not an:
if i18n.locale = "en"
// show this particular image
else
// show that particular image
The above is not neat in my opinion, and imagine how long the if statement or switch statement will get the more locales one adds.
So I was thinking, is there a way I can extend the functionality of the javascript_include_tag, the stylesheet_link_tag and finally the image_tag to allow for locale handling?
I think something like:
stylesheet_link_tag "default.css", :locale => true
Would be nice to have, where if true, the inserted stylesheet will be like:
<link href="stylesheets/default.es.css" type="text/css" rel="stylesheet" />
Assuming my new locacle is Spanish. That would be lovely and clean.
Can this be achieved in Ruby on Rails? If yes, I would love some code sample, since I am relatively a n00b to rails.
Thank You.
You can just reference the locale when including an asset. Let's say you want to include a stylesheet specific to the current locale :
stylesheet_link_tag "custom_#{I18n.locale}.css"
If the current locale is en, this will look for the custom_en.css file.
A word of warning though : you should make sure to create a file for each locale that you intend to use.
Related
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)
Can I make the generated HTML page from my DDoc-marked-up D program use richer coloring and type-setting? The default is black-and-white.
I'm currently calling DMD as
dmd -debug -gc -unittest -D -Dd$OUTPUT_DIR
Well, you should probably read through http://dlang.org/ddoc.html to get some of the details, but ultimately, what you need is a css file which tells it how to present the page. That can be set via the DDOC macro.
What I'd suggest doing is taking a look at https://github.com/D-Programming-Language/dlang.org, which contains the code for dlang.org - including the ddoc stuff. In particular, you want to grab std.ddoc along with the css, images, and js folders (as they are all referenced by std.ddoc). If you then give std.ddoc to dmd as part of your documentation build and have those folders in the parent directory of the documentation, the generated documentation should end up looking like the documentation on dlang.org. If you want to put the folders elsewhere, then just tweak the paths to them in std.ddoc.
If you want to change what the documentation looks like, just adjust std.ddoc and the css files accordingly. At that point, it's html and css stuff that you're dealing with, so you'll have to have some clue how those work to make the necessary changes to either the macros in std.ddoc or to the css files themselves. And of course, if you want to do anything with the js files, you'll need to know javascript. You can strip out all of the js and images if you want to. They're just what's used for dlang.org, but again, you'll have to have some clue how html and friends work to know what to do with that. I'm not particularly well versed in any of that, so when I've generated documentation, I've typically made only minimal changes to what dlang.org uses, but all I've typically been looking for is to get more legible colors than the default rather than anything specific.
Sorry that I can't be more specific or helpful than that, but the best that I've done with it is stumble through it enough to get pages looking like dlang.org, since I know next to nothing about web development. Hopefully this will point you in the right direction though.
Something else that you might want to look into is ddox, which uses ddoc comments to generate better looking documentation than dmd does. And it's likely that dlang.org will be switching to using ddox-generated documentation sometime in the relatively near future (some of the details still need to be sorted out, so I don't know when exactly, but that's the current plan). So, using ddox may ultimately end up becoming more common than using dmd to generate the documentation.
You can create your own .ddoc config file in which you override or create new ddoc macros to use class names and id's. Then you can style the page using CSS.
Sample .ddoc file containing custom CSS, Notice the theme.css file in the head HTML section:
DDOC = <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link type="text/css" href="theme.css" rel="stylesheet" media="all" />
<title>$(TITLE)</title>
</head>
<body>
<h1>$(TITLE)</h1>
$(BODY)
</body>
</html>
H2 = <h2>$0</h2>
H3 = <h3>$0</h3>
STRONG = <strong>$0</strong>
EM = <em>$0</em>
DDOC_DECL = $(H2 $0)
DDOC_DECL_DD = <div class="declaration-description">$0</div>
DDOC_CLASS_MEMBERS = <div class="class-members">$0</div>
DDOC_SUMMARY = $(P $0)
DDOC_DESCRIPTION = $(P $0)
DDOC_MEMBERS = <div class="members">$0</div>
DDOC_ENUM_MEMBERS = <div class="enum-members">$0</div>
DDOC_MODULE_MEMBERS = <div class="module-members">$0</div>
DDOC_STRUCT_MEMBERS = <div class="struct-members">$0</div>
DDOC_TEMPLATE_MEMBERS = <div class="template-members">$0</div>
This file should be saved somewhere and added to the sc.ini file (in the case of Windows) or the dmd.conf file (in the case of Mac/Linux) like this:
DDOCFILE=myproject.ddoc
Then the next time you compile using -D, HTML is read from the custom ddoc macros instead of the built-in stuff and viola, you have style-able class names and id's to use with CSS.
Here's a preview of pretty documentation using a custom style-sheet and macros: http://htmlpreview.github.io/?https://github.com/kalekold/dunit/master/docs/dunit/toolkit.html
HTML files: https://github.com/nomad-software/dunit/tree/master/docs/dunit
Full ddoc macro listings can be found here: http://dlang.org/ddoc.html
trying to learn the Resources plugin
From my understanding, it helps to define 'resources' such as css and javascript files and automatically pull them into your gsp's when needed. I understand how to create modules that can then be loaded in using tags etc.
The part im not understanding is this: http://grails-plugins.github.com/grails-resources/guide/4.%20Using%20resources.html#4.2%20Linking%20to%20images
So ive created a module called 'images' in Config.groovy as follows:
grails.resources.modules = {
images {
resource url:'/images/view.jpg', attrs:[width: 1280, height:720 , alt: 'my view']
resource url:'/images/breakfast.jpg', attrs:[width: 1280, height:720, alt: 'breakfast']
}
}
The resources are included in the .gsp page in the head section as follows:
<head>
<r:require modules="jquery-ui, blueprint"/>
</head>
i know the resources have been successfully added to the head section because when i inspect the page source i see them there:
<link href="/ResourceTest/static/Aa7jV0N2qZjOz7TLZ9cl5cREIh2y5jJYV0ytn4nQg9r.jpg" rel="shortcut icon" width="1280" height="720" alt="my view" />
<link href="/ResourceTest/static/IpQBSjrYeLDdSUBGbP3jhf6Kkhvu1zV3XRtwWfKOIMn.jpg" rel="shortcut icon" width="1280" height="720" alt="breakfast" />
My question is this: how are the image resources then used? i mean i know if it was javascript, the importing of the resource gives you access to use the functions in the html code, but with regards to images, the site says "Once you have done this, using to reference them would automatically set the width, height and other attributes."
How? I've tried the following:
<r:img module="images">
<r:img alt="breakfast">
and a handful of others with no success
what does work is:
<r:img uri="/images/breakfast.jpg">
but this works regardless of whether or not you add the module with the r:require tag.. So whats the point of using this plugin for images then and how would i use it?
The <r:img> tag works just fine with our without <r:require>; it even works with undeclared image resources.
The point of the require tag is to prevent resource duplication. So, for instance, suppose you have multiple javascript resources that rely on jQuery, and they're all required. Add another layer of complication: say you're actually pulling together different gsp templates via sitemesh, and they each have their own resource dependencies. If you just put the normal HTML code to reference those resources in the head of each gsp layout, you might get multiple instances of them in your page header, which could prove problematic. Using the resources plugin makes sure you only get one instance of the required resource.
See http://grails-plugins.github.io/grails-resources/ref/Tags/require.html and http://grails-plugins.github.io/grails-resources/ref/Tags/layoutResources.html.
With images, though, this is not really necessary. If you have an image more than once on a page, it's probably because you wanted it, or because you're applying redundant layouts and need to refactor a bit. So, you are correct that the require tag doesn't really do much for images called via <r:img>. This is simply because images are a different sort of resource, so they're treated differently. Don't sweat it. :)
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"