Добавить рамку к изображению

Поддержка
1

Всем привет

Могу ли я добавить тонкую рамку к изображению JPG, не прибегая к компоненту темы? Я хочу сохранить простоту и избежать, например, использования этого компонента:

Я перепробовал все возможные варианты тега img, о которых мог подумать. Единственное, что сработало, — это вставка изображения в тег kbd, но это выглядит немного странно. Вот что я действительно хотел бы написать:

<img src="upload://jIMXtLgb7enbLUiahXVT1Jz14n4.jpeg"
  alt="photo showing derelict medium voltage power pole"
  width="75%" 
  style="border: 1px solid gray">

А вот пример изображения, загруженного стандартным способом:

На изображении показан старый ржавый электрический столб с изоляторами и электрооборудованием. (Подпись сгенерирована ИИ)
На изображении показан старый ржавый электрический столб с изоляторами и электрооборудованием. (Подпись сгенерирована ИИ)1920×1440 142 KB

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

3

Вот более ранняя HTML-копия, вставленная сюда… граница не видна… и она тоже довольно маленькая:

фотография, показывающая ветхий опора линии электропередачи среднего напряжения
фотография, показывающая ветхий опора линии электропередачи среднего напряжения1920×1440 142 KB

4 
.cooked img:not(.thumbnail,.ytp-thumbnail-image,.emoji), .d-editor-preview img:not(.thumbnail,.ytp-thumbnail-image,.emoji) {
    border: 4px solid red;
}

Взломанный CSS через инструменты разработчика… У кого как повезёт :rofl:

На изображении показана верёвочная лестница без видимой границы, а текст на изображении нечитаем. (Подписано ИИ)
На изображении показана верёвочная лестница без видимой границы, а текст на изображении нечитаем. (Подписано ИИ)725×194 13.2 KB

5

Пользовательские CSS-стили удаляются из сообщений, потому что кто-то может, например, указать border: 1000px solid gray, из-за чего вся тема станет нечитаемой.

Чтобы это реализовать, необходимо добавить соответствующие стили в тему или компонент темы; другого надёжного способа нет. Однако вы можете сделать это опциональным для каждого изображения отдельно.

Например, вы можете добавить следующий CSS в тему:

div[data-theme-image-border] img {
  border: 1px solid gray;
}

а затем использовать его в сообщении так:

<div data-theme-image-border>
  <img src="yoururlhere"/>
</div>
6

Большое спасибо. Несколько уточнений.

@merefield: ваш пример сработал при добавлении следующим образом:

☰ ▸ Администрирование ▸ Настройка ▸ Темы = По умолчанию ▸ Редактирование CSS/HTML ▸ Для рабочего стола ▸ CSS

@awesomerobot: мне не удалось заставить ваш код работать, несмотря на попытки с различными вариантами.

Обратите внимание, что первый пример применяется ко всему сайту, а второй (или, скорее, должен применяться) — к каждому изображению.

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

PS: автоматическое создание подписей с помощью ИИ с каждой версией ухудшается :smiley:

7

Этот #theme-component может вас заинтересовать

8

@Heliosurge Тх. Я уже отмечал этот компонент в своём первом посте. Но сегодня тоже попробую.

9

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

Однако TC также удобны для изучения и использования частей кода в ваших собственных разработках.

10

Для этого я использую систему «Generic BBCode wrapper»:

Я оборачиваю изображение, к которому хочу добавить рамку, в тег [wrap=border]...[/wrap], а также использую следующий CSS:

.d-wrap[data-wrap="border"] {
    > img, > p > img, .lightbox, .image-wrapper img {
        border: 1px solid #555;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
    }
}
11

@simonk спасибо, это работает для меня и тоже по изображению.