एलिमेंटर में चिनाई गैलरी कैसे बनाएं (३ तरीके)

कुंजी तकिए

• चिनाई का मतलब है कि छवियां एक समान कार्ड में क्रॉप होने के बजाय अपना अनुपात रखती हैं, इसलिए एक पोर्ट्रेट फोटो लंबा रहता है।
• एलिमेंट की मुफ्त छवि गैलरी विजेट में कोई चिनाई विकल्प नहीं है इसके लेआउट नियंत्रण कॉलम और अंतराल हैं।
• मास्टर एडॉन्स फ़िल्टर करने योग्य छवि गैलरी में एक चिनाई स्विच है जो क्रॉपिंग को रोकता है, लेकिन फ्रंट एंड स्क्रिप्ट वस्तुओं को पंक्तियों में रखती है, इसलिए लंबे कार्ड एक ही पंक्ति में छोटे कार्डों के नीचे एक अंतर छोड़ देते हैं।
• यदि आप बिना किसी अंतराल के कसकर पैक किए गए कॉलम चाहते हैं, तो कंटेनर पर सीएसएस कॉलम मुफ्त इंस्टॉल पर ईमानदार मार्ग है।
• उत्पाद शॉट्स और टीम फ़ोटो के लिए एक समान ग्रिड आमतौर पर चिनाई से बेहतर पढ़ता है, इसलिए इसके बजाय छवि पहलू अनुपात चालू करें।

चिनाई वह लेआउट है जहां छवियां अपनी प्राकृतिक ऊंचाई पर बैठती हैं और कॉलम लड़खड़ाते हैं, आकार Pinterest परिचित हो गया है यह फोटोग्राफी के लिए उपयुक्त है, जहां एक चित्र फ्रेम को एक वर्ग में काटने से आधा चित्र दूर हो जाता है।

एलिमेंटर तीन अलग-अलग तरीकों से इसके करीब पहुंच सकता है, और वे सभी एक ही चीज़ का उत्पादन नहीं करते हैं उनमें से एक में मेसनरी लेबल वाला एक स्विच है जो नाम से कम बताता है, जो आपके निर्माण से पहले पढ़ने लायक हिस्सा है।

चिनाई, ग्रिड और उचित: अंतर

चिनाई और न्यायसंगत दोनों मूल फसल की रक्षा करते हैं अंतर यह है कि गणित किस दिशा में चलता है: चिनाई कॉलम की चौड़ाई को ठीक करती है और ऊंचाई को अलग-अलग होने देती है, उचित पंक्ति की ऊंचाई को ठीक करती है और चौड़ाई को अलग-अलग होने देती है।

रूट 1: एलिमेंटर्स गैलरी विजेट (प्रो)

एलिमेंट की मुफ्त छवि गैलरी विजेट में दो लेआउट नियंत्रण, कॉलम और रिक्ति है, और यह एक समान कार्ड के लिए फसल है गैलरी विजेट, जो प्रो है, में तीन मूल्यों के साथ एक लेआउट नियंत्रण है: ग्रिड, जस्टिफाइड और मेसनरी चिनाई असली चीज है, कॉलम कोई अंतराल के साथ पैक नहीं है, और प्रो पोर्टफोलियो विजेट का अपना मेसनरी स्विच भी है यदि आप पहले से ही प्रो के मालिक हैं, तो यह सबसे छोटा रास्ता है और स्थापित करने के लिए कुछ भी नहीं है।

रूट 2: फ़िल्टर करने योग्य गैलरी में चिनाई स्विच

निःशुल्क एलिमेंटर इंस्टाल पर, फ़िल्टर करने योग्य छवि गैलरी इसके सेटिंग्स अनुभाग में इमेज एस्पेक्ट रेशियो और गटर के बगल में एक मेसनरी स्विच है।

चिनाई चालू और छवि पहलू अनुपात बंद होने के साथ, छवियां अपने स्वयं के अनुपात रखती हैं, इसलिए एक पोर्ट्रेट फ्रेम लंबा रहता है और कुछ भी क्रॉप नहीं किया जाता है कॉलम पैकिंग वह हिस्सा है जो आपको नहीं मिलता है वर्तमान रिलीज में स्क्रिप्ट जो ग्रिड को पंक्तियों में व्यवस्थित करती है, इसलिए एक छोटी छवि अगली पंक्ति शुरू होने तक इसके नीचे एक खाली जगह छोड़ देती है।

यह तब उपयोगी होता है जब आपकी छवियां आकार में लगभग समान होती हैं, क्योंकि कुछ भी क्रॉप नहीं होता है और पंक्तियाँ साफ रहती हैं। पैक किए गए Pinterest के लिए निःशुल्क इंस्टॉल देखें, रूट 3 इसका उत्तर है।

मार्ग 3: एक कंटेनर पर सीएसएस कॉलम

सीएसएस में एक कॉलम लेआउट है जो सामग्री को पैक करता है जिस तरह से चिनाई चाहिए अपनी छवियों को एक कंटेनर में रखें, इसमें सीएसएस की कुछ लाइनें जोड़ें, और ब्राउज़र बिना स्क्रिप्ट के काम करता है।

selector {
  column-count: 3;
  column-gap: 24px;
}
selector img {
  width: 100%;
  margin-bottom: 24px;
  break-inside: avoid;
}
@media (max-width: 767px) {
  selector { column-count: 2; }
}

द selector कीवर्ड उस तत्व को लक्षित करता है जिसे आप संपादित कर रहे हैं, इसलिए यह स्निपेट कंटेनर पर ही कस्टम सीएसएस बॉक्स में जाता है एक मुफ्त एलिमेंटर इंस्टॉल पर वह बॉक्स एक ऐडऑन से आता है जैसे कि कस्टम सीएसएस, चूंकि एलिमेंटर अपने स्वयं के कस्टम सीएसएस फ़ील्ड को प्रो के रूप में चिह्नित करता है।

व्यापार बंद आदेश दे रहा है सीएसएस कॉलम प्रत्येक कॉलम में ऊपर से नीचे तक भरते हैं, इसलिए पढ़ने का क्रम कॉलम एक से नीचे चलता है, फिर कॉलम दो से नीचे एक गैलरी के लिए कोई भी अनुक्रम में नहीं पढ़ता है जो ठीक है किसी भी कालानुक्रमिक के लिए यह नहीं है।

छवि आकार जो चिनाई को सही बनाते हैं

• एक सुसंगत चौड़ाई पर अपलोड करें लगभग १,२०० पीएक्स तीन कॉलम ग्रिड के लिए बहुत है और पृष्ठ प्रकाश रखता है।
• ऊंचाई अलग-अलग होने दें और चौड़ाई समान रखें, क्योंकि चिनाई स्तंभ की चौड़ाई तय करके काम करती है।
• छवि संकल्प को जानबूझकर सेट करें नौ छवि ग्रिड में पूर्ण आकार की फाइलें बिना किसी दृश्य लाभ के लिए एक धीमा पृष्ठ है।
• गटर स्लाइडर उत्तरदायी है और ० से ४० पीएक्स तक चलता है, इसलिए आप इसे फोन पर कस सकते हैं।
• एक चरम फ्रेम से बचें स्क्वायर छवियों के बीच एक एकल बहुत लंबा पैनोरमा बाकी सब कुछ से आंख खींचता है।

जब एक समान ग्रिड बेहतर उत्तर है

छवि पहलू अनुपात को चालू करें और आपको एक समान ग्रिड मिलेगा, जो कि उत्पाद शॉट्स, टीम फ़ोटो और लोगो चाहते हैं, साथ ही कुछ और जो एक सेट की तरह दिखना चाहिए।

चुनने का एक सरल तरीका: यदि छवियों को एक कैमरा सेटअप के साथ एक सत्र में शूट किया गया था, तो उन्हें ग्रिड में क्रॉप करें यदि वे अलग-अलग झुकाव में अलग-अलग शूट से आते हैं, तो उन्हें अपना आकार रखने दें।

अक्सर पूछे जाने वाले प्रश्न

अंतिम विचार

तीन मार्ग, तीन अलग-अलग परिणाम एलिमेंटर प्रो की गैलरी विजेट आपके लिए कॉलम पैक करता है फ़िल्टर करने योग्य गैलरी पर चिनाई स्विच क्रॉपिंग को रोकता है और पंक्तियों को रखता है, जो अक्सर पर्याप्त होता है सीएसएस कॉलम ऑर्डर पढ़ने की लागत पर, एक मुफ्त इंस्टॉल पर पैक लुक देता है।

मूल फसल की रक्षा करना और एक साफ ग्रिड रखना दो अलग-अलग लक्ष्य हैं, इसलिए वह मार्ग चुनें जो आपके पास वास्तव में है।

संबंधित पढ़ने

• फ़िल्टर करने योग्य छवि गैलरी विजेट
• एलिमेंटर में फ़िल्टर करने योग्य गैलरी कैसे बनाएं
• एलिमेंटर गैलरी विजेट: बेसिक, प्रो और ऐडऑन की तुलना की गई
• कस्टम सीएसएस एक्सटेंशन
• गैलरी स्लाइडर विजेट