Ответ
Настройка HTML для Getty Images под WordPress Опции темы
Старый 22.04.2014, 16:14
  #1
Rattata
 
Регистрация: 28.01.2014
Сообщений: 60

Настройка HTML для Getty Images под WordPress
Как стало недавно известно, Getty Images открыл миллионы своих изображений для свободного использования в сети. Исходя из практики профессиональных фото веб-сайтов, это просто феноменальный шаг, который с благодарностью встретили тысячи блогеров во всем мире.





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

По умолчанию, Getty Images предоставляет вам стандартный iframe, который отображает изображение, а также ссылку на их сайт. Я хочу раскрыть способ, как правильно включить его в наш WordPress пост так, что картинка вписывается в нашу тему и правильно выровнялась.

Получение кода для вставки

Первый шаг - найти изображение, которое будем использовать. Getty Images открыл не все свои фотографии для бесплатного пользования, а лишь часть из них. Так, например, если я инициирую поиск, используя термин "blogging", то получу ряд результатов, и мне нужно будет еще выяснить, что еще я могу бесплатно использовать, а что нет. Для этого, наводим курсор мыши на каждую из превьюшек, и получаем всплывающее окно. То, что мы ищем, имеет кнопку "встроить" справа в нижней части картинки, как показано на скриншоте ниже.





Нажатие этой кнопки вызывает код, для вставки на нашем сайте. Как я уже говорил, картинка грузиться через iframe, который встраивается в код HTML документа. Iframe, по умолчанию, имеет стандартную высоту и ширину, поэтому его код часто надо настраивать под требования своего сайта. Под этим кодом имеется инструмент для включения предварительного просмотра изображения. Включите и увидите, как картинка будет выглядеть.





Выравнивание и изменение размера изображения

Скажем, мы хотим внедрить эту фотографию в левом верхнем углу нашего поста. Для этого переходим в визуальный редактор WordPress, и выбираем режим редактирования HTML, нажав на вкладку "Text" справа. Это позволит вам редактировать необработанные HTML элементы. Вставьте скопированный код iframe в самом верху текста, как показано на скриншоте ниже. Если вы просмотреть сейчас свое сообщение, то увидите, что изображение в тексте идет первым, а весь текст уже под ним.





Но что, если мы хотим, сделать выравнивание по левому краю, и чтобы наш текст "обтекал" вокруг изображения? Чтобы сделать это, нам нужно добавить следующий код в наш iframe в качестве атрибута align="left".

Поместите его сразу после тега iframe, как показано ниже:





Теперь при предварительном просмотре поста, он сдвинется влево, а ваш текст появиться справа от него. Но что, если мы должны уменьшить ширину так, чтобы картинка легче вписывалась в размеры нашего блога? Скажем, мы хотим сократить ширину до 300 пикселей вместо используемых по умолчанию 515. Чтобы сделать это, просто измените атрибут "width". В нашем случае, мы меняем его на width="300".

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





Подбор высоты делается методом проб и ошибок или подсчетом пропорции. Инструменты для разработчиков Chrome позволяют экспериментировать с подбором нужной высоты. В моем случае, я обнаружил, что 268 является оптимальной величиной. Поэтому я изменил атрибут width = "268".

Это позволило мне выровнять рисунок по левому краю с идеальными размерами для моего блога. Используя эти простые инструкции, вы можете включать самые лучшие бесплатные фотографии, подходящие к вашему контенту, благодаря Getty Images!
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как овладеть искусством Pinterest Images FroZen Статьи 0 09.04.2014 12:50
Getty Images раздаёт 40 млн фотографий бесплатно Cyclops Магазины 1 07.03.2014 11:37
Он-лайн настройка почты в exchange Spaik Работа 0 23.10.2013 07:51
Настройка сайта на joomla 2.5 patriot Вопросы 20 03.08.2013 23:49
Вёрстка макетов HTML/CSS Sexy Devil Работа 0 27.12.2011 20:43

Метки
getty images, wordpress, картинки


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 18:09. Часовой пояс GMT +3.