@nikita.kachaev

Как в Tilda добавить обложку для mp4-видео с сервера

2025-07-17T05:06:40.579Z

Я решил перестать использовать Ютуб и РуТуб для видосов на сайтах. Первый уже не всем доступен, а второй гонит адское количество рекламы. У меня видосы лежат на обычном сервере, так как трафик не очень высокий.

Но не все блоки Тильды с видосами позволяют ставить обложки, из-за этого на привью показывается только первый кадр. Ниже код, который ищет mp4 из списка и подставляет для них одноименные jpg в качестве обложки.

<script>
function replaceVideoPosters() {
  // Список видео для замены
  const targetVideos = [
    'https://docs.atoevents.ru/email/video/2025/airtravelsochi/aitravelsochi-report24_v2.mp4',
    'https://docs.atoevents.ru/email/video/2025/airtravelsochi/aitravelsochi24_batanov.mp4'
  ];

  // Ищем все блоки (включая те, что могут появиться позже)
  const blocks = document.querySelectorAll('.t1061__wrap-video');

  blocks.forEach(block => {
    const video = block.querySelector('.t-video-lazyload video');
    if (!video) return;

    const source = video.querySelector('source');
    if (!source || !source.src) return;

    // Проверяем, есть ли видео в списке для замены
    const matchedVideo = targetVideos.find(url => source.src.includes(url));
    if (!matchedVideo) return;

    // Заменяем постер
    const posterUrl = source.src.replace('.mp4', '.jpg');
    video.setAttribute('poster', posterUrl);
    console.log('Постер заменен для:', source.src);
  });
}

// Запускаем сразу при загрузке
document.addEventListener('DOMContentLoaded', replaceVideoPosters);

// И на случай динамической подгрузки
new MutationObserver(replaceVideoPosters).observe(document.body, {
  childList: true,
  subtree: true
});
</script>

Код желательно поставить внизу сайта

Объединить порезанный архив: zip-файлы с google drive (макос)

2025-07-08T13:48:45.064Z

Как на macos объединить порезанный на несколько файлов архив скачанный с гугл драйв?

Стандартный архиватор

К сожалению, разархиватор установленный по-умолчанию выдает непотребные дубликаты.

Проблемы с кириллицей

unzip '*.zip' -d combined

А команда выше, пригодная для латиницы (или кириллицы сделанной на макос) выдаёт неотребсва в именах вида: unable to process _???????? ?+??????+????????? ATO Events/2020_7.????? ???? ? ?+?????? - 27 ??????????? -/?????? 27.10.20/???+???????.docx

The Unarchiver

Наткнулся на решение: https://questu.ru/questions/68201952/

upd: оригинал решения https://stackoverflow.com/questions/68201952/merge-combine-multiple-downloaded-zip-files-from-google-drive-on-mac

Инструкция

качаем https://theunarchiver.com/command-line (он не доступен из рф), поэтому вот ссылка https://disk.yandex.ru/d/1-WdAamtUnLEsQ

Перемещаем файл unar, например в Applications, щелкаем по нему правой кнопкой и зажимаем альт, копируем путь к файлу (у меня это /Applications/)
"Устанавливаем" unar. Открываем Terminal, в нем пишем три строки (выше есть ссылка на "оригинал решения" и другой вариант установки):

cd /Applications
/Applications % chmod +x unar
./unar

Следующая команда в терминале запустит текстовый редактор

nano ~/.zshrc

Надо будет вставить новую строку

alias unar='/Applications/unar'

И нажать ctrl+O для сохранения и кажется enter, так как там что-то спросят. Потом ctrl+X для закрытия редактора

И уже снова в терминале пишем

source ~/.zshrc

Теперь unar установлен

Помещаем все нужные архивы в одну папку и по этой папке снова левой кнопкой мыши, потом зажать альт и скопировать путь к папке. А потом в терминале (у меня это /Users/nikita7kachaev/Desktop/ziped/ — если есть пробелы, то надо взять в кавычки)

cd /Users/nikita7kachaev/Desktop/ziped/

И теперь ключевая команда распаковки и слияния файлов (точнее две строки, первая создает папку)

mkdir combined
for archive in *.zip; do unar "$archive" -o combined; done

Важное дополнение: поскольку при распаковке не_первого по счету архива может возникнуть ситуация, что папка уже создана, то система спросит что-то типа:

"combined/имя_папки" already exists.

(r)ename to "имя_папки", (R)ename all, (o)verwrite, (O)verwrite all, (s)kip, (S)kip all, (q)uit?

Я нажимаю O — так всё корректно сливается

Tilda. Как поставить неразрывный пробел в таблице?

2024-02-26T09:29:06.295Z

Если кратко, то надо ставить  

  воспринимается как просто пробел,
а #nbsp; в админке разбивает ячейку на две, но при этом всё равно после публикации воспринимается как пробел (sic!)

С удивлением обнаружил, что сработал стандартный html-код  

Simple real-world site design

2023-02-06T03:47:59.162Z

#web_design

all my works: http://nikitakachaev.ru/

Переделываю расписание

2022-11-06T17:55:11.629Z

Обычно я не участвую в конкурсах, но если задача особо близка моей душе, то можно.

Надо переделать расписание лагеря взятое из советской книжки.

Весь текст конкурса Игоря Штанга и Михаила Капанаги

Не до конца ясно: это расписание на стену или как листовка в карман. Пусть будет первое на случай изменений.

Работа с текстом

Для начала немного осовреременим текст, в паре мест я не справился, надо общаться с организаторами. И лучше начинать день с туалета, а не зарядки.

Главные проблемы

Но в оригинале есть и принципиальные проблемы:

Время поставленно справа от текста — сбиваешься со строк.
Время указано интервально — это излишне и замусоривает, поскольку один пункт следует сразу за другим.

Поправим:

Попробую горизонтально

Мне показалось удачным попробовать выразить время в длине ячейки и развернуть всё горизонтально. Хотя у нас и нет ограничений в формате бумаги, но такая колбаса это слишком, а в три строки смотрится не очень:

Или вертикально

А вот вертикально уже заверстывается прекрасно. Чтобы помочь понять, что время окончания одного пункта и начало следующего совпадают: временные отсечки смещены чуть выше основного текста:

Правда пришлось схитрить и сделать соответствие между высотой ячейки и временем не математически точным. Иначе 5 минут и 2 часа очень сильно будут контрастировать и опять получится полотно. Будем считать, что зависимость квазилогарифмическая, но близкая к линейной в основной массе.
Часы крупнее минут — это прием скорее для детской аудитории. Но между ними я привык ставить двоеточие, хотя с точкой чище.
Для времени применено так называемое Tabular Lining. Когда середина знаков цифр выровнены по одной вертикальной оси (это не совсем верное определение, но в нашем случае более очевидное). Альтернативой было бы Proportional Lining — тогда бы не было такой дыры между 1 и 1 в 11. Но тогда бы 21.40 и 22.00 были бы разной длины (и их точки были бы не на одной оси) — это не очень красиво для таблицы.

Гляну примеры

Ради хорошего результата не грех погуглить примеры расписаний. Мне понравилась идея с указанием утро-день-вечер — это помогает облегчить навигацию в таблице.

В остальном никакого откровения не случилось

Результат #1

Результат в виде чистой таблицы конечно суховат. Тем более в конкурсе явно просят не забыть, что аудитория дети и родители. Я попробовал добавить картинки, особо выделив время для еды. Но кажется таблица стала хуже читаться...

Иллюстрации взяты на graphicsurf.com

Результат #2 (упорядочиваю)

Поэтому сделал шажок назад, чуть успокоив верстку.

Логотип взят как пример у Наташи Байдужа (немного поменял шрифт, чтоб меньше контрастировало): bayduzha.com/projects/kavardak/

Картинки оживляют, но и помогают ориентироваться. Но не только как иллюстрация, а как заголовок разбивающий простыню текста (дробящий информацию).

Вариант #3 (упрощаю)

Но линейки всё же перегружают, а смещенные временные отсечки смотрятся необычно. И коль уж часы с минутами разного размера — применим более привычный и аккуратный шаблон. Что если добавить продолжительность для основных пунктов, а время еды покрасить?

Tabular Lining уродует локально, а Proportional Lining — глобально (см выше). Поэтому с вырвнивание часов-минут пришлось хитрить и делать что-то среднее (благо позволяет грешить значительное вертикальное расстояние).

Возможно, для всех пунктов без продолжительности стоило сделать одинаковую высоту. Но пусть эта, на первый взгляд, неряшливость вызовет вопросы, а в дальнейшем поможет увидеть, что 20 мин больше 10.

Внедрить пост LinkedIn стало сложнее

2022-09-15T19:25:38.455Z

Почему-то linkedIn отключил возможность копировать код для встраивания [в Tilda, например]. Или это актуально только для платных аккаунтов. Вот такой код раньше можно было скопировать:

<iframe src="https://www.linkedin.com/embed/feed/update/urn:li:share:6973239881816788992" height="850" width="550" frameborder="0" allowfullscreen="" title="Embedded post"></iframe>

Ключевое это 6973239881816788992 в конце. Но если просто копируешь ссылку на пост, то символы совсем иные.

https://www.linkedin.com/posts/kurt-hofmann-30374546_asiaconnect-hofmannaviation-luftfahrtexperte-activity-6973239883674861568-O9o-

6973239883674861568

Решение

В Chrome открываем нужный пост LinkedIn
Жмем правой кнопкой и выбираем в самом низу списка Inspect. (Аналогичное есть во всех браузерах).
Тыкаем на код, нажимаем cmd+F (или ctrl+F) вбиваем shareAudience — будет один результат: большой блок <code>...</code>
Тыкаем по нему Edit as html, копируем
Вставляем текст в блокнот (или Sublime Text) и снова ищем shareAudience и находим что-то типа: shareAudience":"PUBLIC","shareUrn":"urn:li:share:6973239881816788992

#linkedin

#embedpost

Tilda. Формы. Телефон. Маска. *

2022-07-08T19:30:12.793Z

— Как в Tilda при создании формы обозначить обязательные поля?

— Звёздочкой!

Но как поставить звёздочку в телефон с автоматической маской? Никак!

Поэтому ставим script в head, который всем таким полям добавляет звёздочку. Скрипт ниже, а head ищем в настройках сайта (последняя вкладка).

upd: Последнее время, по умолчанию, в настройках сайта отключены скрипты. Поэтому в последней вкладке настроек [сайта, не страницы] надо включить jQuery.

<script>$(document).ready(function(){
setTimeout(function(){
var placeh = $('.t-input-phonemask').attr('placeholder');
$('.t-input-phonemask').attr('placeholder', placeh + ' *');
},1000 );
$(document).mouseup( function(e){
    var div = $( ".t-input-phonemask__wrap" ); 
    if ( !div.is(e.target) 
        && div.has(e.target).length === 0 ) {
          var placeh3 = $('.t-input-phonemask').attr('placeholder');          
        if(placeh3.indexOf(' *') > 0 ){
$('.t-input-phonemask').attr('placeholder', placeh3);
} else {
    $('.t-input-phonemask').attr('placeholder', placeh3 + ' *');
}
    }
  });
});
</script>

#tilda

LinkedIn, почему ты тупишь?

2021-02-16T16:12:36.449Z

Появилась задача поставить обложку в профайл LinkedIn. Как педант загуглил размеры: 1584x396 для обложки личного профайла. Ну ок, наверное это размер для ретин-экранов, а в реальности будет 792x198.

Загружаю — мазня!

Картинка преобразована в 800x200, но отображается как 792x196. Ну ок, загружаю новую: 792x196. Теперь LinkedIn обрезает её до 792x195 и растягивает до 792x196. Зачем?!

Дальше-больше!

Прошу брата прислать скрин как так у него отображается. А у него вовсе ширина обложки 977, против моих 782. Хотя экран у него компактней: 1920x1080, против моих 2560x1440 (не ретина).

Итог: LinkedIn непонятно как ужимает картинки, непонятно как формирует размер рабочей области.