Как изменить адрес картинки

I apologize in advance if I am asking asking question with impossible answer. But I just thought it was worth asking, maybe somebody knows how to achieve what I am asking for. I have image on the ...

I apologize in advance if I am asking asking question with impossible answer. But I just thought it was worth asking, maybe somebody knows how to achieve what I am asking for.

I have image on the page like this ( image url is generated dynamically on the server by PHP ):

<img src="/images_BIG/image_12345.jpg" />

Now — I would love to use only CSS media queries to change this image URL, let’s say to this ( when browser viewport width is smaller than e.g. 800px ):

<img src="/images_SMALL/image_12345.jpg" />

I know this can be done by PHP (detecting mobile browsers and return appropriate URL) or use Javascript to change URL on the fly. But is this possible with CSS3 ? I am aiming only on HTML5 browsers so no need to care about IE.

Thank you for any thoughts and help in advance.

asked Jan 29, 2012 at 15:53

Frodik's user avatar

FrodikFrodik

14.5k22 gold badges89 silver badges138 bronze badges

3

Wrap the image in a div. Use mobile first, so that it only downloads the small version of the image on small screens. On bigger screens, the image will be hidden and a background image will be there instead.

The two downsides — a non-semantic wrapping div, and the need to specify the height and width of the div. The upside is that you get the foreground image in the HTML.

The HTML

<div class="imgContainer"><img src="/images_SMALL/image_12345.jpg" /></div>

The CSS

// for screens bigger than 800px
@media screen and (min-device-width:800px) {
  div.imgContainer {
    background-image:url(../images_BIG/image_12345.jpg);
    background-size:100px;
    width:100px;
    height:100px;
  }
  img {
    display:none;
  }
}

EDIT
Based on your comment above, I would say add the wrapping div and set its background image with jQuery.

answered Jan 29, 2012 at 16:22

Dan Blows's user avatar

Dan BlowsDan Blows

20.6k10 gold badges65 silver badges96 bronze badges

2

You can set a different css file depending on your media queries:

#image1 { background: url('/images_BIG/image_12345.jpg'); width: 600px; height: 200px; }
@media screen and (max-device-width: 480px) {
 #image1 { background: url('/images_SMALL/image_12345.jpg'); width: 300px; height: 100px; }
}

In this case, you would move away from an IMG tag to a different tag (<span id="image1"></span>).

answered Jan 29, 2012 at 16:02

Bruno Silva's user avatar

Bruno SilvaBruno Silva

3,06718 silver badges20 bronze badges

1

Well, as I have read your comment…if the only problem is including variable urls into a css stylesheet…what about just php including (rendering) the stylesheet (wrapped with <style> tag) into the resulting html? Then you could use <?php echo $imageUrl ?> at the place of the url. I have never done this before, it might be a silly idea but it just appears possible to me now.

answered Jan 29, 2012 at 16:20

clime's user avatar

climeclime

8,4779 gold badges60 silver badges82 bronze badges

0

Источник

I apologize in advance if I am asking asking question with impossible answer. But I just thought it was worth asking, maybe somebody knows how to achieve what I am asking for.

I have image on the page like this ( image url is generated dynamically on the server by PHP ):

<img src="/images_BIG/image_12345.jpg" />

Now — I would love to use only CSS media queries to change this image URL, let’s say to this ( when browser viewport width is smaller than e.g. 800px ):

<img src="/images_SMALL/image_12345.jpg" />

I know this can be done by PHP (detecting mobile browsers and return appropriate URL) or use Javascript to change URL on the fly. But is this possible with CSS3 ? I am aiming only on HTML5 browsers so no need to care about IE.

Thank you for any thoughts and help in advance.

asked Jan 29, 2012 at 15:53

Frodik's user avatar

FrodikFrodik

14.5k22 gold badges89 silver badges138 bronze badges

3

Wrap the image in a div. Use mobile first, so that it only downloads the small version of the image on small screens. On bigger screens, the image will be hidden and a background image will be there instead.

The two downsides — a non-semantic wrapping div, and the need to specify the height and width of the div. The upside is that you get the foreground image in the HTML.

The HTML

<div class="imgContainer"><img src="/images_SMALL/image_12345.jpg" /></div>

The CSS

// for screens bigger than 800px
@media screen and (min-device-width:800px) {
  div.imgContainer {
    background-image:url(../images_BIG/image_12345.jpg);
    background-size:100px;
    width:100px;
    height:100px;
  }
  img {
    display:none;
  }
}

EDIT
Based on your comment above, I would say add the wrapping div and set its background image with jQuery.

answered Jan 29, 2012 at 16:22

Dan Blows's user avatar

Dan BlowsDan Blows

20.6k10 gold badges65 silver badges96 bronze badges

2

You can set a different css file depending on your media queries:

#image1 { background: url('/images_BIG/image_12345.jpg'); width: 600px; height: 200px; }
@media screen and (max-device-width: 480px) {
 #image1 { background: url('/images_SMALL/image_12345.jpg'); width: 300px; height: 100px; }
}

In this case, you would move away from an IMG tag to a different tag (<span id="image1"></span>).

answered Jan 29, 2012 at 16:02

Bruno Silva's user avatar

Bruno SilvaBruno Silva

3,06718 silver badges20 bronze badges

1

Well, as I have read your comment…if the only problem is including variable urls into a css stylesheet…what about just php including (rendering) the stylesheet (wrapped with <style> tag) into the resulting html? Then you could use <?php echo $imageUrl ?> at the place of the url. I have never done this before, it might be a silly idea but it just appears possible to me now.

answered Jan 29, 2012 at 16:20

clime's user avatar

climeclime

8,4779 gold badges60 silver badges82 bronze badges

0

Источник

После установки SSL-сертификата на свой сайт вы можете столкнуться с одной неприятностью: все ваши изображения перестанут выводиться. Не стоит паниковать – просто прочтите эту статью, в которой будет показана методика исправления ссылок на изображения.

links_update

При установке SSL-сертификата ваш адрес сайта несколько меняется, и это небольшое изменение приводит к тому, что некоторые элементы вашего сайта могут перестать работать. Все элементы вашего сайта были перенесены на https, а изображения по-прежнему указывают на http, вследствие чего они перестают выводиться.

Это означает, что вы должны откорректировать все ссылки на изображения, заменив http на https. Звучит ужасно, не правда ли? Однако вам не придется вручную искать и редактировать каждое отдельное изображение, которое вы загружали. Вы можете отредактировать URL либо вручную через базу данных, либо автоматически с помощью удобных плагинов.

Если вы успешно перенесли свой сайт на защищенный URL адрес, однако изображения перестали корректно работать, данная статья поможет вам устранить эту проблему.

Поиск и замена с помощью запросов

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

Я рекомендую вам использовать проверенный плагин, чтобы случайно не сломать сайт. Перед этим лучше всего сделать бэкап своего сайта.

Итак, заходим в phpMyAdmin и выбираем требуемую базу данных сайта, после чего переходим на вкладку Query. В поле SQL Query в самом низу страницы вводим следующий запрос, после чего щелкаем по Go:

UPDATE wp_posts SET `post_content` = REPLACE (`post_content`, 'src="http://www.your-site.com', 'src="https://www.your-site.com');

Убедитесь в том, что вместо www.your-site.com задано ваше реальное доменное имя. Также измените префикс wp таблицы wp_posts, если вы используете свое значение. Если вы работаете с мультисайтами, то в таком случае вам понадобится выполнить также следующий запрос:

UPDATE wp_2_posts SET `post_content` = REPLACE (`post_content`, 'src="http://www.your-site.com', 'src="https://www.your-site.com');

Замените 2 в wp_2_posts на корректный ID вашего сайта. Вам нужно будет выполнить этот запрос для всех сайтов в вашей сети. Зачастую это не требуется, однако в некоторых случаях вам тоже может понадобиться откорректировать ссылки на изображения – к примеру, если ваша сеть использует подпапки и ваши сайты не привязаны к различным доменам.

Также вам нужно будет выполнить следующий запрос, чтобы обновить GUID для изображений, которые заданы как вложения:

UPDATE wp_posts SET `guid` = REPLACE (`guid`, 'http://www.your-site.com', 'https://www.your-site.com') WHERE post_type = 'attachment';

По аналогии с первым примером, вам также понадобится сменить доменное имя на актуальный URL и задать новый префикс таблицы (если вы не используете стандартный). Возможно, вам понадобится выполнить этот запрос для всех сайтов вашей сети.

UPDATE wp_2_posts SET `guid` = REPLACE (`guid`, 'http://www.your-site.com', 'https://www.your-site.com') WHERE post_type = 'attachment';

Не забудьте сменить 2 в wp_2_posts на актуальный ID сайта в вашей сети.

URL-адреса ваших изображений должны перейти на https. Если это не произошло, попробуйте еще раз выполнить запросы. Выполняйте их поочередно, а не все сразу.

Поиск и замена ссылок на изображения с помощью плагинов

Использование плагинов для поиска и замены изображений на сайте является более простым методом, нежели внесение изменений вручную. Вряд ли вы сможете допустить такую ошибку, которая нарушит работу вашего сайта. Однако вам все равно придется несколько раз проверить то, что вы вводите, поскольку вы по-прежнему можете ошибиться.

Некоторые из представленных плагинов не работают с мультисайтами, однако их можно активировать отдельно на каждом сайте сети для проведения необходимых манипуляций.

Better Search Replace

Better Search Replace – один из плагинов, который обладает поддержкой мультисайтов. Он имеет простой дизайн, лишен многочисленных параметров и возможностей, однако то, что он имеет, является самыми востребованными и популярными опциями у пользователей.

Все, что вам нужно – это установить плагин в WordPress. Интересная возможность плагина — тестовый запуск, позволяющий понять, какие таблицы будут затронуты в результате внесения необходимых изменений.  Это поможет избежать ошибок, что делает плагин Better Search Replace ценным инструментом в вашем арсенале средств.

Search and Replace

Search and Replace – плагин, который умеет гораздо больше, нежели просто изменить ссылки на изображения на вашем сайте. Вы можете использовать этот плагин для изменения URL и домена сайта, восстановления и сохранения вашей базы данных, смены префиксов таблиц и т.д.

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

Плагин работает только с PHP 5.4 и выше. Он включает в себя поддержку мультисайтов.

WP Migrate DB

Плагин WP Migrate DB обычно используется для миграции сайта, однако вы также можете использовать его для поиска и замены старых ссылок на изображения. Он прекрасно подходит для переноса локально разработанного сайта на онлайн-сервер.

Источник: wpmu.org

Источник

За последние 24 часа нас посетил 11541 программист и 1183 робота. Сейчас ищут 274 программиста …


  1. -Vladimir-

    -Vladimir-
    Активный пользователь

    С нами с:
    20 сен 2009
    Сообщения:
    139
    Симпатии:
    0

    Имеется файл картинки на сервере: мой_сайт.ру/папка/картинка.jpg.

    Как сделать скрипт, который бы изменял адрес картинки: мой_сайт.ру/pict.php ?
    То есть страница pict.php — и будет адресом самого рисунка.


  2. yoyo-moyo

    yoyo-moyo
    Активный пользователь

    С нами с:
    11 ноя 2009
    Сообщения:
    57
    Симпатии:
    0
    Адрес:
    Latvija

    А что собственно ты этим хочешь добиться?


  3. -Vladimir-

    -Vladimir-
    Активный пользователь

    С нами с:
    20 сен 2009
    Сообщения:
    139
    Симпатии:
    0


  4. yoyo-moyo

    yoyo-moyo
    Активный пользователь

    С нами с:
    11 ноя 2009
    Сообщения:
    57
    Симпатии:
    0
    Адрес:
    Latvija

    Создай пустой pict.php и пропиши в него:

    2. <html xmlns=«http://www.w3.org/1999/xhtml» xml:lang=«en» lang=«en»>
    4. <img src=«мой_сайт.ру/папка/картинка.jpg» alt=«» border=«0»/>

    При вызове файла увидишь катринку, и будет тебе счастье…..


  5. Phantik

    Phantik
    Активный пользователь

    С нами с:
    2 июл 2009
    Сообщения:
    163
    Симпатии:
    0

    pict.php

    3. Header(«Content-Type: image/jpeg»);


  6. Apple

    Apple
    Активный пользователь

    С нами с:
    13 янв 2007
    Сообщения:
    4.984
    Симпатии:
    2

    Phantik
    Я бы предпочел такой вариант:

    3. header(‘Content-type: image/jpeg’);


  7. yoyo-moyo

    yoyo-moyo
    Активный пользователь

    С нами с:
    11 ноя 2009
    Сообщения:
    57
    Симпатии:
    0
    Адрес:
    Latvija

    Да , короче не бывает..
    Ещё понять-бы зачем ему это нужно…..


  8. -Vladimir-

    -Vladimir-
    Активный пользователь

    С нами с:
    20 сен 2009
    Сообщения:
    139
    Симпатии:
    0

    Работает, спасибо!

    5. header(«Content-type: image/$typeimg«);

    Как тут можно сделать, чтобы если расширение у картинки .jpg или .jpeg, то $typeimg = «jpeg»;
    если .gif, то $typeimg = «gif»;
    и т.д.


  9. -Vladimir-

    -Vladimir-
    Активный пользователь

    С нами с:
    20 сен 2009
    Сообщения:
    139
    Симпатии:
    0

    Здесь, соответственно, расширение файла — это $category, а тип файла — $name:

    21. $name = $names[$category];
    25. exit(«Несуществующий тип файла»);

    Как сделать, чтобы из $image = «картинка.jpg»; бралось с конца «.jpg» ?
    Именно с конца файла, т.к. в самом имени файла может тоже присутствовать что-то подобное.


  10. Elkaz

    Команда форума
    Модератор


  11. karakh

    karakh
    Активный пользователь

    С нами с:
    11 дек 2007
    Сообщения:
    1.344
    Симпатии:
    0

    а вдруг расширение .jpeg?
    $string=».».strrchr($string,».»);


  12. Amatory999

    Amatory999
    Активный пользователь

    С нами с:
    23 июн 2009
    Сообщения:
    93
    Симпатии:
    0

    Это не правильное решение.
    И это

    Вот так правильней:


  13. -Vladimir-

    -Vladimir-
    Активный пользователь

    С нами с:
    20 сен 2009
    Сообщения:
    139
    Симпатии:
    0

    А можно ли сделать, чтобы картинка image.php?id=номер могла отображаться только на определённой странице — view.php?id=номер ?
    При этом, если будет обращение к image.php?id=номер с другой страницы или с адрейсной строки браузера, то произойдёт редирект на view.php?id=номер.


  14. Apple

    Apple
    Активный пользователь

    С нами с:
    13 янв 2007
    Сообщения:
    4.984
    Симпатии:
    2


  15. -Vladimir-

    -Vladimir-
    Активный пользователь

    С нами с:
    20 сен 2009
    Сообщения:
    139
    Симпатии:
    0

    3.  header(‘Content-type: image/jpeg’);

    Картинка иногда загружается не полностью.
    Как можно это исправить?
    Что-то типа получения сведений о файле картинки, а потом более корректная передача.


  16. DarkElf

    DarkElf
    Активный пользователь

    С нами с:
    22 окт 2006
    Сообщения:
    1.632
    Симпатии:
    0

    -Vladimir-
    проверь саму картинку на «битость».


  17. -Vladimir-

    -Vladimir-
    Активный пользователь

    С нами с:
    20 сен 2009
    Сообщения:
    139
    Симпатии:
    0

    Всё там ОК. Просто не всегда догружается.

Источник

Прежде, чем ответить на вопрос «как вставить картинку в HTML?», следует отметить, что перегружать веб-страницы огромным количеством графического материала не стоит, поскольку это не только улучшит визуальное восприятие ресурса пользователем, но и увеличит время загрузки страницы.

При создании веб-сайтов чаще всего используют графические форматы PNG, GIF и JPEG, а для дизайнерских работ с изображениями — графический редактор Adobe Photoshop, обладающий богатыми возможностями для сжатия и изменения размера изображений без потери качества, что является невероятно важным для веб-разработки.

  • Как вставить изображение в HTML?
    • Назначение размеров картинки в HTML
    • Расположение картинки в HTML
    • Картинка-ссылка
    • Как можно сделать картинку фоном в HTML?

Для того чтобы вставить изображение на HTML-страницу, используется одиночный простой тег:

где xxx — адрес изображения. В том случае, если картинка находится в одной директории со страницей, тег будет выглядеть как:

Однако скоростной и стабильный интернет добрался ещё не во все уголки земного шара, и бывает так, что изображение на веб-сайте попросту не загружается. Для таких случаев существует понятие альтернативного текста.

Он показывается на месте картинки в момент его недоступности, загрузки или в режиме работы браузера «без картинок». Добавляется он с помощью атрибута alt тега <img>.

Пример добавления альтернативного текста к графическому файлу:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Альтернативный текст</title>
</head>
<body>
<p><img src="images/example.png" alt="Альтернативный текст"></p>
</body>
</html>

Как вставить изображение в HTML?

Для того чтобы изменить размеры отображения графического файла, используют теги height и width, где height — высота, а width — ширина, измеряемые в пикселях.

При использовании данных атрибутов браузер сначала выделяет место для графического контента, подготавливает общий макет страницы, отображает текст, после чего загружает саму картинку.

Рисунок помещается в прямоугольник с заданными размерами, а в том случае, если параметры меньше или больше исходных, картинка растягивается или сжимается.

Если атрибуты height и width не используются, браузер загружает изображение сразу, задерживая отображение текста и прочих элементов страницы.

Данные параметры можно указать как в пикселях (размер картинки постоянен и не зависит от разрешения экрана пользователя), так и в процентах (размер картинки зависит от разрешения экрана).

Например:

<img src=”example.png” width=”60” height=”40”>

или

<img src=”example.png” width=”50%” height=”10%”>

Следует помнить, что в тот момент, когда вы изменяете исходный размер изображения, необходимо сохранять его пропорции.

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

Как и ко многим тегам HTML, к применим атрибут align, который выполняет выравнивание изображения:

<img src=”example.png” align=”top”> — картинка располагается выше текста;

Расположение картинки в HTML

<img src=”example.png” align=”bottom”> — картинка располагается ниже текста;

Расположение картинки в HTML - 2

<img src=”example.png” align=”left”> — картинка располагается слева от текста;

<img src=”example.png” align=”right”> — картинка располагается справа от текста.

В HTML для создания ссылки используется тег <a>:

<a href=”адрес вашей ссылки”>Имя ссылки</a>

Для того чтобы задать графическую ссылку, необходимо всего лишь объединить тег изображения с тегом ссылки.

Делается это следующим образом:

<a href=”адрес ссылки”><img src=”адрес картинки”></a>

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

Изображение можно не только вставлять на страницу в качестве видимого объекта, но и сделать фоновым. Для определения картинки как фона необходимо в теге прописать атрибут background=”xxx”, где xxx — адрес картинки, указанный таким же способом, как в примерах выше.

Для примера зададим такую текстурную картинку в роли фоновой:

Как можно сделать картинку фоном в HTML?

Сохраните изображение в папке с заготовленной заранее страницей и пропишите следующие строки:

<html>
<head><title>Страница с фоновой картинкой</head></title>
<body background=”image.jpg”>
<h1> Фон с текстом. </h1>
</body>
</html>

Как можно сделать картинку фоном в HTML? - 2

Фоновая картинка на странице задана.

На этом информация о тегах и атрибутах, необходимых для вставки изображения на HTML страницу сайта, исчерпана.

Желаем удачи!

Источник

Понравилась статья? Поделить с друзьями:

Читайте также:

  • Как изменить адрес канала на яндекс дзен
  • Как изменить адрес канала на youtube
  • Как изменить адрес ип казахстан
  • Как изменить адрес индивидуального предпринимателя
  • Как изменить адрес изображения

    • 0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии