How to reference image in data attribute within Rails 5 - ruby-on-rails

i'm new on Rails. I can use images with image_tag or image_path.
But , i have an html template and these methods does not work in data-attributes. In my html , there is a data-background attribute which changes background of the div.
My html :
<section id="sub-header" class="section bg-parallax pt-0 pb-0" data-background="<%= image_path('bg/about.jpg') %>">
This directory is under the app/assets/images/bg. But i can't reach the image.
Where should i put these images ? and how can i reach images in this example

Try this workaround :
data-background=<%=Rails.root.to_s + "path_to_your_image" %>
I know it' ugly :/

I tried all combinations. But solution was simple. You don't need to use rails helper functions for that. I moved my images from assets to public folder and :
<section id="sub-header" class="section bg-parallax pt-0 pb-0" style='background:url("/bg/about.jpg")'>

Related

Can not upload images to a rails website, any comment for me?

I am a newbie and trying to make a very simple rails website. I am trying to upload a photo to this website, and here is my code
<div class="col m4 center">
<%= image_tag "/assets/images/courses/4.jpg", class: "img-responsive"%>
</div>
The photo's folder is ofcourse named courses and in /assets/images/
I thought that this is ok, but my problem is, when I check my website, the photo could not loading.
It liked this
enter image description here
I am very confusing because I tried to change many photos, type, and folder, but nothing changed.
Could you please give me some ideas?
Thank you very much.
When you put an image inside /assets/images, Rails will use Sprockets to compile it and it modifies it's name with a digest hash. Instead of using the complete path, just use the part inside /images, that way rails will know what to do:
image_tag 'courses/4.jpg', class: 'img-responsive'
https://apidock.com/rails/ActionView/Helpers/AssetTagHelper/image_tag check the examples

Edit the url in ERB to do server side scaling

The image is rendered on my blog of website using following erb code
<a href="<%= article_url(article)%>">
<img src="<%= article.main_image_url%>" alt="<%= article.title%>" /</a>
The main image url is actually stored in cloudfront on the url
https://s3.ap-south-1.amazonaws.com/mywebsite-dev/uploads/article/main_image/100/wonderful_image__1_.jpg
A scaled down version of size 500 X 250 pixel is stored at location
https://s3.ap-south-1.amazonaws.com/mywebsite-dev/uploads/article/main_image/100/large_wonderful_image__1_.jpg
My model of the article only saves the main image url. However, while uploading the image to s3, I do create a scaled down version of the image and add 'large_' prefix. This can be seen in the above url examples.
As of now, my erb code, renders the main image on the webpage and I need to edit this code, so that it renders the scaled down image instead. Basically, I need to edit this
<img src="<%= article.main_image_url%>"
so that erb changes
(The urls below are changed to blank client website'
https://s3.ap-south-1.amazonaws.com/mywebsite-dev/uploads/article/main_image/100/wonderful_image__1_.jpg
to this
https://s3.ap-south-1.amazonaws.com/mywebsite-dev/uploads/article/main_image/100/large_wonderful_image__1_.jpg
May be I need to split the article url by '/', take out the last part and add 'large_' to it.
Thanks in advance for the help. I am quite new to ROR and more into python.
Regards
I figured it out.It may be not a clean solution but it worked for me as of now.
<img src="<%= article.main_image_url.rpartition('/').first+'/large_'+article.main_image_url.rpartition('/').last%>" alt="<%= article.title%>" />
Thanks to everyone

Render images into my post content

I'm trying to add images to my post which I thought that would be easier but god I've been struggling for a while now.
I tried to use Redcarpet and added some ruby Image_tag code but didn't work. Also I tried with tag and the raw method but no luck. I don't know I've been going around but I couldn't fine anything and I think I'm not asking nothing weird or complicated ahah.
Just add pictures from my /assets/images folder if is possible.
<%= img_tag ("my_photo.jpg")%>
How do you recommend to do it?
Many thanks
I use the image_tag helper and this has always worked fine for me. You could try this:
<%= image_tag("my_photo.jpg")%>
I figured it out. I used HTML tag instead of Ruby code.
<%= raw (#post.content) %>
As I am using assets pipeline:
<img src="/assets/my_photo.jpg" alt="twd" class="img-rounded"></img>
My issue was that I was calling my photo as /images/my_photo.jpg instead of /assets/my_photo.jpg... simple as that

How to loop through properties in a tab and display them using Razor?

I have a Document Type, that has a tab with some properties.
The properties are Upload types, and Simple Editor types.
(Users are supposed to upload images with some image text).
I have not grouped the "Upload" and "Simple Editor" properties, so how do i do this?
Next question,
I want to loop through each group (there should be 3 currently) and display them on my website.
The markup should look like the following:
<div>
<img src="PATH-TO-UPLOAD-TYPE" />
<div>"TEXT FROM SIMPLE EDTIOR TYPE"</div>
</div>
..
<div>
<img src="PATH-TO-UPLOAD-TYPE" />
<div>"TEXT FROM SIMPLE EDTIOR TYPE"</div>
</div>
...
I would like to use Razor for this. Thanks in advance!
For the first part, using the Razor model, you can't. The content object that you get on the front end only contains the properties, the tabs are not included, as they're only really for organising things in the back office.
You CAN get that information using the Umbraco API, but it's pretty database intensive and could potentially be quite slow if you have a lot of properties/tabs.
You'd be better grouping them yourself in your Razor Macro.
for the second part, you can acces the properties of a page via #Model.property. For example:
<div>
<div>#Model.simpleProperty</div>
</div>

how to make an image visible in Rails

I am a newbie to Rails. In html if we want make an image visible we write it as
<img src="xyz.jpg"/>.In this way I want to know how to make that kind of stuff in Rails.How to make an image src in Rails to make it visible.
With the image_tag method.
In your case it would be:
image_tag("xyz.jpg")
This will output as:
<img src="/images/xyz.jpg" />
Which assumes that the path is images/xyz.jpg
See here for more details.
Do you mean an image tag?
image_tag("icon.png")
http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/image_tag
In your ERB it will look like this:
<%= image_tag 'xyz.jpg' %>

Resources