Viewing Adding images via HTML Snippet / Retina
Adding images via HTML Snippet / Retina
|
User: pumpkin 12 years ago
|
|
|
I didn't want to pirate [url=http://ragesw.net/easyweb-beta/viewtopic.php?f=6...t=1274...start=10:3vjtaftp]this[/url:3vjtaftp] thread, so I open a new one. [quote="Roddy":3vjtaftp]Basically what is being said here is that, if you use an image for this, your SEO will suffer because the search engine spiders can't look at images. If you insert a text box with the website name and hide it behind the image, the spiders will be able to read it but they won't put much importance on it and, as Paul has pointed out, Google sees this as spamming. If you must use an image, you should insert it using the <img> tag in an HTML snippet. This way you can include the "alt" attribute and possibly the "title" attribute which the spiders will be able to read. <img href="relative path to image" alt="Website Name" title="Website Name"/>[/quote:3vjtaftp]I use the same method so far (putting a H1 tag behind my header image for better SEO) I wonder if I will see the retina image on a retina screen when I use the html snippet like Roddy posted. After all, I can only use one image path in the <img> tag... and for the sake of the non-retina users it'll be the path to the non-retina image. ------------------------------- Darian new to web design ______________________ My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b> |
|
|
User: Roddy 12 years ago
|
|
|
Here's a demo using retina.js... http://roddymckay.com/EasyWeb/easyweb-codebox/retina-image.html ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Christopher 12 years ago
|
|
|
Will this work if the images are stored on another serving using an FTP? i.e. with Shadowbox using the standard Shadowbox code? It looks like an href=link, not an img (used only for thumbs). Thanks for the question Darian. I'm interested in this too. ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Roddy 12 years ago
|
|
|
The href attribute specifies a link's destination... <a href="http://www.website.comfolder/file.jpg">Link Text</a> The src attribute specifies the URL of a file... <img src="http://www.website.com/folder/file.jpg /"> Both contain the path to the image file so, if the image and the image@2x are in the same folder, the script will load the appropriate one. Why don't you read the javascript file - it's fairly obvious what it does! [code:kfxspq3j](function(){function t(e){this.path=e;var t=this.path.split("."),n=t.slice(0,t.length-1).join("."),r=t[t.length-1];this.at_2x_path=n+"@2x."+r}function n(e){this.el=e,this.path=new t(this.el.getAttribute("src"));var n=this;this.path.check_2x_variant(function(e){e......n.swap()})}var e=typeof exports=="undefined"?window:exports;e.RetinaImagePath=t,t.confirmed_paths=[],t.prototype.is_external=function(){return!!this.path.match(/^https?\:/i)......!this.path.match("//"+document.domain)},t.prototype.check_2x_variant=function(e){var n,r=this;if(this.is_external())return e(!1);if(this.at_2x_path in t.confirmed_paths)return e(!0);n=new XMLHttpRequest,n.open("HEAD",this.at_2x_path),n.onreadystatechange=function(){return n.readyState!=4?e(!1):n.status>=200......n.status<=399?(t.confirmed_paths.push(r.at_2x_path),e(!0)):e(!1)},n.send()},e.RetinaImage=n,n.prototype.swap=function(e){function n(){t.el.complete?(t.el.setAttribute("width",t.el.offsetWidth),t.el.setAttribute("height",t.el.offsetHeight),t.el.setAttribute("src",e)):setTimeout(n,5)}typeof e=="undefined"......(e=this.path.at_2x_path);var t=this;n()},e.devicePixelRatio>1......(window.onload=function(){var e=document.getElementsByTagName("img"),t=[],r,i;for(r=0;r<e.length;r++)i=e[r],t.push(new n(i))})})();[/code:kfxspq3j] ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Christopher 12 years ago
|
|
|
As clear as Evian water in a potter's mug.
------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Roddy 12 years ago
|
|
|
Now that's the best description of javascript that I have ever heard!
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: pumpkin 12 years ago
|
|
|
Whatever you see in a jug of water, I don't ;) Anyhow, I'll try this. But of course it'll be nicer if EasyWeb would do it without using such .js tricks, or - even better - if EasyWeb would offer to add titles and alt tags to images <nods> ------------------------------- Darian new to web design ______________________ My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b> |
|
|
User: Roddy 12 years ago
|
|
|
EasyWeb inserts images as the background to a div. This has some advantages but it means that it can't have an "alt" attribute. Any image which is important to the content of your website should be inserted using the img tag and not as a background image. The adjective "background" should give you a clue to its importance! One solution would be to have an image widget with fields for alt, title and caption (and width, height, border, box shadow, padding). Perhaps that might be an appropriate suggestion for the Feature Requests section of this forum? It should interest those who actually use images that are relevant to the rest of their website content. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: pumpkin 12 years ago
|
|
|
So, I tried using this way and replaced the logo on all pages. Now can someone check if it loads the retina image (the colourful Singkehlchen logo)? I can't, because I don't have a retina device. Oh, and should I replace the images on the mobile sites too? Or is this not so relevant for mobile browsing?
------------------------------- Darian new to web design ______________________ My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b> |
|
|
User: Christopher 12 years ago
|
|
|
I was going to say no. But then the image changed in front of my very eyes. So I think it must read the script after the page has loaded? Either way, I'm using a retina macbook pro 15". Here's a snap from it:
------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
 Screen Shot 2013-09-23 at 11.14.16 AM.png |
|
|
User: pumpkin 12 years ago
|
|
|
Cheers Christopher! Need to see that myself. Changing in front of your eyes? <!-- s:shock: --><img src="{SMILIES_PATH}/icon_eek.gif" alt=":shock:" title="Shocked" /><!-- s:shock: --> So it loads the normal image first and then the retina version? That's not the way it should work, isn't it? But hey, it works. Thanks again!
------------------------------- Darian new to web design ______________________ My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b> |
|
|
User: Roddy 12 years ago
|
|
|
Here's a better example where I have annotated both versions of the image and put it at the top of the page so that you can see it change from one to the other on a Retina machine... http://roddymckay.com/EasyWeb/easyweb-codebox/retina-image.html ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Christopher 12 years ago
|
|
|
Hey guys, I think the retina.js has been updated. These are the contents in the download folder: Roddy, what's the difference? I'll give it a go with the first one and look forward to your response re: the .min.js file? ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
 Screen Shot 2013-10-07 at 9.23.29 AM.png |
|
|
User: Roddy 12 years ago
|
|
|
"min" stands for minified. You should always use this version as it will download faster. The min version has been optimized to take out all the spaces and returns. The un-minified version is for those who want to "read" the javascript and perhaps modify it. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Christopher 12 years ago
|
|
|
Thank you sir!
------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
| Post Reply |
| You must login or signup to post. |