So, I'm on a wiki, and I'm putting a personal image on. In order to not waste space and possibly risk image policy, I am uploading the image to Imgur and using HTML to put it in my Userspace using this code:
<div style="text-align:left" alt="Chronoculars">https://i.imgur.com/0iTLJ3O.png</div>
However, the file I uploaded is too hi-res, and it displays too large when put on the webpage. I have found several fixes to the problem, but they all require external CSS, which I cannot do because this is all on a wiki.
Can I resize the image inline?
<div style="text-align:left;" alt="Chronoculars"><img style="height:500px; width:500px;" src="https://i.imgur.com/0iTLJ3O.png"></div>
Related
I am having an issue with the use of LazyLoad plugin from the original appelsiini.net.
When using the structure of
<img... />
<img... />
<img... />
That above works. But I am having another structure that is needed.
<div class="col-2-3">
<img lazyload-img ...>
<div>
<div class="col-1-3">
<p>Title+desc for image</p>
<div>
But for this usage - I am having no luck. I have looked at options, and tried to find answers. But did not.
Is the LazyLoad only for sequential img-tags? Or can this not be done with img-tags wrapped in divs?
Thank you.
Did you try this technique from the plugin page?
When Images Are Not Sequential
After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong. You can control loading behaviour with failure_limit option.
$("img.lazy").lazyload({
failure_limit : 10
});
Setting failure_limit to 10 causes plugin to stop searching for images to load after finding 10 images below the fold. If you have a funky layout set this number to something high.
If you are using Lazy Load 1.8.0 you can specify the containers
$(".col-2-3 img").lazyload({ container: $(".col-2-3") });
It would be helpful to see the jQuery used to initialize the lazy load that works.
I tried different things, until I stopped understanding anything about everything.
But later on, when reverting - I did get it to work. But not by adding container or any other special options.
I guess it could have something to do with adding some clearfix to some containers somehow.
Thanks for your responses.
Here is the URL though for you curious people ;)
http://snickerietivarberg.se/wordpress/referenser/trapp-trappracken/?codekitCB=400070072.155490
I have my web template (made in Photoshop) ready and set to upload to server; however, if user hides/disables images, website will be blank because all the text is on the images.
I have created the CSS layout and want to make a text version of the website, but how do I achieve this without having the text overlap the image?? I want the user to still see a text version of the website in case they disable the images on their browser.
HTML CODE:
<div id="main_divs_container">
<div id="left_div"><img src="images/left_div.jpg" width="249" height="622" alt=""></div>
<div id="index_middle_div"><img src="images/index_middle_div.jpg" width="488" height="622" alt=""></div>
<div id="right_div"><img src="images/right_div.jpg" width="253" height="622" alt=""></div>
</div>
Place the text in your alt= tag.
That should show the text when images are blocked.
(That's pretty much the purpose of the alt tag, to represent content when a image is inaccessible, one way or another)
It won't be pretty when it contains a load of text, though, if it renders at all.
The best option would be to use the images (without text) as background, and add the text on top of it through HTML.
you have to create one html version of website. In photoshop we create template just for reference or client review (just for visual purpose.) . that is not the final output.
You can use a CSS Image Replacement (http://css-tricks.com/css-image-replacement/) to have text and images at the sime time in Your HTML (text not visible).
Than You have to write CSS styles, one that will show the images and hides the text, and second that will do the oposit.
Next just apply right style using JS to detect if user has blocked images or not :)
I'm not up to date on the latest CSS improvements, so I figured it was worth asking;
An <img> element is nicely written as <img src="/url.png" />, with the height and width auto or specified. I like CSS sprites for their obvious loading speed advantage, yet hate writing out all that CSS for it. Is there, or will there ever be, a syntax like <img src="/url.png" Xpx Ypx />, where X/Y represent a location shift similar to CSS's background-position?
I understand that it would be wonky with regards to image dimensions, as they scale in HTML (as opposed to cropping, like a div with a background image would).
Is this possible, or am I just being lazy?
Can't imagine that ever coming to pass, and even if it did you'd have the usual cross-browser issues for years. There are numerous services that can work out the CSS/coordinates for you - e.g. SpriteCow.
There isn’t anything in HTML like that at the moment.
You could use inline CSS on the image tag, if you’ve got a 1-pixel transparent gif or png handy:
<img style="background: url(/url.png) -Xpx -Ypx;" src="/1pix.gif" />
But you’ll need to set the width and height of the image element so that the sprite background is visible.
You could avoid the need for a transparent image file by including it directly in the <img> tag as a data URL:
8-bit PNG
<img style="background: url(/url.png) -Xpx -Ypx;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAABlBMVEX///8AAABVwtN%2BAAAAAXRS%0ATlMAQObYZgAAAApJREFUCB1jYAAAAAIAAc/INeUAAAAASUVORK5CYII%3D%0A">
GIF (smaller)
<img style="background: url(/url.png) -Xpx -Ypx;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D%0A">
(See http://jsfiddle.net/r727j/1/)
But obviously we’re getting into fairly ugly territory here. (And I couldn’t swear that the data URL will work in IE 6.)
The sprite itself is generally used to combine many small images into one large image. This is done not only save precious loading time and bandwidth, but also to keep your site structure clean and manageable.
example
{background-position:0px -143px;} /* what ever*/
I want to send html body email like below with background-image css to my users :
<div style='width:500px;height:1000px;background-color:black;background-image:url(http://upl0ad.org/images/mylogo.gif) repeat scroll left top;'>
My Content
</div>
but as the link below says google does not support background-image css!
http://www.campaignmonitor.com/css/
what can I do about that?
Have you tried setting the background attribute of a table?
This is the recommended method detailed in the following Mailchimp blog post: Background Images and CSS in HTML Email.
Example (Tested in Gmail)
<table background="https://www.google.com/intl/en_com/images/srpr/logo3w.png" width="275" height="95">
<tr>
<td>
Email Content...
</td>
</tr>
</table>
You can't do anything about it. Using CSS to set background image is not supported in many web-mail application because of security reasons.
The only way to actually show background behind text is to create an image with text on it and display it using <img src="##" /> tag. Though, always remember to add link to text version of your email and/or link to web-page based copy of your newsletter.
Additoinally, you need to remember that newsletter design is very different to website design. You need to ignore all usual standards, you need to use tables, inline styles, img tags etc.
Check out this page for few good suggestions: http://www.sitepoint.com/code-html-email-newsletters/
Also MailChip (probably most popular Newsletter management system) has few very good suggestions on how to code HTML emails: http://kb.mailchimp.com/article/how-to-code-html-emails
Update as of 2019. While there are issues with adding background image from inline image on the email (at least I did not find a way to make it work). Actually css-background image works fine on at least some elements as long as they are absolute urls to resource, my snippet that works on gmail as of June 2019:
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-image:url('https://via.placeholder.com/30x300/09f.png');background-repeat:repeat-x">
This makes me wonder why it didn't work for the author. I have few theories:
a) back then it didn't work
b) it does not work on div elements
c) link was broken
d) missing single quotation mark
e) single and not double quotation mark around attribute style
f) despite the width and height on style, div was of 0x0 size
(Some of those above sound stupid)
What eventually worked for me is changing an image extension from .svg to .png
It seems Gmail doesn't support .svg images.
I am creating and sending HTML e-mails.
I'm using markup like
<table style="background: url('http://example.com/App_Sprites/image.gif');>
However, the images do not appear when I download messages containing this sort of markup from an e-mail client. When I do things like
<img src="http://example.com/App_Sprites/image.gif" />
the images download fine.
I need the image to be a background because I need to show some text over it. Can I use the image tag and position the text over it somehow? Or should using the background image actually be working, and something else may be wrong?
Html emails usally don't download background images.But there is a trick you can do.
<div style="z-index:10;position:relative">your text here</div>
<img src="http://example.com/App_Sprites/image.gif" style="margin-top:-20px" />
play with margin-top number
The background property works on some email clients use this as a reference. This is very useful.
I would avoid using background images and stick to solid colors, the reason why is because not all email clients are going to have this feature and capability to see the background image.
or use base64 directly =)
hm divs are even better than tables