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

1. Авторизуйтесь или сразу перейдите на Google Drive. Загрузите своё изображение в нужную папку на своем ГуглДиске и кликните по ней мышкой два раза, чтобы открыть. Теперь нажмите на три точки меню в правом верхнем углу и выберите пункт “Открыть доступ”.

2. Нажмите на “Включить доступ по ссылке”, а затем на кнопку “Готово”. Если вы этого не сделаете, что встроенный на сайт рисунок сможете видеть только вы сами.

3. Еще раз нажмите на кнопку меню – три точки в верхнем правом углу. Выберите пункт “Открыть в новом окне”.

4. Когда рисунок откроется в новой вкладке, снова перейдите в меню и выберите пукнт “Встроить”.

5. Скопируйте предложенный код и вставьте его на своем сайте. Предварительно переведите редактор сайта в режим “Тект” (или “HTML” – в зависимости от CMS вашего сайта).

В этом коде лучше ничего не менять, но всё два пункта можно изменить. Например, для того, чтобы ширина окошка, в котором отображается изображение соответствовало ширине вашей статьи, то значение “640” (параметр width) можно заменить на “100%”. Если хотите и высоту окошка подогнать под высоту рисунка, то пропорционально изменению ширины нужно изменить и параметр высоту рисунка (height).

Например, в прошлой статье вы видели пример масштабируемой инфографики. Ширина оригинального изображения – 7016 px. Ширина статьи – 696 px. Высота оригинала – 4961 px. Если ширину отображения окошка мы ставим width=”100%”, окошко примет размер 696 px – по ширине статьи. Вопрос – какую нужно ставить высоту, чтобы картинка отображалась полностью в этом окошке?

Решение – вспомним школьную математику:

Размер оригинала

Новый размер

7016

696

4961

X

 

X = (696 × 4961) / 7016 ≈ 492

То есть в нашем коде изменяем значение параметра height на значение, которое вычисляем по указанной формуле. В данном конкретном случае оно стало равно 492. У вас может быть другая величина.

Прокомментировать

Введите свой комментарий
Укажите своё имя