I have a little image that is showing up as a dead link on heroku, but not on my local, the image files were git pushed with everything else. Whats more is I have other images that show up just fine.
the view file for broken image
<% if report.status == 4 or report.status == 5 %>
<img src="<%= image_path('greenlight.png') %>" id="status">
<% elsif report.status == 2 or report.status == 3 %>
<img src="<%= image_path('yellowlight.png') %>" id="status">
<% elsif report.status == 1 %>
<img src="<%= image_path('redlight.png') %>" id="status">
<% end %>
view file for working image
<div id="header"><header>
<img src="<%= image_path('whfd_logo.png') %>" id="whfd">
<img src="<%= image_path('iaff.png') %>" id="iaff">
<span>text removed<br />
text removed</span>
</header></div>
view source fro broken image
<img src="/images/yellowlight.png" id="status">
view source for working image
<img src="/images/whfd_logo.png?1329844130" id="whfd">
<img src="/images/iaff.png?1329844130" id="iaff">
when the image works on my local the view source looks like this
<img src="/images/yellowlight.png?1329096113" id="status">
whats going on here? why is the number string after the image missing?
In the future you could run git add -A that will add AND delete any files you...well, added or deleted.
figured it out. I need to learn more about git.
running git add . before my git commit fixed it.
Related
I only see an icon, and not the real image (also on the index page).
제목:<%= #food.title %> <br> <br>
<img src="<%= #food.image %>"><br> <br>
내용:<%= #food.content %> <br> <br>
<form action="/food/edit/<%= #food.id %>"> <input type="submit" value="수정"></form>
<form action="/food/destroy/<%= #food.id %>"> <input type="submit" value="삭제"></form>
I don't understand how an image can be saved in the database. I found a method that saves a url, but I upload the image file usually. I made an input tag that has the file type. How can I save the image? I have installed carrierwave.
What is #food.image? Is it a url, or the image itself? If it is a url, <img src="<%= #food.image %>"> should work. If it is the image itself, perhaps uploaded by carrierwave, you should use <%= image_tag(#food.image) %>.
I'm not sure what your Food model looks like, but try this (since you are using CarrierWave, add .url):
<img src="<%= #food.image.url %>"><br> <br>
or:
<%= image_tag #food.image.url %>
The icon you are seeing is the default icon shown by the browser if the image path is not found.
Reference: CarrierWave ActiveRecord
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.
I have a document with the following frontmatter:
---
layout: default
title: "A Gallery"
image:
- "image-1.jpg"
- "image-2.jpg"
- "image-3.jpg"
---
Now I want to build a list of images in my default-template like this.
<ul>
<li><img src="image-1.jpg" alt=""></li>
<li><img src="image-2.jpg" alt=""></li>
<li><img src="image-3.jpg" alt=""></li>
</ul>
I found this tutorial for javascript loops.
But how do I convert it to ECO/Coffeescript?
Something like this?
<ul>
<% gallery i + 1, for images i in #document.image[i]: %>
<li><%- #document.image[i] %></li>
<% end %>
</ul>
This is how I did it.
In your docpad.coffee file:
site:
pics:
myFirstGallery: [
{name: '/images/mypic.png' h: '180px' w: '100px'},
{name: '/images/mypic2.png' h: '180px' w: '100px'}
]
Then in your eco file:
<ul>
<% for pic in #document.site.pics.myFirstGallery: %>
<li>
<img src="#{pic.name}" width="#{pic.w}" height="#{pic.h}" />
</li>
<% end %>
</ul>
It should be something similar to that. I use Jade so I forget the exact CoffeeScript syntax. Let me know if I got something wrong. The for in syntax comes from CoffeeScript's website. I looked it up on Eco's ReadMe file.
I figured it out after seeing this code in »The Little Book on CoffeeScript« (GitHub Version).
for name, i in ["Roger the pickpocket", "Roderick the robber"]
alert "#{i} - Release #{name}"
For the sample above (see my question) you have to write this code.
<ul>
<% for image, i in #document.image: %>
<li>
<img src="<%- "#{image}" %>" />
</li>
<% end %>
</ul>
Now it works like charm.
When I use images from metadata in my layouts, I do it like this and it works:
<img src="<%= #site.url %>/images/<%= #document.icon %>" alt="" title="">
When I use the wonderful working thumbnail-plugin for DocPad like this, it works well, too:
<img src="<%= #getThumbnail("images/javascript.png", '128x128') %>" alt="">
Now I would like to combine both methods, to get the metadata from the document and let the thumbnail-plugin size it like I want. Is this possible? I tried something like this:
<img src="<%= #getThumbnail("images/<%= #document.icon %>", '128x128') %>" alt="">
I know the code above is crap, I am sorry... Just to explain what I would like to do.
You can definitely do what you're wanting to do. The key point to realize is probably that when using eco, <%= puts you in 'coffeescript' mode and you can write any coffescript expression you want.
So to do what you want, you'd write this markup:
<img src="<%= #getThumbnail('images/' + #document.icon, '128x128') %>" alt="">
I tried to display the images in Backbone.js view page.
My show_view.js.coffee is
Myapp.Views.Checklists ||= {}
class Myapp.Views.Checklists.ShowView extends Backbone.View
template: JST["backbone/templates/checklists/show"]
render: ->
#$el.html(#template(#model.toJSON() ))
return this
My show.jst.ejs file is
<p>
<b>Title:</b>
<%= title %>
</p>
<p>
<img src="<%= how_to_show_photo_url %>" alt="No image">
</p>
Back
I am using paperclip gem. I tried using <%= photo.url %> in image tag but it is not working. How do I show the photo in image tag?
I altered the response in rails before sending it to backbone.js. I updated the photo_file_name attribute with original path of the file. I updated the code as
#checklists = Checklist.find(:all)
#checklists.map{|k,v| k.photo_file_name = k.photo.url }
Now my Json response is
{"comments":"Backbone attachment","created_at":"2013-03-12T23:41:40Z","id":16,"photo_content_type":"image/jpeg",
"photo_file_name":"/system/checklists/photos/000/000/016/original/IMG_0011.JPG?1363131700",
"photo_file_size":2714495,"photo_updated_at":"2013-03-12T23:41:40Z","title":"Test Attaachment using backbone","updated_at":"2013-03-12T23:41:40Z"}
I used photo_file_name attribute in image src tag
Any better solutions are most welcome