10 sie 2018

Gulp workflow: minimalizacja zdjęć i konwersja na webp

Kiedyś w zamierzchłych czasach używałem perla + lib ImageMagick do konwersji zdjęć, ale mamy XXI wiek i Node 😉
Od jakiegoś czasu zmienił się mój workflow dotyczący obróbki zdjęć na potrzeby stron internetowych.
Do tej pory używałem gulp-image, gulp-imagemin i wiele innych, ale zawsze coś było nie tak, zawsze czegoś brakowało.
Ostatnio używam takiego zapisu jak poniżej

<picture>
    <source class="img-responsive" srcset="./images/thumbnail/IMG_5600.webp" type="image/webp"/>
    <source class="img-responsive" srcset="./images/thumbnail/IMG_5600.jpg" type="image/jpeg"/>
    <img decoding="async" class="img-responsive" src="./images/thumbnail/IMG_5600.jpg" alt=""/>
</picture>

i potrzebowałem również webp, no i co następna biblioteka gulp-webp jest potrzebna 🙁
Mały research i okazało się że jest biblioteka sharp, która bardzo dobrze zastępuje ImageMagick więcej na tej stronie. Biblioteka ta jest w stanie zastąpić wszystko co do tej poru używałem.

24 lip 2008

Uruchomienie tinyMCE zmożliwością edycji tabel

<script language="javascript" type="text/javascript" src="../edytor/jscripts/tiny_mce/tiny_mce.js"></script>
tinyMCE.init({
    mode: "exact",
    elements: "strona_fragment",
    theme: "simple"
  });

  tinyMCE.init({
    mode: "exact",
    elements: "strona_tresc",
    theme: "advanced", theme_advanced_styles
      theme_advanced_buttons3_add: "separator,fullscreen",
    theme_advanced_buttons3_add_before: "tablecontrols,separator",
    theme_advanced_styles: "Tabela Podstawowa=table",
    plugins: "advimage, fullscreen, table",
    external_image_list_url: "../edytor/example_image_list.js"
  });

za edycję tabel odpowiada plugins table

plugins: "advimage, fullscreen, table",