Плагин перестал увеличивать картинки в посте

ДосадаЗдравствуйте, Друзья! В сегодняшней заметке разберёмся, как правильно настроить код картинки, чтобы после клика по ней, она увеличивалась и открывалась в посте, а не в новом окне.

Перед публикацией предыдущего поста обнаружилось, что поясняющие снимки в посте перестали увеличиваться при клике по ним мышкой. Конечно, первой мыслью было – плагин Auto Highslide перестал увеличивать картинки. Но нет, картинки в более ранних постах прекрасно увеличиваются – плагин работает исправно.

Оказывается всё дело в хранилище картинок “Google Фото”, вернее, в ссылках на картинки. Раньше все мои изображения для постов располагались в хранилище “Веб-альбомы Picasa”, но, поскольку Picasa закончил своё существование, все мои картинки автоматически были перенесены в “Google Фото”. При сравнении ссылок обнаружилось, что новые ссылки не содержали в себе расширения изображения. Вот смотрите, две ссылки одного и того же снимка, но из разных хранилищ.

Это ссылка была создана в “ Веб-альбомы Picasa”:

https://lh3.googleusercontent.com/-2gSfl0tF4ec/V0Xl7E3t3fI/…..D0%25BE%25D0%25BA.jpg

А это ссылка из “Google Фото”:

https://lh3.googleusercontent.com/Fx-QnAjpsTye5wAU4…..TKribeKU92Jt7f=w949-h337-no

Как видно из примера, во второй ссылке указан адрес объекта (снимка), но не указан его основной параметр – расширение. Придётся добавить параметр вручную.

В данном случае, используем, так называемый, метод GET, т.е., отделим URL-адрес от параметра знаком вопроса “?” (без пробелов), а затем, пропишем параметр: .jpg (так же, без пробелов).

В ссылке это будет выглядеть вот так:

https://lh3.googleusercontent.com/Fx-QnAjpsTye5wAU4…..TKribeKU92Jt7f=w949-h337-no?.jpg

Соответственно, если картинка изначально имеет расширение: png, то нужно прописать ?.png

Для примера я дважды установил одну и ту же картинку. Первая картинка без добавления параметра, а вторая — с добавлением параметра. Кликните по картинкам поочерёдно и ощутите разницу удобства просмотра.

Как установить картинку из Google Фото в статью(пост)

При написании статьи в блог, нередко возникает необходимость вставки поясняющего или демонстрационного снимка. Например, снимок нужно установить прямо под строкой текста. Переведите курсор под строку (стрелка 1) и кликните по кнопке: Добавить медиафайл (стрелка 2).

Но, далее придётся вставлять ссылку на изображение, а её у нас пока нет. Поэтому, отложим пока описанные действия и найдём нужное изображение в фото-хранилище. Именно там я храню почти все изображения, которые вставляю в посты.

 

Зайдите в Google Фото по ссылке: https://photos.google.com

Откройте вкладку: Альбомы (стрелка 1), выберите альбом и кликните по нему левой клавишей мыши (стрелка 2).

 

Найдите нужный снимок и кликните по нему левой клавишей мыши (стрелка 1).

 

В следующем открывшемся окне, кликните по развернувшемуся снимку правой клавишей мыши и, в контекстном меню, выберите: Копировать ссылку на изображение.

 

Вот теперь можно вернуться в редактор WordPress и произвести действия, описанные в начале этой главы, а именно, кликните по кнопке: Добавить медиафайл (стрелка 2).

В открывшемся окне, кликните по: Вставить с сайта (стрелка 1).

 

В следующем окне выделите или удалите уже заготовленный заголовок веб-адреса (стрелка 1), поскольку, веб адрес картинки из Google Фото имеет другой заголовок. После чего, нажмите комбинацию клавиш: Ctrl + V или кликните по адресной строке и, в открывшемся контекстном меню, выберите: Вставить. Вообщем, вставьте скопированную ссылку в это поле.

 

Вот так выглядит окончание ссылки (стрелка 1), о чём я говорил в самом начале статьи.

 

Уже на этом этапе можно добавить в конец ссылки параметр изображения, отделив его от веб-адреса вопросительным знаком (стрелка 1). После чего, нажать кнопку: Вставить в запись (стрелка 2).

 

В визуальном редакторе WordPress кликните по изображению, другими словами, выделите его. Подведите курсор мыши к любому из углов картинки (обозначены белыми квадратиками), нажмите левую клавишу мыши и, не отпуская клавишу, потяните курсор во внутрь изображения по диагонали (стрелка 1).

Рядом с курсором появится небольшое окошко, в котором отображаются изменяемые размеры изображения (стрелка 2). Первое число показывает ширину картинки, второе – высоту. Ширина и высота изменяются пропорционально.

 

На небольшой панели инструментов, появляющейся с момента выделения картинки, можно задать обтекаемость (размещение объекта) (стрелка 1), но можно это сделать и позже. Откройте Параметры изображения, кликнув по инструменту: Изменить (стрелка 2).

 

В открывшемся окне: Параметры изображения проверьте и установите место расположения картинки (стрелка 1), укажите, по какому адресу находится изображение (в данном случае адрес URL) (стрелка 2), заполните поле: Атрибут alt (если используете продвижение по картинкам)(стрелка 3). После чего, кликните по кнопке: Обновить (стрелка 4).

 

Не забывайте, если не добавить в окончание ссылки параметр изображения – картинка будет открываться, но в новом окне или в этом же (зависит от настроек темы), что не очень удобно для посетителей.

 

Удачи Вам!

   © mkovenkov

Поделиться ссылкой: