Not sure why this line is not working
CONTROLLER
#images = {
"Example1" => "ExampleA",
"Example2" => "ExampleB",
}
VIEW
<% #images.each do |image, caption| %>
<div class ="fill" style="background-image: url(<%= asset_path '#{image}.jpg' %>);">
<div class="caption">
<h2><%= "#{caption}" %></h2>
</div>
</div>
<% end %>
When I look at the output, somehow the HTML being rendered for the background image is:
<div class="fill" style="background-image: url(/#{image}.jpg);">
As general practice, my understanding is that the interpolation tags, either <% or <%=, should be as close to the Ruby code as possible (e.g, within HTML tags, or in the example of the background-image: url above)
Interpolation works with double quotes, not single quotes.
Change
style="background-image: url(<%= asset_path '#{image}.jpg' %>);"
To
style='background-image: url(<%= asset_path "#{image}.jpg" %>);'
or
style="background-image: url(<%= asset_path image %>.jpg);"
Related
We are attempting to move sites to Jekyll, and have a BS4 theme. In order to make it user friendly to the content managers, I've placed the following in my page layout:
<div class="container">
<div class="row">
<div class="col-md-12">
{{ content }}
</div>
</div>
</div>
However, I'd like to create a liquid tag or filter to allow for full-width images to be injected into the middle of the page. This would close the three container divs above the image, write out the image, and the create new divs below, and continue to write the markdown file. i.e.
{% fullwidth xenia-map.png %}
would produce something like this in the middle of the page:
</div>
</div>
</div>
<img src="input.jpg" class="img-responsive" />
<div class="container">
<div class="row">
<div class="col-md-12">
I have been able to create a filter and a tag (class) that will do 80%, however neither will write out closing tags at the beginning of the output. I just get the <img> tag.
Here's my class:
class FullWidth < Liquid::Tag
def initialize(tag_name, image, tokens)
super
#image = image.strip
end
def render(context)
"</div></div></div><img src='uploads/#{#image}' class='img-responsive'>"
end
end
Liquid::Template.register_tag('fw', FullWidth)
Your problem looks like an escaping issue.
Although I like the simplicity of your solution, I would consider two alternatives. The first ('include' solution) because it is easier to implement (anyone can make that one work). The second one ('javascript' solution) because it will allow your content editors to use a regular/graphical markdown editor and it will keep your markdown clean and reusable for other purposes.
'Include' solution
Just put an include in your markdown/html:
{% include fullwidth.html image="/uploads/xenia-map.png" %}
... and use this 'fullwidth.html':
</div>
</div>
</div>
<img src="{{ include.image }}" class="img-responsive" />
<div class="container">
<div class="row">
<div class="col-md-12">
'Javascript' solution
Use this markdown (or let a regular/graphical markdown editor generate this):
{: .fullwidth}
... and use this jQuery:
$(document).ready(function(){
$('img.fullwidth').each(function() {
var img = $(this).parent().html();
$(this).unwrap();
document.body.innerHTML = document.body.innerHTML.replace(img,
'</div></div></div>'+img+'<div class="container"><div class="row"><div class="col-md-12">');;
});
});
This is what I'm doing:
%p
%a{href:'/a'}
%img{src:'/img'}
This is what it looks like in the HTML:
<p>
<a href="/a">
<img src="/img">
</a>
</p>
I need this instead:
<p>
<img src="/img">
</p>
What should I do to my HAML config or the .haml code? I'm with Sinatra.
This looks like a case for the whitespace removal feature:
%p
%a{href:'/a'}<
%img{src:'/img'}
or:
%p
%a{href:'/a'}
%img{src:'/img'}>
both produce the same output:
<p>
<a href='/a'><img src='/img'></a>
</p>
The cleanest option would be probably to include in css something like:
a > img { display: inline-block }
I want to use different views for my platform on mobile devices depending on page orientation (portrait vs landscape).
Is there a way how this could work:
<div class="row item-list-video">
<% for program in #programs %>
<% if (stylesheet_link_tag "global", :media => "only screen and (max-width: 990px)") %>
<%= render partial: 'program_preview_landscape',locals: { program: program} %>
<% else %>
<%= render partial: 'program_preview',locals: { program: program} %>
<% end %>
<% end %>
</div>
I am not sure about how this part is working:
if (stylesheet_link_tag "global", :media => "only screen and (max-width: 990px)")
My thoughts were that stylesheet_link_tag is the file name of the .css where the media queries are defined. But what I get is:
Asset was not declared to be precompiled in production.
Add Rails.application.config.assets.precompile += %w( global.css ) to config/initializers/assets.rb and restart your server
The program_preview_landscape loads this code:
<div class="col-md-3 col-sm-6 col-xs-3 program-thumbnail-landscape">
<a href="/shows/<%= program.slug %>">
<img src="<%= program.thumbnail_uri %>">
</a>
</div>
While the program_preview loads this:
<div class="col-md-3 col-sm-6 col-xs-6 program-thumbnail">
<a href="/shows/<%= program.slug %>">
<img src="<%= program.thumbnail_uri %>">
</a>
</div>
You can't read the media query from an ERB, because the media width is only calculated in the browser after the HTML is delivered, and by then the ERB has already been rendered. The usual approach to this sort of thing is to have your ERB generate HTML with semantic markup — the same HTML for both desktop and mobile — and then use CSS media queries to apply different styles depending on the screen width.
What I want to do is make it just output the view itself, and ignore what Rails would normally think is embedded Ruby within the HTML.
For example:
<div class="current">
<div class="question">
<h3 id="homework_name"><%= homework.name %><h3 id="due">Due <%= homework.due %></h3></h3>
<h2 class="title">The Question:</h2>
<p id="question_contents"class="contents"><%= current_question.contents</p>
</div>
<div class="answer">
<h2 class="title">Your Answer:</h2>
<textarea class="contents" id="student_answer"><%= current_question.answer %></textarea>
</div>
</div>
I want an ActionView Template Handler to ignore all mentions of:
<%= homework.name %>
<%= homework.due %>
<%= current_question.contents %>
<%= current_question.answer %>
More specifically, it should ignore any tags starting with <% and ending with %>
If you need more info check out http://pastie.org/private/epsxnapldho6co2y0indg
Here you go https://gist.github.com/1144297
And use .html.lifo extensions for your templates.
my autocomplete call is showing nothing right now, because the div that i am inserting the ul into has its style set to display:none. using firebug, i can see the results are returned in a proper unordered list tag and when i edit the html from the firebug console and remove the style="display:none;", i see the autocomplete results. i added css for the autocomplete tags that are generated but this is getting overwritten by prototype 1.6.1/scriptaculous 1.8.3. also, i'm using rails 1.2.2
here is the code from my view:
<script type="text/javascript">
new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/campaigns/title_list", {tokens: ',', paramName: 'title'});
</script>
<input type="text" id="autocomplete" name="autocomplete_parameter"/>
<div id="autocomplete_choices" class="autocomplete"></div>
and here my controller action and partial:
def title_list
camp_title = params[:title]
#titles = Campaign.find(:all, :conditions => ["title ilike ?", "%#{camp_title}%"], :select => :title).collect { |camp| camp.title }
render :partial => "title_list"
end
_title_list.rhtml
<ul>
<% #titles.each do |t| %>
<li> <%= t %> </li>
<% end %>
</ul>
here's what i seen in firebug:
<div style="display: none; position: absolute; left: 8px; top: 123px; width: 155px;" id="autocomplete_choices">
<ul>
<li class="selected"> DirecTV Defender (Best Deal Ever) </li>
<li class=""> Defender DirecTV </li><li class=""> DirecTV Defender - Collections </li>
<li class=""> Defender DirectTV (Gotham Direct) </li>
</ul>
</div>
any suggestions would be greatly appreciated.
-h
You need to go into the auto_complete helper (inside the vendor directory) and change the line items.uniq to items.uniq.join
The reason is a change in the to_s behavior of Arrays in Ruby 1.9. Worked fine for me like this.