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
Related
I want to make app which will switch vocabulary in desired url of webpage Japanese to English.
But firstable I want start form just simply display desired url of webpage inline lust like Google Translate.(See here)
I tried to use open-uri library, and get html from webpage, and display it with code below.
Controller:
def submit
require 'open-uri'
charset = nil
#html = open(params[:url]) do |f|
charset = f.charset
f.read
end
end
View:
<%= #html.html_safe %>
But I have problem with this, which simply won't load Images and some stylesheets in page.
Any way to display image and css?
If you are displaying HTML from another domain on your domain, then any relative URLs used in the HTML (links, scripts, styles, etc.) aren't going to correspond with files that exist on your domain. You are going to have to parse the HTML and either expand the URLs to full URLs that point to the original domain (easier) OR you are going to have to download all the content to your domain using the same path structure.
Example:
To display an image, a site (example.com) could use any of the following src attributes:
<img src="http://example.com/images/logo.jpg" alt="My Logo" />
<img src="/images/logo.jpg" alt="My Logo" />
<img src="../../images/logo.jpg" alt="My Logo" />
If the site always used the full URL like in the first example, you wouldn't have a problem displaying the image. If they used the second one, your site wouldn't be able to find "/images/logo.jpg" on your server. You would have to parse all the img elements and prepend the domain. The third example you would have to do even more work by determining the path to the image based on the current URL you were displaying.
I used Mercury Editor for my Rails 3 website, but i have a litte problem with the uploaded images.
I have a image tag with data-mercury="image":
<img id="page_image" data-mercury="image" >
Then I set Mercury to send the data via a form to my controller. What I want to do is to store the image's url in the database.
How do I get the data sent by Mercury Editor ?
Normally when I have a div with data-mercury="full", I get the content in my controller like that:
params[:content][:page_content][:value]
Thanks for your help.
as I check the mercury demo , it saved the pictures url. So ,probably you can parse the content and capture the image url by using regular expression. Maybe you can use nokogiri as well to parse the html.
Rails Cast Source
Official Mercury docmentation
I resoved the problem with the following code:
#body
<img id="mercury_image" data-mercury="image" src="">
<div id="article_image" data-mercury="full"></div>
#jQuery
$(function() {
$('#article_image').hide() ;
$("#mercury_image").load(function(){
$('#article_image').html($('#mercury_image').attr('src'));
});
});
I am currently creating an MVC 4 web application.
I have an action that has a base background image which is always the same then an arrow image which changes in degrees depending on the information that is collected within the action.
I call this action using
<img src="#Url.Action("trend-image", "NonReg_Reports")" alt="background" width="245" height="105" />
This works fine when it is called and is just displaying a HTML webpage. It gives me the HTML.
<img src="/nonreg-report/01495344/trend-image" alt="background" width="245" height="105">
I am then using Rotativa / Wkhtmltopdf to convert this HTML page into a PDF. This runs the same piece of code as above.
The problem is I am just getting a white box with the alternative text in it if I use the code above.
If I use <img src="~/Content/images/trend_back_medium.png" alt="astuff" /> which is the actual background image in my project it works fine.
The image from the code above can not be saved anywhere due to how it is used. I am thinking that it is a path problem, but after trying lots of different things I can still not get it to work.
Any suggestions or help would be greatly appreciated Thank you.
I had the same problem. Normal html view was ok with pictures, pdf was not display it. I used Server.MapPath to point to picture and it was ok...
<img src="#Server.MapPath("~/Folder/SubFolder/Subfolder/ImageName.png")" />
I hope this will help
Adam
I faced the same problem and I found a workaround, not a nice one, but it suits my needs.
It seems that Rotativa(Wkhtmltopdf?) have a problem with images which are returned from http handler (at least my case). So to handle this situation, in controller action before return new ViewAsPdf... my code manually save file to some local 'temp' folder and replace 'src' of images in rendered view with paths to that local files in server path manner, eg: http://localhost/img/temp/trend-image.png.
This is not a nice solution, if you already found better one, let me know.
Adding the attribute [System.Web.Mvc.AllowAnonymous] to the controller method returning the image solved the problem for me.
It seems to work okay via css...
I was trying to display a logo at the top of the page and switched it with a div and set the height and width to that of the image.
CSS:
div.logo {
background-image: url("/images/logo/logo.png");
height: 53px;
width: 185px;
}
HTML:
<div class="logo"></div>
I found that with my pages, the images were not showing because they were .gif files.
Rotativa can have problems with gifs.
When I changed the images to .jpg or .png everything worked well.
I think it might come down to basically the ".png" bit being missing.
You could add a mapping like this /nonreg-report/01495344/trend-image.png ยป /nonreg-report/01495344/trend-image and have both of the urls active, why not? That way wkhtmltopdf is fooled and you still have your dynamic image without saving it anywhere on disk. Dynamic urls can work, I do that for live-converting gif2png for wkhtmltopdf.
Also it might help to have an absolute url, which I think you can do with something like this:
src="#Url.Action("trend-image", "NonReg_Reports", null, Request.Url.Scheme)"
If you are specifiying height and width then make sure you should write it in style tag
like <some-tag style="height: 100px; width:100px">
I'm trying to open an image in new brrowser tab like this:
<a href="" target="_blank">
<img height="660px" width="420px"
src="<%= Url.Action("WebPageImage", "WPMManagement", new { id = actualId }) %>"
alt="bild mit webseiten version" />
</a>
I need to show just an image and nothing else (no styles etc.)
What about href? What do I need in it?
Change the href attribute to the URL of your image and you're good to go:
Click here to view the image
EDIT: If you're retrieving images from the database, then you'll need Url.Action rather than Url.Content. Check out this question for a similar discussion about retrieving images from a database.
EDIT #2: Updated the example code to use Url.Action rather than Url.Content
There are lots of questions about how to force the browser to cache or not to cache any image. But, I am facing slightly different situation. In several places of my web page, I am using following code for the images.
<img title="<%= Html.Encode(Model.title)%>"
src="<%= Url.Action(MVC.FrontEnd.Actions.RetrieveImage(Model.SystemId))%>"/>
So, in the generated HTML it is like
<img title="blahblah" src="http://xyz.com/FrontEnd/Actions/RetrieveImage?imageId=X">
Where X is some integer. I have seen that though the browser (IE or Mozilla) caches images by default, it is not caching images generated by above method.
Is there any way I can tell browser to cache images of above type?
Thanks in advance.
In order to do this you can set the Expires and MaxAge headers of the response. To simplify things, you can create a custom ActionFilter.
Here's a good guide in how to achieve this: ASP.NET MVC Action Filter - Caching and Compression