я снова подумал об изображениях в социальных сетях. Вы знаете, изображения, которые (могут) отображаться, когда вы делитесь ссылкой в ​​таких местах, как Twitter, Facebook или imessage. По сути, вы оставляете деньги на столе без них, потому что они превращают обычный пост с небольшим количеством старой ссылки в его в пост с большим изображением Honkin 'Hatter ’’ на нем с огромной областью клика. Любого изображения на веб-сайте изображение в социальных сетях может быть самым популярным, наиболее запоминающимся, наиболее запоминающимся сетью изображением на сайте.

] это, по сути, этот кусочек HTML заставляет их происходить:

, но обязательно прочитайте на нем, так как есть куча других других тегов HTML, чтобы получить правильно.

я думаю, что я думаю об этом снова, потому что у Github, кажется, есть новые карты социальных сетей. Это новые, верно?

эти изображения в социальных сетях GitHub четко программно сгенерированы. Проверьте пример URL.

Automation

, хотя я думаю, что вы можете получить много удара от полностью созданного вручную изображение социальных сетей, это не практично для сайтов с множеством страниц: блоги, электронная коммерция… вы понимаете, что я имею в виду. Хитрость для таких сайтов состоит в том, чтобы как -то автоматизировать их создание с помощью шаблона. Я упоминал об этом в прошлом других людей, но давайте повторим:

• Drew Mclellan: динамические изображения социального обмена
• vercel: открыть изображение графика в качестве услуги
• Phil Hawksworth: Social-Image-Generator
• Ryan Filler: Automatic Social Share Images

вы знаете, что общего у всех? Кукольник.

кукольник - это способ развернуться и контролировать копию без головы Chrome. У него есть невероятно полезная особенность, чтобы сделать экранинг окна браузера: wait page.screenshot ({path: 'scenshot.png'});. Вот как наш веб -сайт шрифтов кодирования делает скриншоты. Идея скриншота - это то, что заставляет людей двигаться. Почему бы не спроектировать шаблон социальных сетей в HTML и CSS, затем попросить кукловода в экране его и использовать это в качестве изображения социальных сетей?

мне нравится эта идея, но это означает, что она имеет доступ к серверу узлов (кукловорот работает на узле), который либо работает все время, либо вы можете нажать как без сервера. Поэтому неудивительно, что эта идея нашла отклик у толпы Jamstack, которая уже привыкла делать такие вещи, как запуск процессов сборки и использование функций без серверов.

Я думаю, что идея «размещения» функции без сервера при URL -адресе - и передача ее динамические значения того, что включать в скриншот через параметр URL также умный.

route svg

я вроде как выкапываю идею использования SVG как то, что вы шаблон для изображений в социальных сетях, отчасти потому, что он имеет такие фиксированные координаты для дизайна внутри, что соответствует моей ментальной модели создания точных размеров, необходимых для разработки изображений в социальных сетях. Мне нравится, как SVG такой композиционный.

Джордж Фрэнсис включил в блог «Создайте свои собственные генеративные социальные изображения SVG», что является прекрасным примером всего этого, хорошо вместе, с оттенком рандомизации и прихоти. Мне также нравится довольственный трюк, что делает его полезным инструментом для одноразового снижения экрана.

я также занимался динамическим созданием SVG: Проверьте эту страницу конференции на нашем сайте конференций.

, к сожалению, SVG не является поддерживаемым форматом изображений для изображений в социальных сетях. Вот Twitter специально:

URL изображения для использования в карте. Изображения должны быть менее 5 МБ в размере. Поддерживаются форматы JPG, PNG, WEBP и GIF. Будет использоваться только первый кадр анимированного GIF. SVG не поддерживается.

Twitter Docs

все еще, составление/шаблон в SVG может быть прохладным. Вы конвертируете его в другой формат для окончательного использования. Как только вы есть svg, преобразование из SVG в PNG почти тривиально просто. В моем случае я использовал SVG2PNG и очень крошечную задачу Gulp, которая работает во время процесса сборки.

как насчет WordPress?

у меня нет процесса сборки для моего сайта WordPress - по крайней мере, не тот, который работает каждый раз, когда я публикую или обновляю сообщение. Но WordPress принесет пользу больше всего (в моем мире) из динамических изображений в социальных сетях.

это не то, что у меня их сейчас нет. JetPack имеет большое значение для того, чтобы сделать эту работу красиво. Это делает «показанное изображение» сообщения изображения в социальных сетях, позволяет мне предварительно просмотреть его, а также автопосты в социальные сети. Вот видео, которое я сделал на этом. Это доставит меня в место, где прикреплены и хорошо показываются изображения.

, но это не автоматизирует их творение. Иногда только на заказ график - это путь (то, что выше, может быть хорошим примером этого), но, возможно, чаще всего подходящей для шаблонной карты.

, к счастью, я поймал генератор социальных изображений для WordPress от Daniel Post. Посмотри, как причудливо:

это именно то, что нужно WordPress!

сам Даниэль помог мне создать пользовательский шаблон только для CSS-Tricks. У меня были большие мечты о том, чтобы иметь кучу шаблонов на выбор, включающий название, автор, выбранные цитаты, представленные изображения и другие вещи. До сих пор мы остановились всего на двух, шаблоне с названием и автором, и шаблон с изображением, названием и автором. Изображения создаются из этих метаданных на лету:

это не кукольник. Это даже не Phantomjs Powered Svgtopng. Это изображения, сгенерированные PHP! И даже не Imagemagick, но прямо в GD, вещь, встроенная прямо в PHP. Таким образом, эти изображения не создаются ни в каком виде синтаксиса, который, вероятно, чувствовал бы себя комфортно для фронтального разработчика. Вам, вероятно, лучше использовать один из шаблонов, но если вы хотите увидеть, как был кодирован мой пользовательский человек (Даниэль), я знаю, и я могу опубликовать код где -то публично.

довольно крутой результат, верно?

я понимаю, почему это должно быть построено таким образом: она использует технологии, которая будет работать буквально везде, где можно работать WordPress. Это очень много в духе WordPress. Но это заставляет меня желать создания шаблонов, можно было бы сделать более современным способом. Как бы не было бы круто, если бы шаблон для ваших изображений в социальных сетях был похож на Social-image.php в корне темы, как любой другой файл шаблона? И вы шаблон и разрабатываете эту страницу со всеми обычными API WordPress? Как блок ACF почти? И он получает скриншот и используется? Я отвечу за вас: да, это было бы круто.