Как встроить изображение из ГуглДиска (Google Drive) на сайте

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

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

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

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

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

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

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

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

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

X = (696 × 4961) / 7016 ≈ 492

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