Mois : avril 2016

twitter-bootstrap 3.x, the easy way for customization

create an empty bootstrap.less inside your project that will import variables.less, then customize variables you want, then import bootstrap.less.

Less `@import` is an implicit « import once » (like the php `require_once`) , so the `@import variables.less` present in official bootstrap.less file will not reload the default variables.

This way allows you to update easier the twitter bootstrap library when you need.

@import "../twitter-bootstrap/less/variables.less"
@import "variables.less" // customize (or not) variables
@import "../twitter-bootstrap/less/mixins.less"
@import "mixins.less"

// in that file already imported .less will be not re-imported
// unless you explicitely ask it when compiling
@import "../twitter-bootstrap/less/bootstrap.less"
// Alternative : 
// instead of importing native bootstrap.less
// you can only take some importation

//== Custom
//
//## add your own specific rules here

 

Traitement des images en lignes de commandes

Quelques commandes rapides

# jesaisplus
$ convert -geometry 50x50 image_originale.jpg image_cible-50x50.jpg

# Agrandir une image (sera remplie par du blanc)
$ convert rectangle-150x300.png -extent 300x300 carre-300x300.png
# Découper une image 
$ convert rectangle-150x300.png -extent 300x300 carre-300x300.png
# Redimensionner une image (conserve les proportions)
$ convert rectangle-150x300.png -resize 300x rectangle-300x600.png
# découpe une image
$ convert rectangle-150x300.png -crop 100x300 rectangle-100x300.png
# output : rectangle-100x300-0.png (100x300) / rectangle-100x300-1.png  (50x300)


# Pour rendre une image transparente (méthode dite de Lapheuprait)
# source: image.png
# 1 - créer le masque de l'image
$ convert image.png -colorspace HSB -separate -negate image_mask.png
# 2 - générer l'image avec le canal alpha
$ feh image-mask-2.png
# après tests des différentes masques générés, le -2 était le bon pour moi
convert image.png -alpha Off image_mask-2.png -compose CopyOpacity -composite PNG32:image-avec-bg-transparent.png


convert image.png -alpha Off image_mask-2.png -compose CopyOpacity -composite PNG32:test.png

Et sinon grosso modo mon script pour générer toutes les bonnes favicon (merci https://realfavicongenerator.net/ pour la marche à suivre)

#!/bin/bash
# Ce script permet de générer les favicon nécessaires pour ếtre prises en comptes par la majorité des navigateurs. Ce script essaye de suivre les recommandations de https://realfavicongenerator.net/ :)

###############################################
# AVANT: créer deux fichier .png :            #
# un carré et un rectangle (pour windows) )   #
###############################################
 
original_file_square=/home/michael/test_favicon/baselogo-square-transparent.png
original_file_rect=/home/michael/test_favicon/baselogo.png
dest_path=/home/michael/test_favicon/

##############################################

# convert logo-base.png -extent 300x300! logo-square.png

args=("$@")
#echo ${args[0]}
#echo ${args[1]}
do_xml=0
do_ico=0
do_apple=0
do_ms=0
do_chrome=0

for i in $@; do
    if [ $i == '--xml' ]; then
        do_xml=1
    fi

    if [ $i == '--ico' ]; then
        do_ico=1
    fi

    if [ $i == '--apple' ]; then
        do_apple=1
    fi

    if [ $i == '--ms' ]; then
        do_ms=1
    fi

    if [ $i == '--chrome' ]; then
        do_chrome=1
    fi

done
#BEST:
#convert logo.png  -crop 2290x1300+630+80 logo-base.png
#SQUARE:
#convert logo.png  -size 2290x2290 -crop 2290x1300+630+80 logo-base.png
#exit


if [ $do_xml -eq 1 ]; then
    echo "do xml"
else
    echo "skip browserconfig";
fi



if [ $do_ico -eq 1 ]; then
    echo "do ico…"
    convert $original_file_square -resize 96x96 ${dest_path}favicon.png
    # The classic favicon, displayed in the tabs.
    convert $original_file_square -resize 16x16 ${dest_path}favicon-16x16.png
    # For Safari on Mac OS.
    convert $original_file_square -resize 32x32 ${dest_path}favicon-32x32.png
    convert $original_file_square -resize 48x48 ${dest_path}favicon-48x48.png
    # For Google TV.
    convert $original_file_square -resize 96x96 ${dest_path}favicon-96x96.png
    # Used by IE, and also by some other browsers if we are not careful.

        #${dest_path}favicon-96x96.png \
    convert \
        ${dest_path}favicon-16x16.png \
        ${dest_path}favicon-32x32.png \
        ${dest_path}favicon-48x48.png \
        ${dest_path}favicon.ico
fi

#convert $original_file_square -resize 70x70 ${dest_path}favicon-70x70.png

if [ $do_apple -eq 1 ]; then
    echo "do apple …"
    convert $original_file_square -resize 57x57 ${dest_path}apple-touch-icon-57x57.png
    convert $original_file_square -resize 60x60 ${dest_path}apple-touch-icon-60x60.png
    convert $original_file_square -resize 72x72 ${dest_path}apple-touch-icon-72x72.png
    convert $original_file_square -resize 114x114 ${dest_path}apple-touch-icon-114x114.png
    convert $original_file_square -resize 120x120 ${dest_path}apple-touch-icon-120x120.png
    convert $original_file_square -resize 144x144 ${dest_path}apple-touch-icon-144x144.png
    convert $original_file_square -resize 152x152 ${dest_path}apple-touch-icon-152x152.png
    convert $original_file_square -resize 180x180 ${dest_path}apple-touch-icon-180x180.png
    convert $original_file_square -resize 57x57 ${dest_path}apple-touch-icon.png
    #convert $original_file_square -resize 57x57 -round ${dest_path}apple-touch-icon-precomposed.png
fi

if [ $do_ms -eq 1 ]; then
    echo "do ms …"
    # for Windows 8 / IE11
    convert $original_file_square -resize 70x70   ${dest_path}mstile-70x70.png
    convert $original_file_square -resize 144x144 ${dest_path}mstile-144x144.png
    convert $original_file_square -resize 150x150 ${dest_path}mstile-150x150.png
    convert $original_file_square -resize 310x310 ${dest_path}mstile-310x310.png
    convert $original_file_rect -resize 310x150 ${dest_path}mstile-310x150.png
browserconfig='<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
	<msapplication>
		<tile>
			<square70x70logo src="/mstile-70x70.png"/>
			<square150x150logo src="/mstile-150x150.png"/>
			<wide310x150logo src="/mstile-310x150.png"/>
			<square310x310logo src="/mstile-310x310.png"/>
			<TileColor>#009900</TileColor>
		</tile>
	</msapplication>
</browserconfig>
'
echo "$browserconfig" > ${dest_path}browserconfig.xml
fi

if [ $do_chrome -eq 1 ]; then
    echo "generating for chrome …"
    # For Android Chrome M39+ with 0.75 screen density.
    convert $original_file_square -resize 36x36   ${dest_path}android-chrome-36x36.png
    #     For Android Chrome M39+ with 1.0 screen density.
    convert $original_file_square -resize 48x48   ${dest_path}android-chrome-48x48.png
    #     For Android Chrome M39+ with 1.5 screen density.
    convert $original_file_square -resize 72x72   ${dest_path}android-chrome-72x72.png
    #     For Android Chrome M39+ with 2.0 screen density.
    convert $original_file_square -resize 96x96   ${dest_path}android-chrome-96x96.png
    #     For Android Chrome M39+ with 3.0 screen density.
    convert $original_file_square -resize 114x114   ${dest_path}android-chrome-114x114.png
    #     For Android Chrome M39+ with 4.0 screen density.
    convert $original_file_square -resize 192x192 ${dest_path}android-chrome-192x192.png
fi