การใช้คลาส CSS เพื่อจัดรูปแบบของภาพ ในเทมเพลตแคสสิโอเปียของจูมล่า

 

บทนำ

ในบทความก่อนของซีรีส์นี้ (แคสสิโอเปีย {--mlinkarticle=8445--}เทมเพลตในตัวที่ทรงพลังของ Joomla: วิธีใช้คลาส CSS สําหรับบล็อกหมวดหมู่ของคุณ) เราพูดถึงคลาส CSS สำหรับหมวดหมู่ของบล็อก ครั้งนี้เราจะมาดูการจัดแต่งและการวางตําแหน่งรูปภาพในบทความ

การเลือกคลาสให้กับบทความ

ใน Joomla 4 มันสามารถที่จะแทรกคลาส CSS สําหรับภาพได้ ภายใต้ Content -> Options -> Editing Layout คุณจะพบฟิลด์ Intro Image Class และ Full Text Image Class คลาสที่คุณป้อนนี้ถูกใช้ทั่วโลกสําหรับบทความทั้งหมด ฟิลด์ Intro Image Class เกี่ยวข้องกับบล็อกหมวดหมู่เท่านั้นและไม่ได้เป็นส่วนหนึ่งของบทความนี้ เราจะเจาะลึกลงไปในฟิลด์ Full Text Image Class ในการติดตั้ง Joomla มาตรฐานฟิลด์จะเต็มไปด้วยคลาส "ซ้าย" คลาสดั้งเดิม "ซ้าย" และ "ขวา" จะลอยภาพไปในทิศทางที่สอดคล้องกันใน แคสสิโอเปีย เท่านั้น

การใช้คลาส

เนื่องจาก แคสสิโอเปีย นั้นใช้ Bootstrap เราจึงสามารถใช้คลาส "float-start" เพื่อวางตําแหน่งภาพเต็มทางด้านซ้าย (ทางด้านขวาสําหรับภาษา rtl) ของบล็อกข้อความ "float-end" สําหรับการวางตําแหน่งภาพเต็มทางด้านขวา (ด้านซ้ายสําหรับภาษา rtl) และ "float-none" เพื่อให้รูปไม่ลอย (https://getbootstrap.com/docs/5.3/utilities/float/) ในการทดสอบคลาสเราจะสร้างบทความและเพิ่มรูปภาพบทความแบบเต็มลงในแท็บ "รูปภาพและลิงก์":

เรากําลังใช้ "float-start" ระดับโลกซึ่งเราป้อนภายใต้เนื้อหา -> ตัวเลือก -> การแก้ไขเค้าโครง -> คลาสรูปภาพแบบเต็ม แต่คุณสามารถป้อนคลาสในแต่ละบทความได้ และนี่คือผลลัพธ์ในหน้าเว็บ:

เพื่อให้ภาพที่ลอยนั้นดูดีขนาดของภาพมีความสําคัญมากเพราะคุณต้องเว้นที่ให้ข้อความด้วย หากรูปภาพใหญ่เกินไป จะไม่มีพื้นที่ว่างเหลือสําหรับข้อความ หากเราใช้ "float-start" หรือ "float-end" ภาพจะลอย (หรืออาจจะ) ไม่ว่าหน้าจอของคุณจะกว้างแค่ไหนก็ตาม จะทำให้ได้ภาพที่ไม่สวยงาม นั่นคือลักษณะของภาพลอยบนหน้าจอกว้าง 767px:

เพื่อแก้ปัญหานี้เราสามารถใช้คลาสลอยที่ตอบสนอง: https://getbootstrap.com/docs/5.3/utilities/float/#responsive

การใช้ "float-md-start" รูปภาพจะลอยเฉพาะในหน้าจอที่มีขนาดใหญ่กว่า 767px ส่วนภาพที่เล็กกว่านั้นข้อความจะแสดงใต้ภาพ:

ปัญหาเดียวของคลาสโฟลตที่ตอบสนองคือไม่มีระยะขอบของข้อความ แต่คุณสามารถเพิ่มคลาสสําหรับระยะขอบได้เช่นกัน เช่น "me-md-2": ระยะขอบ (ทางด้านขวาของรูปภาพ สําหรับหน้าจอขนาดกลางและใหญ่กว่า และขนาด 2 นั่นคือ .5rem) เพิ่มเติมเกี่ยวกับระยะห่างใน Bootstrap: https://getbootstrap.com/docs/5.3/utilities/spacing/ และแน่นอนว่าคุณยังสามารถปรับเปลี่ยนตําแหน่งของภาพโดยใช้คลาส CSS ของคุณเองได้อีกด้วย คุณต้องที่จะจัดภาพให้อยู่กึ่งกลางใช่ไหม? ให้ป้อน "image-center" เป็นคลาสในช่องและเพิ่มคําจํากัดความ CSS นี้ในไฟล์ user.CSS ของคุณ:

.image-center {
  text-align: center;
}

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับไฟล์ user.CSS ได้ในบทความก่อนหน้าของซีรีส์นี้: https://magazine.joomla.org/all-issues/december-2023/cassiopeia-joomla-powerful-built-in-template-the-basics 

การจัดรูปแบบรูปภาพภายในบทความ

บางครั้งเราจะมีมากกว่าหนึ่งภาพในบทความ เราสามารถใช้ฟิลด์รูปภาพข้อความแบบเต็มสําหรับภาพแรกและแทรกรูปภาพเพิ่มเติมระหว่างข้อความได้ นอกจากนี้คุณยังสามารถใช้คลาส CSS ต่างๆได้ หากต้องการแทรกรูปภาพในข้อความ ให้เปิดเนื้อหา CMS แบบเลื่อนลงแล้วเลือก “สื่อ” แล้วไปที่โฟลเดอร์ด้านขวาแล้วเลือกรูปภาพ หน้าต่างใหม่จะเปิดขึ้นพร้อมกับฟิลด์มากมาย:

• คําอธิบายรูปภาพ (ข้อความแสดงแทน) - สําคัญมากสําหรับการเข้าถึงและ SEO ในกรณีที่รูปภาพของคุณเป็นเพียงการตกแต่งคุณสามารถทําเครื่องหมายในช่อง "ไม่มีคําอธิบาย" Joomla จะเพิ่มคุณสมยัติของ alt ที่ว่างเปล่า (alt = "") ให้กับรูปภาพ
• ภาพจะแสดงผลไวขึ้น
• คลาสรูปภาพ: คลาส CSS จะถูกเพิ่มลงในองค์ประกอบรูปภาพเอง
• คลาสรูปภาพ: คลาส CSS จะถูกเพิ่มลงในองค์ประกอบรูปที่มีรูปภาพ องค์ประกอบฟิกเกอร์จะถูกสร้างขึ้นก็ต่อเมื่อมีคําบรรยายเท่านั้น
• คําบรรยายภาพ: คําอธิบายภาพที่มองเห็นได้สําหรับรูปภาพ (คําอธิบายภาพเป็นการเพิ่มประสิทธิภาพและไม่ใช่การแทนที่คําอธิบายรูปภาพ)

รูปภาพจะถูกแทรกบนบล็อกข้อความและแสดงทางด้านซ้ายของบทความ ("float-md-end"):

ตัวอย่างที่เลิศๆ

มาลองจัดแต่งแบบอื่น ๆ กัน Bootstrap มีคลาส "img-thumbnail" สําหรับรูปภาพ:

คลาสจะเพิ่มเส้นขอบจาง ๆ รอบ ๆ ภาพ
ส่วนภาพที่อยู่ตรงกลางที่มีมุมโค้งมนก็ทำได้ง่ายๆ เพียงเพิ่มคลาส "rounded-5 mx-auto d-block":

ข้อมูลเพิ่มเติมเกี่ยวกับมุมมน: https://getbootstrap.com/docs/5.3/utilities/borders/#radius
ในตัวอย่างถัดไปเราจะเพิ่มเส้นขอบสีเหลืองให้กับภาพที่อยู่ตรงกลาง: "border border-5 border-warning-subtle mx-auto d-block":

ข้อมูลเพิ่มเติมเกี่ยวกับขอบเขต: https://getbootstrap.com/docs/5.3/utilities/borders/#border
อย่างที่คุณเห็นการใช้คลาส Bootstrap คุณไม่จําเป็นต้องเขียน CSS ด้วยตัวคุณเอง คุณต้องการอะไรที่สวยกว่านี้ไหม? ลองสร้างเส้นขอบนี้: https://CSS-generators.com/custom-borders/ และใช้รหัสนี้กับรูปภาพของคุณ:

.box {
    --mask:
        linear-gradient(#000 0 0) 50%/calc(100% - 55.5px) calc(100% - 55.5px) no-repeat,
        radial-gradient(farthest-side,#000 98%,#0000) 0 0/60px 60px round;
    -webkit-mask: var(--mask);
            mask: var(--mask);
}

ตัวอย่างสุดท้ายของการจัดแต่งภาพด้วยคุณสมบัติ “mask-image” การใช้ตัวสร้าง SVG ฉันได้สร้างแบบฟอร์มblob (https://app.haikei.app/) และเก็บไว้ใน "สื่อ/เทมเพลต/ไซต์/แคสสิโอเปีย/รูปภาพ" ด้วยรหัส CSS ต่อไปนี้ฉันใช้ SVG เป็นมาสก์สําหรับรูปภาพ:

.fancy-border2 {
    -webkit-mask-image: url(../images/blob-haikei.svg);
    mask-image: url(../images/blob-haikei.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

ข้อมูลเพิ่มเติมเกี่ยวกับคุณสมบัติของ mask-image  https://www.w3schools.com/CSS//CSS3_masking.asp

บทสรุป

ด้วย CSS คุณสามารถจัดรูปแบบภาพของคุณใน Joomla ได้มากมาย สามารถดูเอกสารอ้างอิงของ Bootstrap เพื่อให้คุ้นเคยกับคลาส CSS ที่มีอยู่และลองใช้มันดู! หากคุณเจออะไรที่สร้างแรงบันดาลใจให้กับเว็บให้ดูโค้ดแล้วสร้างคลาส CSS ในไฟล์ user.CSS ของคุณแล้วมาทําให้ภาพของคุณให้มันสุดยอดไปเลย!

หากคุณสนใจเกี่ยวกับ CSS เพิ่มเติมสามารถดูได้{--mlinkarticle=3795--}ที่นี่ หรือหากว่าคุณสนใจเกี่ยวกับจูมล่าเพิ่มเติม สามารถดูได้{--mlinkarticle=9703--}ที่นี่ หรือสามารถแวะชมส่วนเสริมต่างๆ ของจูมล่าได้ที่ Mindphp.com

• ดาวน์โหลดจูมล่า