Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
csspre/src/documents/image-helpers.html.md.eco
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
25 lines (14 sloc)
1005 Bytes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
--- | |
layout: "post" | |
title: "Image helpers" | |
date: 2015-01-21 | |
description: "Helpers when working with images - automatically get image size or embed images in base64" | |
--- | |
If/else conditions are incredibly useful when you want a part of your code to depend on something else. This gives maximum flexibility to write the type of logic that meets your needs. | |
## Image size | |
If you need the exact dimensions of an image all preprocessors have a way to do that instead of you. | |
<%- @code('Image Helpers', 'dimensions') %> | |
## Inline image | |
Encoding images to base64 and inlining them in your stylesheets reduces the number of request a user will make on your site, here's how to automate the conversion of images to base64. | |
Note that for Stylus you need to use [the url function](http://learnboost.github.io/stylus/docs/functions.url.html#data-uri-image-inlining), the positive side is that you can use any name for the function - `inline-image` is just an example. | |
<%- @code('Image Helpers', 'inline') %> |