Bootstrap <i> icons being overridden by <em> in refinery editor - ruby-on-rails

I am using refinery branch 2.0-stable with twitter bootstrap and rails 3.1.
I've tried adding a bootstrap icon to a refinery page html using the following syntax:
<i class="icon-caret-left"></i>
When I save the page, the tags are overridden with tags.
Any ideas of a fix?

It turns out that the tag that the class is applied to doesn't really matter at all so I used
<span class="icon-caret-left></span>
Hopefully that will help someone

Related

jquery-mobile returning blank pages in rails 4 environment

Some links don't work when I use jquery-mobile with rails and I don't know why. All I get is a blank page. The URL changes, and if I press "refresh" on my browser, the target web page comes up ok. But the web page appears blank when I first click the link.
of the first page:
<div data-role="page">
<div data-role="ui-content">
Click me
</div>
</div>
of "/sample_controller/new"
<div data-role="page">
<div data-role="ui-content">
Got here
</div>
</div>
I checked the html headers and the jquery-mobile.js file seems to be loading and it's valid. Same with the stylesheet. No javascript errors come up in my console. Two hints:
1) I checked the DOM in my chrome browser and it says "display: none;" for [data-role=page]. So for some reason jquery-mobile is setting it to be invisible, even though I didn't specify that.
2) I tried the exact same code with straight HTML (not rails) and the link works fine. So i suspect something in the rails engine is screwing it up.
I tried every avenue including stack overflow. Does anyone know the common reasons why jquery-mobile gives a blank page? Are there any error logs or something in jquery-mobile so I can check to see what's going on?
I am using rails 4.1.7. and jquery-mobile-rails (loaded in the gemfile) is 3.1.2
I see what went wrong. Omar, in the comments section, was right. I needed to let rails handle navigation not JQM. Apparently, straight "a" links won't work with jquery-mobile within rails, I have to use the "link_to" helper for jquery-mobile to recognize it.
Also, it worked when I installed the jquery_mobile_rails gem directly. before I manually put the jquery_mobile in the assets directory and linked manually. So installing jquery_mobile_rails gem fixed the problem.

Activeadmin with Tinymce CDN

I'm fairly new to rails. I have a Rails 3.2.13 app running ActiveAdmin. I'm trying to integrate tinyMCE as my editor for the text areas. I want to use the quick install CDN hosted by Cachefly.
I'm able to add the reference to the minified tinymce javascript on the cdn by adding
config.register_javascript 'http://tinymce.cachefly.net/4.0/tinymce.min.js'
that renders the script tag below in my header.
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
How can I add the initializer script below to my head in activeadmin on all the pages?
<script>
tinymce.init({selector:'textarea'});
</script>
I'm a Rails noob. It's probably something simple, but I searched everywhere and I can't seem to figure it out.
Any help would be greatly appreciated.
You can simply add a javascript file as well after you add tinymce to the config. So it would look like:
config.register_javascript 'http://tinymce.cachefly.net/4.0/tinymce.min.js'
config.register_javascript 'admin/custom.js'
Where custom.js would be located in:
app/assets/javascripts/admin/custom.js
And the contents would be your desired js code that will execute on all pages:
(function() {
tinymce.init({selector:'textarea'});
})();

twitter bootstrap AND rails 3 Jumbotron masthead

I have installed the twitter bootstrap rails gem and ran all the commands.
I have seen some basic style changes which leads me to some confidence. However with I use the following class
<div class="jumbotron masthead">
<h1>Test Heading</h1>
<p>Find me in app/views/pages/home.html.erb</p>
</div>
It does not do anything. According to the twitter bootstrap homepage and inspecting, this should work.
Am I missing something?
Are you sure the bootstrap gem uses the latest version of Bootstrap? I always include the CSS and JS files manually, so that I can always have the latest version. I haven't used the masthead, but it is included in the Bootstrap CSS files. https://github.com/twitter/bootstrap/blob/master/docs/assets/css/docs.css#L58
The jumbotron masthead was an extra addition on the Bootstrap GitHub doc pages that isn't included in the "proper" release of Bootstrap.
There's nothing to stop you pinching the code from here and adding it to your Rails project yourself though!

Using LightBox 2 in Ruby on Rails 3.2.3

I have done a lot of web searches to see if I could find a script where I could popup a QR code image in my Rails application. I came across Lightbox 2. I have installed the scripts and copied the CSS code in my stylesheet.
I tried to use the following code. I tried to include the path where the image is located. The page displays fine when QR Code is clicked but there is no image.
QR Code
I would like to know if I can define the path for this image using the code above or will I need to use some kind of rails statement to do this?
I have been doing searching for a couple of hours and had found several suggestions, including on Stack Overflow. However I have not seen any examples that stated that they were used in Rails applications.
Any help would be appreciated.
inside the html.erb file
<%= link_to image_tag("small_image", :size => "76x76"),'/assets/large_image.png',:rel => "lightbox"%>
image_tag is for show small thumbnail preview, make sure actual image path is /assets/image_file
if you use ordinary html tags its fine
<a href="/assets/images_file" rel="lightbox" >My Image</a>

access rails image_tag helper in liquid drop

Does anyone know how to access the image_tag rails helper from within a liquid drop ?
Any help / examples would be great as i can't seem to find this anywhere!
thanks
rick
You mean the Liquid Template engine right?
If so, by design, the image_tag helper is entirely unavailable from within Liquid templates. This is the express purpose of Liquid, you aren't able to execute any Ruby code on the server running Liquid, just the set of helpers that it provides you.
If you are making a Shopify store or something like this where you are using Liquid on someone else's servers, then you are stuck manually doing what the image tag helper does normally. You have to write out <img src="{{ something.url }}>.
If you are making or running your own Rails application which uses Liquid, you can add your own image_tag style filter to Liquid so that its available for use in all your templates.
See Liquid for Programmers on the Github wiki.
Hope this helps!

Resources