Snippet de Image Replacement para o Textmate
Leia em menos de um minuto
Se você usa o Textmate ou o E Text Editor (para Windows) pode usar um snippet que criei e que é muito útil. Ao arrastar uma imagem para uma regra CSS, ele cria a regra a seguir automaticamente:
span {
background: url(image.png) no-repeat;
height: 60px;
width: 60px;
}
O mais legal é que a largura e altura são preenchidas baseadas no tamanho da imagem. Para isso, usei a função getimagesize
do PHP. Bacana, né?
Acesse o menu "Bundles › Bundle Editor › Show Bundle Editor" e crie um "Drag Command" para CSS. Adicione o seguinte código:
echo $TM_DROPPED_FILE | php -r '$f = fopen("php://stdin", "r"); $file = trim(fread($f, 512)); list($width, $height) = getimagesize($file); echo "background: url($file) no-repeat;\nheight: ${height}px;\nwidth: ${width}px;";'
Lembre-se de definir o escopo para scope.css
. É assim que ele deve ficar: