Rand um Bild hinzufügen

[robbie.morrison]

Hallo zusammen

Kann ich einem JPG-Bild einen dünnen Rahmen hinzufügen, ohne auf eine Themenkomponente zurückgreifen zu müssen? Ich möchte es einfach halten und zum Beispiel diese Komponente vermeiden:

Rounded Borders for images, oneboxes, blockquotes & more

Created a very simple component to change the borders of images, oneboxes, blockquotes and staff notices shown in topics. Allows change of the following settings set image rounding intensity set image border width set image border color set onebox rounding intensity change onebox border width change onebox border color change onebox background color set rounding blockquotes intensity remove left border from blockquotes set ‘staff color’ rounding intensity topic thumbnail support for: list ro…

Ich habe jede Variation des img-Tags ausprobiert, die mir einfällt. Das Einzige, was funktionierte, war, das Bild in ein kbd-Tag einzubetten, aber das ist etwas seltsam. Das ist wirklich, was ich schreiben möchte:

<img src="upload://jIMXtLgb7enbLUiahXVT1Jz14n4.jpeg"
  alt="Foto zeigt verlassenen Mittelspannungsmast"
  width="75%"
  style="border: 1px solid gray">

Und hier ist ein Beispielbild über den Standard-Upload:

Die KI-Bildunterschrift leistet meiner Meinung nach ziemlich gute Arbeit. Danke im Voraus!

[robbie.morrison]

Hier ist die frühere HTML-Kopie, die eingefügt wurde… kein Rand ersichtlich… und auch ziemlich klein:

[merefield (Robert)]

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

devtools gehacktes CSS … YMMV

[awesomerobot (Kris)]

@robbie.morrison

style="border: 1px solid gray"

Benutzerdefiniertes CSS wird aus Beiträgen entfernt, da jemand etwas wie border: 1000px solid gray machen und das gesamte Thema unlesbar machen könnte.

Sie müssen CSS zu einem Thema oder einer Themenkomponente hinzufügen, um dies zu tun, es gibt keinen einfachen Weg darum herum. Sie können es jedoch optional für jedes Bild machen.

Sie können zum Beispiel dieses CSS zu einem Thema hinzufügen:

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

und es dann in einem Beitrag wie diesem verwenden:

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

[robbie.morrison]

Vielen Dank. Einige Nachfassaktionen.

@merefield: Ihr Beispiel funktionierte, als es wie folgt hinzugefügt wurde:

[Heliosurge (Dan DeMontmorency)]

Diese Theme component könnte von Interesse sein

Rounded Borders for images, oneboxes, blockquotes & more

Created a very simple component to change the borders of images, oneboxes, blockquotes and staff notices shown in topics. Allows change of the following settings set image rounding intensity set image border width set image border color set onebox rounding intensity change onebox border width change onebox border color change onebox background color set rounding blockquotes intensity remove left border from blockquotes set ‘staff color’ rounding intensity topic thumbnail support for: list ro…

[robbie.morrison]

@Heliosurge Danke. Ich hatte diese Komponente in meinem OP bemerkt. Aber ich werde es heute auch versuchen.

[Heliosurge (Dan DeMontmorency)]

Mein Fehler, ich habe das Thema überflogen und das übersehen. Aber wie andere hier bereits erwähnt haben, würden Sie eine benutzerdefinierte Komponente erstellen. Der Vorteil der Verwendung einer vorhandenen Komponente ist jedoch, dass sie möglicherweise bereits gepflegt wird.

TCs sind jedoch auch praktisch, um Teile des Codes zu studieren und in Ihre eigenen benutzerdefinierten Arbeiten zu integrieren.

[simonk (Simon King)]

Ich verwende dafür das System „Generic BBCode wrapper“:

Generic bbcode wrapper for theme components

I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin. // wrapped in div.d-wrap [wrap=baz foo=bar]Content[/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] Content [/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] [/wrap] // this one will be rendered as a span.d-wrap instead of a div.d-wrap a [wrap=baz]Content[/wrap] b The name of the component w…

Ich setze [wrap=border]...[/wrap] um das Bild, dem ich einen Rahmen hinzufügen möchte, zusammen mit diesem 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);
    }
}

[robbie.morrison]

@simonk danke, das funktioniert für mich und ist auch pro Bild.