More

    Как встроить изображение из ГуглДиска (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 – по ширине статьи. Вопрос – какую нужно ставить высоту, чтобы картинка отображалась полностью в этом окошке?

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

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

    Новый размер

    7016

    696

    4961

    X

     

    X = (696 × 4961) / 7016 ≈ 492

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

    Rustam Gulov
    Rustam Gulovhttps://alifbo.media
    Независимый медиа-тренер и консультант, блоггер, сооснователь первой фактчек-платформы Таджикистана Factcheck.tj и блогплатфоры Blogiston.tj. Веду данный авторский проект Alifbo.Media - образовательный ресурс о новых медийных технологиях, трендах, онлайн-сервисах для подготовки мультимедийных материалов. В свободное время читаю, веду канал на Телеграм, создаю сайты, программирую.

    Leave a reply

    Please enter your comment!
    Please enter your name here