When building a static HTML site, you can set the base url like so <base url="http://localhost:8888/mysite" />. Supposedly when you insert, say, an image, you can do so from that base url like so <img src="/img/logo.png" />, which is equivalent to <img src="http://localhost:8888/mysite/img/logo.png" />
My problem is that these relative links don't work when I move the site around, which is a pain because I'm trying to share it with someone on Dropbox. I thought I could just chage the base url to <base url="http://dl.dropbox.com/u/xxxxxxxx/mysite" />, but the image links are looking here: <img src="http://dl.dropbox.com/img/logo.png" /> instead of the full base URL I set in the head.
Why is this?
Lose the leading / to make it a relative URL:
<img src="img/logo.png" />
There are 3 types of URL:
Fully Qualified, e.g. http://example.org/path/to/file
Absolute, e.g. /path/to/file (assuming the link comes from any page in the example.org domain)
Relative, e.g. path/to/file (assuming the link comes from the root (/) "folder" or there is a base URL http://example.org/)
or to/file (assuming the link comes from within the 'path' "folder" or the base URL is http://example.org/path/)
I'm aware that I'm a little late to the game on this one, but you should really be using Rails asset tags instead of raw HTML here.
For instance, instead of using:
<img src="/img/logo.png" />
You should use:
<%= image_tag 'logo.png' %>
Assuming that:
You're using .erb files for your source pages
You've set the image asset path to /img/ in your config.rb file
Alternately, you could reference CSS with:
<%= stylesheet_link_tag 'file.css' %>
Javascript files can be included with:
<%= javascript_include_tag 'file.js' %>
Since Middleman allows you to control whether or not assets are referenced relatively (by uncommenting some lines in config.rb), using Rails asset tags make much more sense than static HTML ones. I highly recommend switching if you haven't already done so. If you have any further questions about ay of these tags or the ERB syntax, feel free to ask away on here!
Related
Each time I try to add an image to visual studio code I keep having to inspect and get the entire image source code.
I would like to just use /images/down-chevron.png.
Any help?
Thanks!
Example of my code:
<img src="file:///C:/Users/tashe/Downloads/CODING%20CAGES/Cleant%20Dental%20services/images/up-chevron.png" id="upArrow" onclick="upArrow()">
<img src="file:///C:/Users/tashe/Downloads/CODING%20CAGES/Cleant%20Dental%20services/images/down-chevron.png" id="downArrow" onclick="downArrow(
</div>
You're almost there. Just replace the "file:///C:/Users/tashe/Downloads/CODING%20CAGES/Cleant%20Dental%20services" with a dot from the src attribute and you'll be good to go.
<img src="./images/down-chevron.png" >
In VS Code, depending on your autocomplete settings, each time you write src, should give you options for autocomplete including the images folder.
You could store the images you'd like to use in a folder called img inside of the folder where your HTML and css live. Then for the img tag in the HTML you could use something like
<img src="./img/down-chevron.png">
The ./ lets you navigate through the working tree. Using ../ would go back two directories if needed.
Is there a ('newbie-simple') way to embed an image inside html, however not in the inline form as usual:
<img src="data:image/png;base64,iVBORw0KGgoAAAA [...]" />
but in a form where the base64 code is placed on the end of the html file?
A possible benefit of this method would be that an image can be inserted in the page on more than one place using the same image data from the bottom of the html file.
TL;DR: With pure HTML/CSS - unfortunately no.
I need that too for Sciter Notes project to save notes (plain HTML files) with embedded images.
Ideally you should be able to do something like this:
<img src="cid:1234" />
...
<data id=1234 type="image/png" base64>
iVBORw0KGgoAAAA...
</data>
but unfortunately no such mechanism yet.
But you can implement schema explained above with script though.
If you are using HTML5, then you do not have to worry about caches. The browser will load all images and store them into an image-list, therefore the image will be loaded only once and reused at every place the key (the URL to the source image) is found.
The only thing you will have to do, if you are only using HTML, is to copy the URL of the image into every place you need to use it. This is necessary, because you cannot declare variables in HTML and hence cannot change them from another place in the document. For this purpose you would need additionally javascript for example.
Then you can go ahead with CSS to adjust the pictures to your requirements. Yu can either define classes in the header and let the img tags have these classes, or you can type the style properties inline or you can import an external CSS-file.
EDIT:
An example with javascript would be to add this code in
<body>
<img id="img" src="myIMG.jpg">
<script type="text/javascript">
function changeImage(id, src) {
document.getElementById(id).src=a;
}
</script>
</body>
Here the function changeImage is declared now. You can call this function either via onclick or inside of the script tag. You can address the correct image through its ID as first parameter (you will have to give every image its ID, don't confuse it with the image-list of your browser, here you define the ID in the img-tag) and the new source url as second parameter.
In Rails, how can I render stored HTML and display it with working, absolute links? I have a chunk of HTML that I am calling html_safe on from a view page. When I load the page in the browser, all of the links from that HTML render as relative URLs on my own domain rather than absolute links to the original destination.
In my console or as a result of a form:
#company.about = "Some info about a company."
In the view:
<%= #company.about.html_safe %>
What renders in the browser (relative URL):
Some info about a company.
What I would like to render in the browser (absolute URL):
Some info about a company.
PS - I realize that doing this isn't great practice. But it's not user-submitted content, just my own. And it's a temporary workflow until I decide how to better structure my model to accommodate these links. I'm more surprised that can't find more detailed information on what html_safe actually does w/r/t to links.
I've tested this on my rails app, and run (check how i use ' and "):
#company.about = 'Some info about a company.'
<%= #company.about.html_safe %>
have you tried with raw?
<%= raw #company.about %>
or something so (it's not tested, i use this method into prawn, maybe can run:
#company.about = "Some info about a #{company}."
Personal suggestion. You can save your about column as markdown text.
Then use redcarpet or something markdown gem to translate model content to html text.
It's safer (redcarpet will deal with it) and more customizable(markdown).
If you use the _url suffix, the generated URL is absolute. Use _path to get a relative URL.
<%= link_to "Home", root_url %>
<%= link_to "Home", root_path %>
also look at plugin: http://www.simonecarletti.com/blog/2009/10/actionmailer-and-host-value/
I have a div that has a dynamic background image. The background image url is logged in a database. I'd also like to replace this image with a dynamic GIF (which is logged in the same table) when the div is hovered over...but I'm struggling with figuring out a clean way to do this.
Here is a brief snippit from the html.erb file I'm working with...it seems that I cannot use the hover selector in in-line HTML, so I'm not sure if I need to resort to JavaScript? I'd essentially like to replace blah.jpg with blah.gifon:hover.
<% #workout[:image_url] = "blah.jpg" %>
<% #workout[:gif_url] = "blah.gif" %>
<div class="image-wrapper">
<div class="workout-image" style="background-image:url(<%= #workout[:image_url] %>)">
</div>
</div>
EDIT:
It works now using <script> tags.
<head>
<script>
document.head.insertAdjacentHTML('beforeend', '<style>.workout-image:hover { background-image:url("blah.gif");}</style>');
</script>
</head>
Unfortunately this can't be solved using raw CSS, as you can't target pseduo-selectors with inline CSS. However, it's possible to get around this using JavaScript. What you need to do is add the following to your page:
<script>
document.head.insertAdjacentHTML('beforeend', '<style>.workout-image:hover{background-image:url(<% #workout[:gif_url] %>);}</style>');
</script>
That should append CSS styling of .workout-image{background-image:url("blah.gif");} to the end of the head section.
Another solution would be to simply use an external css.erb file instead of a .css file, in order to process Ruby variables directly:
.workout-image:hover {
background-image:url(<% #workout[:gif_url] %>);
}
Be aware that using ERB in CSS will only work if the file is loaded ad-hoc, and will not work if you precompile your assets! You can get around this using the SCSS Rails Preprocessor, assuming you have access to, and want to use, SASS.
Hope this helps :)
i'n a mine rails app i'm changing the html part of a page (localhost:3000/feeds), in the file index.html.erb i set the background this way
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
body
{
background-image:url("../../assets/images/wwi.jpg");
}
</style>
</head>
</html>
the directory are set this way:
->app
->assets
->images
->wwi.jpg
->views
->feeds
->index.html.erb
but when i start the rails server and the go to localist:3000/feeds there's no background (i had no problem for background-color)
You are not using rails asset pipeline by writing your css inside views. If you look at docs it says
Asset pipeline concatenate assets, which can reduce the number of requests that a browser makes to render a web page. Web browsers are limited in the number of requests that they can make in parallel, so fewer requests can mean faster loading for your application
*So you should use it and for that first of all remove all the styles from your layout or views and you need to include rails application.css in your layout file by
<%= stylesheet_link_tag "application", media: "all" %>
This tag will make rails use look for your styles inside assets/stylesheets/application.css. Now you need to require the style.css.erb you just made to include your styles by
*= require style
Now inside your style.css.erb you can have your style like this:
body{
background-image: url(<%= asset_path 'wwi.png' %>)
}
Update:
If you want to use sass instead then your file would be style.css.scss and can use rails image-url helper, so you can do:
body{
background-image: image-url('wwi.png');
}
For more details refer to rails asset pipeline
When using the assets pipeline, path should be relative to the root
background-image:url("/assets/wwi.jpg");
images is assumed.
Also you can use the assets helper
<%= asset_path 'wwi.png' %>
I recommend you read the documentation of the assets pipeline
http://guides.rubyonrails.org/asset_pipeline.html