I want to create a picture management through my ActiveAdmin administration panel.
I use Carrierwave to upload images from my administration panel, however I fail to display these images as background-image within my CSS code... :/
...because of the following error:
couldn't find file '<%= Image.find(1).path %>'
Here is my CSS:
header{
background-image: asset-data-url("<%= Image.find(1).path %>");
}
My HTML:
<header>
<div class="header-content">
<div class="header-content-inner">
<h1>Your Favorite Source of Free Bootstrap Themes</h1>
<hr>
<p>Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!</p>
Find Out More
</div>
</div>
And the image administration view:
I don't understand how do I link my image to the background-image CSS property?
Calling Rails Database queries in CSS stylesheet will not work. Instead you can rework on the HTML code like the below,
<header style="background-image: url(<%= Image.find(1).path %>);">
and remove the background image code in the CSS.
Related
So in my app i have a card where i want to dynamically set the background image via ActiveStorage like so:
<div class="card" style="background-image: url(<%= rails_blob_path(post.images.first) %>)">
</div>
however, the image is not visible. Inside chrome i also get in the element.style property "invalid type property" as an error.
If i inspect the card element, the url is loaded like so:
`background-image: url(/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9be6ec89650623cc4a22214c34635f2924f8feea/Frame%20(1).png)`
Taking the url and adding localhost:3000 to it loads the image:
localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9be6ec89650623cc4a22214c34635f2924f8feea/Frame%20(1).png
Rendering the image normally inside an img tag works fine:
<%= image_tag(post.images.first) %>
Also, changingrails_blob_path to rails_blob_url makes no difference at all. The only change is that there is a localhost:3000 added to the url in rails_blob_url:
http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9be6ec89650623cc4a22214c34635f2924f8feea/Frame%20(1).png
Adding a height/width to the card class results also in no difference.
Here is a reference i've found, seems like they are using the same approach as i do: Ruby on rails 5.2 - background image with active storage
Any ideas where the problem might be?
Thanks in advance everyone!
Greetings!
Thanks everyone for all of your input!
I was able to fix it. Just in case someone runs into the same issue:
Add single quotes to your path:
Solution:
<div class="card" style="background-image: url('<%= rails_blob_url(post.images.first) %>'); height: 100px; background-position: center;">
For comparison (before):
<div class="card" style="background-image: url(<%= rails_blob_path(post.images.first) %>)">
Double quotes don't work in this example.
This would be probably not even an issue if i just would have used the scss file instead of adding it directly to the div.
Cheers!
I have the following Rails view in an ERB template where I set an inline style background image.
(The url is hard-coded for demonstration, but in reality it's generated via a paperclip attachment in my Photo model (e.g. photo.source.url(:medium))
<% url = "/system/photos/sources/000/000/008/medium/20160820_131939" %>
<div class="photo" background-image: url(<%= url %>);>
</div>
This ends up rendering the following <div>
Copying the above from Chrome's inspector reveals that it's being generated as key-value pairs
<div class="photo" background-image:="" url(="" system="" photos="" sources="" 000="" 008="" medium="" 20160820_131939);="">
</div>
Why does Rails do this? It seems to be trying to escape the forward slashes in the path?
I tried various forms of html_safe and escaping/unescaping, but no luck.
image_path and asset_path aren't applicable here because my path is generated by the paperclip gem which will correctly yield the right path in all environments.
Thanks!
The background-image property is CSS and needs to be within a style attribute.
i.e. <div class="photo" style="background-image: url('<%= url %>');" >
All the css is ok but the only problem is that I can't change the default bootstrap css.
index.html.erb:
<div class="col-sm-6 no-padding"> Something </div>
_cards.scss:
.no-padding{
padding: 0px !important;
}
Is there any configuration that is causing it?
The only way that works in this app is to write:
<div class="col-sm-6" style="padding: 0px;"> Something </div>
Obs.: I'm using Rails 5.0.1 and I created a new sample of rails app to test and worked like how I intended to do. So I guess that it should be some wrong configuration.
Obs2.: all other components from '_card.scss' are also loading normally.
To solve this issue we have to attempt to call on application.scss the bootstrap first (I mean, above on the list) and then we should call our private css folders after.
Thank you again for the amazing support guys.
I am trying to figure out why my SVG icons are not displaying in Chrome. I am calling the svg with a standard <image src=... />, and I am able to see the image in dev tools (dev tools) and by visiting the direct path. I am also able to see the svgs in any other browser.
I've tried:
Saving the svg in Illustrator with "Embed" instead of "Link" : Chrome not rendering SVG referenced via <img> tag
Explicitly registering SVG mime type
Using Rails' <%= image_tag %> ERB helper
Using SVG export settings suggested by Adobe: http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html
Here is my view:
<a class="collapsed accordion-box">
<div class="panel-heading">
<img class="collapse-bullet" src="<%= asset_path 'blue-right-bullet.svg' %>"/>
</div>
</a>
Edit:
Found that other random SVGs show up fine:
This one is working: https://goo.gl/Hcs7Sx (white on white)
This one does not: https://goo.gl/WGkY3r
Both are called with <img src="..."/> via the <%= image_tag %> helper
I am using jquery-mobile for 1 of my applications in Rails 2.3.4.
The following code
li data-icon="plus" data-iconpos="right"><%= link_to "Post", [my parameters] %>
does not show the data icon, "plus". I am wondering why.
Any ideas please.
The original question is a little unclear to me, but from the comments, it looks like you're trying to find out how to change the icon in listview from the standard arrow.
To do this, add a data-split-icon property to the ul tag - setting it to one of the icon names from http://jquerymobile.com/demos/1.0a3/docs/buttons/buttons-icons.html
For example:
<ul data-role="listview" data-inset="true" data-split-icon="star">
<li><h3><a>list item 1</a></h3><a>link title</a></li>
<li><h3><a>list item 2</a></h3><a>link title</a></li>
<li><h3><a>list item 3</a></h3><a>link title</a></li>
</ul>
Instead of the standard arrow icon, that gives you a list with pretty stars.
Hope that helps
I had the same problem myself - it is due to the fact that Rails uses a 1.4 version of jQuery by default - you need to be using jQuery 1.5
If you want to get started quickly then use the jQuery CDN hosted files:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js">