इमेज

अगर कोई इमेज मुख्य कॉन्टेंट कॉलम से ज़्यादा चौड़ी है, तो DevSite उसे कॉलम की चौड़ाई के हिसाब से अपने-आप घटा देती है. ऐसा अक्सर छोटी स्क्रीन पर होता है. हालांकि, अगर इमेज में width और height, दोनों एट्रिब्यूट सेट हैं, तो सिर्फ़ चौड़ाई का साइज़ बदला जाता है. इससे इमेज का आकार खराब हो जाता है. इसलिए, इमेज की height को सेट न करें. इसका मतलब है कि अगर इमेज धीमी गति से लोड होती है, तो पेज फिर से रेड्रो हो सकता है. इससे पेज पर झटका लग सकता है. हालांकि, यह ऐसी इमेज से बेहतर है जो स्क्रीन पर फ़िट नहीं होती.

किसी इमेज को बॉर्डर देने के लिए, उस पर class="screenshot" का इस्तेमाल किया जा सकता है. इससे इमेज, आस-पास मौजूद टेक्स्ट से अलग दिखती है. आम तौर पर, इसका इस्तेमाल उन स्क्रीनशॉट के लिए किया जाता है जिनका बैकग्राउंड सफ़ेद होता है और जो पेज पर खो जाते हैं. इसका इस्तेमाल उन इमेज के लिए न करें जिनमें इसकी ज़रूरत नहीं है.

टेक्स्ट के बगल में फ़्लोटिंग

दाईं ओर मौजूद इमेज में भी class="attempt-right" है. यह बड़ी स्क्रीन पर इमेज को दाईं ओर फ़्लोट करता है. हालांकि, यह छोटी स्क्रीन, टैबलेट, और उससे छोटी स्क्रीन पर इमेज को वर्टिकल लेआउट में फ़ोर्स करता है. यहां इमेज को दाईं ओर फ़्लोट करने से समस्याएं आ सकती हैं. class="attempt-left" भी उपलब्ध है. attempt-left और attempt-right को एक साथ इस्तेमाल करने के लिए, पक्का करें कि attempt-left एलिमेंट पहले हो.

फ़्लोटिंग इमेज, कॉलम की चौड़ाई के 50% से ज़्यादा नहीं होनी चाहिए. अगर ऐसा होता है, तो उन्हें फिर से स्केल किया जाता है.

<img src="/path/to/image.png" alt="Alert dialog"
     class="screenshot attempt-right">

इन क्लास का इस्तेमाल करके, दूसरे एलिमेंट भी फ़्लोट किए जा सकते हैं. जैसे, इमेज और कैप्शन, दोनों वाला <figure>:

<figure class="attempt-right">
  <img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
  <figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>

फ़्लोट किया गया टेक्स्ट मिटाना

फ़्लोट किए गए एलिमेंट के आस-पास टेक्स्ट के रैप होने और अपनी मूल चौड़ाई में दिखने से रोकने के लिए, फ़्लोट किए गए एलिमेंट के बाद वाले एलिमेंट में clear क्लास जोड़ी जा सकती है.

<p class="clear">Hello world.</p>

क्लियर क्लास का उदाहरण

इस उदाहरण में, दूसरे पैराग्राफ़ में clear क्लास शामिल है.

यह पैराग्राफ, फ़्लोट की गई इमेज के चारों ओर रैप होता है . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

इस पैराग्राफ़ में एक साफ़ क्लास है और यह फ़्लोट की गई इमेज के चारों ओर नहीं घूमता. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

क्लियर क्लास के बिना का उदाहरण

इस उदाहरण में, दोनों पैराग्राफ़ फ़्लोट की गई इमेज के चारों ओर रैप हो गए हैं.

यह पैराग्राफ, फ़्लोट की गई इमेज के चारों ओर रैप होता है. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

यह पैराग्राफ, फ़्लोट की गई इमेज के चारों ओर रैप होता है. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

गहरे रंग वाली थीम की इमेज

DevSite, क्लासनेम का एक छोटा सेट उपलब्ध कराता है. इन्हें इमेज पर लागू करके, गहरे रंग वाली थीम चालू होने पर उनकी दिखावट में बदलाव किया जा सकता है.

इमेज को गहरे रंग में बदलना

डिफ़ॉल्ट रूप से, गहरे रंग वाली थीम में SVG फ़ाइलों को छोड़कर, सभी इमेज थोड़ी गहरे रंग की दिखती हैं.

गहरे रंग वाली थीम चालू होने पर, इमेज को डिफ़ॉल्ट रूप से गहरे रंग में दिखने से रोकने के लिए, इमेज में कोई फ़िल्टर क्लास जोड़ें:

<img src="/path/to/image.jpg" class="no-filter" alt="">

इमेज को उलटा करना

काले या गहरे रंग के मोनोक्रोम कलर पैलेट वाली इमेज के लिए, इमेज में invert क्लास जोड़ें, ताकि वह डार्क थीम में सफ़ेद/हल्का दिखे:

<img src="/site-assets/logo-github.png" class="invert" alt="">

_index.yaml पेज के लिए, लाइन आइटम के classname फ़ील्ड में invert जोड़ें:

- items:
  - classname: invert
    icon:
      path: /site-assets/logo-github.png

गहरे रंग वाली थीम के वैरिएंट की अलग इमेज

अगर आपको एक अलग इमेज देनी है, जो सिर्फ़ गहरे रंग वाली थीम चालू होने पर दिखे, तो मौजूदा <img> एलिमेंट को <picture> एलिमेंट में रैप करें. साथ ही, गहरे रंग वाली थीम वाले वैरिएंट के लिए <source> एलिमेंट जोड़ें.

नीचे दिए गए उदाहरण में, <picture> एलिमेंट में Google वर्डमार्क के लिए दो SVG फ़ाइलें हैं. गहरे रंग वाली थीम बंद होने पर, <img> एलिमेंट में इमेज फ़ाइल दिखती है. इसमें, Google ब्रैंड के चार रंगों के साथ वर्डमार्क दिखता है. गहरे रंग वाली थीम चालू होने पर, <source> एलिमेंट में इमेज फ़ाइल दिखती है. इसमें वर्डमार्क पूरी तरह से सफ़ेद होता है और इसमें ब्रैंड के रंग नहीं होते.

उदाहरण

कोड

<picture>
  <source
    srcset="/devsite/images/google-dark-theme.svg"
    media="(prefers-color-scheme: dark)"
    class="devsite-dark-theme"
    alt="">
  <img src="/devsite/images/google.svg" alt="">
</picture>

नोट

गहरे रंग वाली थीम, फ़ीचर फ़्लैग की मदद से चालू की जाती है. इसलिए, कृपया <source> एलिमेंट के एट्रिब्यूट के बारे में इन बातों का ध्यान रखें:

<source> एलिमेंट में devsite-dark-theme क्लास शामिल होनी चाहिए. इससे DevSite के फ़्रंटएंड को मीडिया एट्रिब्यूट और उसकी वैल्यू को अपडेट करने के लिए एक हुक मिलता है. यह अपडेट, उपयोगकर्ता के चुने गए डार्क थीम के विकल्प: light, dark या device के आधार पर होता है. मीडिया एट्रिब्यूट की वैल्यू में (prefers-color-scheme: dark) मीडिया क्वेरी शामिल होनी चाहिए. अगर आपके पास मीडिया एट्रिब्यूट में पहले से ही media क्वेरी वाले <source> एलिमेंट हैं, तो मौजूदा मीडिया क्वेरी के साथ and (prefers-color-scheme: dark) जोड़ें या नया <source> एलिमेंट जोड़ें, जिसका मीडिया एट्रिब्यूट की वैल्यू (prefers-color-scheme: dark) हो. उपयोगकर्ता की चुनी गई डार्क थीम के विकल्प के आधार पर, media क्वेरी और उसकी वैल्यू को हटा दिया जाएगा या बदल दिया जाएगा. srcset एट्रिब्यूट में, गहरे रंग वाली थीम वाले वैरिएंट की इमेज का फ़ाइल नाम, तकनीकी तौर पर कुछ भी हो सकता है. हालांकि, हमारा सुझाव है कि मौजूदा इमेज के फ़ाइल नाम में -dark-theme जोड़ें.