В своей прошлой статье я показывал пример масштабируемой инфографики – когда пользователь может увеличить большую инфографику, чтобы просмотреть ее детали. Как и обещал, в этой интсрукции вы увидите, как можно встроить такие большие изображения на свой сайт.
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. У вас может быть другая величина.
