Skip to content
📑 JS-скрипт, который подскажет порядок картинок в длинном документе
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
src
.editorconfig
.gitignore
README.md

README.md

📑 Инструмент для понимания порядка картинок в html-формате Google Docs

Что происходит?

Как использовать?

  1. Сохранить документ через меню «Файл» → «Скачать как» → «Веб-страница (HTML, ZIP-архив)»;

  2. В теле сохраненённого html-документа перед тегом </body> подключить два скрипта и определить корректное название картинок в переменной imgName:

    <script>
      var imgName = 'new_image_item';
    </script>
    <script src="https://4enki.github.io/google-docs-images/dist/google-docs-images.min.js"></script>
  3. Обновить html-страницу.

  4. Вручную псереименовывать картинки в папке /images.

В консоле браузера дублируется информация по каждой картинке.

Демо: как выглядит в браузере

Пример того, как скрипт google-docs-images подсказывает путь конкретной картинки

Ещё на эту тему 🔥 🔥 🔥 🔥 🔥

  • Google Doc to clean HTML converter;

    Эта штука работает через встренный редактор скриптов в Google Docs. Сложна в подключении и настройке. Но умеет присылать картинки в хронологическом порядке на почту.

Что дальше-то?

  • Гист-файл превратить в полноценный репо. Создать один js-файл, который сможет всё;
  • Переписать без jQuery, ванильненько;
  • Отдавать минифицированную версию JS;
  • Вытащить параметр нового имени картинки в отдельный тег при подюкючении;
  • Унифицировать классы и имена переменных, чтобы не пересекаться ни с чем;
  • Рассказать в README историю полную боли;
  • Скриптом сохранять картинки с правильным порядковым номером в суффиксе и именем из перменной;
You can’t perform that action at this time.