إضافة حدود للصورة

[robbie.morrison]

مرحباً بالجميع

هل يمكنني إضافة حد رفيع إلى صورة JPG دون اللجوء إلى مكون سمة؟ أريد أن أبقي الأمر بسيطًا وأن أتجنب، على سبيل المثال، هذا المكون:

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…

لقد جربت كل تنويعات وسم img التي يمكنني التفكير فيها. الشيء الوحيد الذي نجح هو تضمين الصورة في وسم kbd، لكن هذا غريب بعض الشيء. هذا هو ما أريد حقًا كتابته:

<img src="upload://jIMXtLgb7enbLUiahXVT1Jz14n4.jpeg"
  alt="صورة تُظهر عمود كهرباء مهجور متوسط الجهد"
  width="75%"
  style="border: 1px solid gray">

وهنا عينة صورة عبر تحميل قياسي:

أعتقد أن التعليق على الصور بواسطة الذكاء الاصطناعي يقوم بعمل جيد جدًا. شكرًا مقدمًا!

[robbie.morrison]

هذه هي النسخة السابقة من HTML التي تم نسخها ولصقها.. لا يوجد حد واضح.. وهي صغيرة أيضًا:

[merefield (Robert)]

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

أدوات المطور اخترقت CSS … قد تختلف النتائج لديك

[awesomerobot (Kris)]

@robbie.morrison

style="border: 1px solid gray"

يتم تجريد CSS المخصص من المشاركات لأن شخصًا ما يمكنه فعل شيء مثل border: 1000px solid gray وجعل الموضوع بأكمله غير قابل للقراءة.

تحتاج إلى إضافة بعض CSS إلى سمة أو مكون سمة للقيام بذلك، لا توجد طريقة سهلة لتجاوز ذلك. يمكنك جعله اختياريًا على أساس كل صورة على حدة.

لذلك، على سبيل المثال، يمكنك إضافة CSS هذا إلى سمة:

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

ثم استخدامه في مشاركة مثل هذه:

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

[robbie.morrison]

شكراً جزيلاً. بعض المتابعات.

@merefield: نجح مثالك عند إضافته على النحو التالي:

Admin Customize Themes = Default Edit CSS/HTML Desktop CSS

@awesomerobot: لم أتمكن من تشغيل الكود الخاص بك، على الرغم من تجربة بعض الاختلافات.

لاحظ أن المثال الأول على مستوى الموقع بالكامل والمثال الثاني هو (أو بالأحرى يجب أن يكون) لكل صورة على حدة.

نرحب بأي اقتراحات أخرى. الحل على مستوى الموقع بالكامل مقبول، ولكن التطبيق لكل صورة على حدة هو المفضل على الأرجح.

ملاحظة: التعليقات التوضيحية بالذكاء الاصطناعي تتدهور مع كل تكرار

[Heliosurge (Dan DeMontmorency)]

قد يكون مكون السمة هذا ذا أهمية

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 شكرًا. لقد لاحظت هذا المكون في منشوري الأصلي. لكنني سأجربه اليوم أيضًا.

[Heliosurge (Dan DeMontmorency)]

عذري، لقد قرأت الموضوع بسرعة وفوتت ذلك. ولكن كما ذكر الآخرون هنا، ستقوم بإنشاء مكون مخصص. ومع ذلك، فإن الاستفادة من مكون موجود هي أنه قد تتم صيانته بالفعل.

ومع ذلك، فإن المكونات المخصصة مفيدة أيضًا للدراسة واستخدام أجزاء من التعليمات البرمجية في أعمالك المخصصة.

[simonk (Simon King)]

أستخدم نظام “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…

أضع [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);
    }
}

[robbie.morrison]

@simonk شكرًا، هذا يعمل بالنسبة لي وهو لكل صورة أيضًا.