I'm working on a newsletter for my photo community website. In the newsletter, I want to have a grid of images. Here's an unfinished rendering in an email client. As you can see it has problems, this is only to illustrate what I'm trying to build.
The image files in reality are about twice the resolution as shown in the email. Furthermore, they can be in any aspect ratio and orientation. What I would like to achieve:
Force all images into 200 x 200px cells
Do not distort the image, the aspect ratio must be maintained
The cell must always be filled, both horizontally and vertically
Background sizing should be centered
Elements must be clickable, leading to that particular photo
Should be robust and work in most popular email clients
In normal web technology (as opposed to HTML in email), this would be a matter of setting the image container to the fixed dimensions and using background-size: cover. I've learned about many HTML email limitations yet am trying to persist in finding one way or another.
Am I really on an impossible mission here?
What I've tried so far:
Setting the image as a background on the a that wraps around the img tag. With some tweaks it can come to a reasonable result, yet centering is a problem and outlook.com does not show the images at all.
Using normal img tags with "a" around it and trying to control max width and height on the image and its wrapper. Here too centering is the main problem
I really hope this can be done, one way or another (not that server-side resizing is not an option in my case).
Since this is on an email client, you can't use any scripting language. This mean that manipulating the image is impossible on the client side of thing.
You will have to manually create thumbnails for your pictures or make some code that creates thumbnail server side before creating the email.
This is as much as I can tell you without knowing how you are creating your emails.
Related
I've just encountered a new issue that hasn't popped up in the 2.5 years I've been doing it. I send emails using Mailchimp and use HTML coding to format. Recently, my email campaigns have been clickable on desktop but spotty on mobile. Certain images will be clickable, certain ones won't - and when I return to the email, some new images are clickable or sometimes no images are clickable. It's very random. Below is an example of how I have always coded my emails. Picture of Code Used
You are using an area map to get precise locations on an image to link. However, on mobiles, those images are getting shrunk, depending on their size. Every email platform will shrink them differently, and depending on the content of the email, and the size of the images, they will shrink to different sizes.
So that explains the discrepancy you see. Now how to solve it?
Essentially, instead of providing one massive image, you need to use HTML + CSS, with tables and separate images and links. You need to lookup any modern resource on HTML emails and follow their guides or templates. This way, when the images move around to fit on mobiles, each image or word will have it's own link, and it will work consistently.
I'm coding a transactional email template and it's intended to have a header with a bottom-border with an inverted border radius (see attached image).
Originally I've attempted this with a background image which works fine as long as: (1) The user allows for images to be downloaded, of course, and (2) Most importantly, the email is viewed in desktop because when fiddling with responsiveness (bellow 600px width) things get really messy.
With using an image I was trying to avoid using complex CSS code given the varied levels of support in email clients. However, I'm thinking that it may be a better option to avoid the issue with responsiveness.
I've seen different methods to achieve this curve. For example, over-imposing an absolute element at the bottom of the div with the overflow hidden and adjusting the border radius values there. Not sure, however, if it would worth the effort.
Could you help me find the best way to approach this problem having in mind the limitation of emails.
PS. I'd be OK with a non-curved bottom-border as a fall-back in cases where the client can't render border-radius appropriately.
Can I make the img tag use the background-image properties? Like for example, I have these two pages here one has img and the other one has background-image tag. Notice in responsive version the img one squeezes the image, while the background-image one adjusts the image according to the size.
Page with IMG tag
Page with background-image tag
You can find both img and background-image in sub-header div ..
This'll sound a bit pedantic, but there are a few reasons for it.
An <img> element represents content on the page, something intrinsically important to see and understand. Background images are fluffy stuff to make the site look pretty but their removal would not impact the message.
You are mixing your use-cases. You should go with a background-imaged header in this case because the image isn't intrinsic to the message or content of the page.
Use an <img> element when you're displaying a graph, a photo someone took, etc.
Why?
The browser intentionally treats them differently, as you've noticed, placing a higher priority on showing the content of an <img> tag for example. It'll attempt to stretch the image to fit by default, while a background will simply be clipped.
When the user goes to print the page, it's much easier to remove background images via CSS media queries then it is to hide (the correct) IMG tags.
Background images also don't take up space in the DOM and cause fewer conflicts with other elements. IMG tags flow in the document and can easily get dislodged from their intended position (creating a lot of extra work to make them stay put).
Right-clicking a background image doesn't do much. Right-clicking an image gives you image related options, such as downloading or opening the image. This goes along with the theme of the <img> tag as content.
There are other reasons, but this all boils down to semantics. This may not seem like a big deal to you, but that's probably because you don't have a vision impairment (so you don't regularly use a screen reader) and aren't really thinking about web crawlers and the many other systems that attempt to extract meaning from the tags you've used.
You will be far better off for many, many reasons if you stop fighting the system and use it the way it was intended. Or, at least, know why you're bucking convention before doing so.
I'm using Bootstrap for a site. Apparently bootstrap defaults all images to width and height = 100%.
The site includes ads from an ad server, which include tracking pixels to track impressions etc. These pixel images have inline sizes of 0, but the css style overrides this.
The problem comes in that sometimes the img pixels are not valid image files, and so the images shows up with the little "x" in a box to shoe the image is missing. Since there is no way to know the "real" size of this image, the browser shows a little box, maybe 15 or 20 pixels square.
I've added styles for some pixels that identify them by name and set their sizes back to 0, but now I have a pixel that doesn't have a name or ID I can reference.
What I need to do is "erase" the default "auto" image size from at least the containers the ads are in. I don't want to remove this from the bootstrap css files, as this will just break any time I upgrade (as well as potentially break other bootstrap features).
Any ideas?
If you have 'rich' HTML banners you should always load them in an iframe. Not only does this make them insensitive to the CSS of the main page as illustrated by your problem, and in reverse ensures they don't break your own layout, it also prevents a lot of possible XSS exploits. Don't trust third party code in your application, neither for maintaining layout nor for being secure.
Another advantage of the iframe approach is that external resources, such as images, used by the banners may often load slowly from central CDNs, and are deferred by the iframe to load last after the containing page is loaded - so ads can never slow down your user experience.
There is really, apart from framing, no other way to reliably cancel 'some' CSS for just a few container elements - it's just not what CSS is supposed to do, its whole purpose is to be global for the entire document.
On a webpage I am rendering a collection of images. Some images are portrait orientation, some are landscape, all are larger than the desired render size.
I want to display these images in a gallery of neat, uniformly sized, square thumbnails.
How can I do thus using only CSS?
I would like to avoid a javascript library if possible. I don't need to select a part of the image to display, just any central-ish square area.
I've seen this question asked elsewhere, but have not yet found an answer that seems to work with all orientations (e.g., portraits may get correctly cropped/resized, landscapes do not).
You could still use server side technology to resize the image via cURL; however, that is neither here nor there. One thing to understand, CSS is not really a programming language, as in, it cannot make decisions or do any real math, so we can't make dynamic decisions with just CSS.
That being said, you could create divs for your gallery, and use CSS to set the background image to the desired image. In CSS3 there is a property called background-size. You can set the size in pixels manually, but it will not maintain aspect ratio that way, so it will probably look awful. Setting the background-size: cover will scale the image so that it completely fills the background area while cutting off the excess. Setting background-size: contain will scale the image so that it maintains its original aspect ratio and fills the background without cutting off the image. Here is a little code that kind of explains how to use it. jsFiddle
EDIT: I forgot to mention that this solution will only work in IE9+ (should work fine in FF, Chrome and Safari)
I suggest having a div wrap the images. You can specify a width and height on this wrapper with a overflow:hidden.