របៀបបន្ថែមបណ្តុំរូបភាពបែប Grid និង Masonry ដែលបត់បែនតាមអេក្រង់ (Responsive Image Gallery) ទៅក្នុង Blogger

រៀនពីរបៀបដែលអ្នកអាចបន្ថែមបណ្តុំរូបភាពដែលបត់បែនតាមអេក្រង់ទៅកាន់គេហទំព័រ Blogger ដែលអ្នកអាចបង្ហាញរូបភាពជាច្រើនក្នុងទម្រង់ជាក្រឡា (Grid)។ បណ្តុំរូបភាពជួយយើងក្នុងការបង្ហាញរូបភាពជាច្រើននៅលើទំព័រគេហទំព័រតែមួយក្នុងលក្ខណៈរៀបរយ។ អ្នកក៏អាចបន្ថែមចំណងជើងរង (captions) ទៅរូបភាពនៅក្នុងនោះផងដែរ។

វាមានប្រយោជន៍ខ្លាំងណាស់សម្រាប់ប្លុកថតរូប (Photography blogs) នៅក្នុង Blogger, គេហទំព័ររូបភាពស្តុក (Stock image sites) ហើយអ្នកក៏អាចប្រើវាដើម្បីបង្ហាញទីបន្ទាល់ (testimonials) ឬភស្តុតាងនៃផលិតផល (proof of products), ស្នាដៃ (portfolio) និងសេវាកម្ម (services) របស់អ្នកផងដែរ។

អ្នកក៏អាចបន្ថែមតំណភ្ជាប់ (links) ទៅរូបភាពនីមួយៗ និងបន្ថែមចំណងជើងរងនៅខាងក្រោមរូបភាពផងដែរ។ ដូច្នេះ ដើម្បីបន្ថែមបណ្តុំរូបភាព អ្នកត្រូវបង្ហោះរូបភាពដែលអ្នកចង់បន្ថែមជាមុនសិន រួចកត់ត្រាទុកអាសយដ្ឋានរូបភាព (image address) ទៅក្នុង Notepad។

អ្នកអាចប្រើកូដ CSS ដោយផ្ទាល់នៅក្នុងកូដ Theme ខាងលើស្លាក ]]> </b:skin>។ ប្រសិនបើអ្នកចង់បន្ថែមកូដ CSS ដោយផ្ទាល់នៅក្នុងកម្មវិធីកែសម្រួលប្រកាស (post editor) សូមប្រើស្លាក <style> CSS code Here </style> បែបនេះ។

ឥឡូវនេះ អ្នកត្រូវបើកកម្មវិធីកែសម្រួលប្រកាសប្លុកក្នុងទិដ្ឋភាព HTML (HTML view) ហើយបិទភ្ជាប់ (paste) កូដ CSS ខាងក្រោម រួចរុំព័ទ្ធវាដោយស្លាក style ដូចដែលបានបង្ហាញខាងលើ។

កូដ

.gallery {padding: 0 5px;float: left; width: 24.99999%;}
div.gallery img {width: 100%;height: auto;}
div.gallery img:hover {opacity: 0.8;}
div.img-desc {padding: 10px;text-align: center;}
* {box-sizing: border-box;}
@media only screen and (max-width: 700px){.gallery {width: 49.99999%; margin: 6px 0;}}
@media only screen and (max-width: 500px){.gallery {width: 100%;}}
.image-gallery:after {content: "";display: table;clear: both;}

ឥឡូវនេះ អ្នកត្រូវបន្ថែម កូដ HTML សម្រាប់បណ្តុំរូបភាព

កូដ

<div class="image-gallery">
<!--Image One-->
<div class="gallery">
    <a href="#" target="_blank">
      <img src="Image-URL" alt="Add Image Alt tag here">
    </a>
    <div class="img-desc">image-Caption</div>
  </div>
  
  <!--Image Two-->
<div class="gallery">
    <a href="#" target="_blank">
      <img src="Image-URL" alt="Add Image Alt tag here">
    </a>
    <div class="img-desc">image-Caption</div>
  </div>
  
</div> 

នៅទីនេះ អ្នកត្រូវបន្ថែមតំណប្រភពរូបភាព (image source link), តំណភ្ជាប់ដែលបានបន្ថែមក្នុងរូបភាពនោះ (#), និងអត្ថបទជំនួសរូបភាព (image alt text) ព្រមទាំងចំណងជើងរងរូបភាព (caption)។
ប្រសិនបើអ្នកមិនចង់បន្ថែមចំណងជើងរងនៅខាងក្រោមរូបភាពទេ គ្រាន់តែលុបបន្ទាត់នេះ <div class="img-desc">image-Caption</div> ចេញពីកូដខាងលើ។

នៅក្នុងកូដខាងលើ ខ្ញុំបានបន្ថែមរូបភាពពីរ ហើយអ្នកអាចបន្ថែមរូបភាពបន្ថែមទៀតបានយ៉ាងងាយស្រួល ដោយគ្រាន់តែចម្លងកូដខាងក្រោម ហើយបិទភ្ជាប់វាមុនស្លាក </div> ចុងក្រោយ។

កូដ

<!--Image Three-->
<div class="gallery">
    <a href="#" target="_blank">
      <img src="Image-URL" alt="Add Image Alt tag here">
    </a>
    <div class="img-desc">image-Caption</div>
  </div>

សូមចំណាំថា បច្ចុប្បន្នវាកំពុងបង្ហាញរូបភាព 4 ក្នុងមួយជួរ។ ប្រសិនបើអ្នកចង់ប្តូរវាទៅជាបី អ្នកត្រូវកែប្រែ (modify) កូដ CSS បន្តិចបន្តួច។ គ្រាន់តែស្វែងរកបន្ទាត់នេះ (បន្ទាត់ទី 1) .gallery {padding: 0 5px;float: left; width: 24.99999%;} ហើយនៅទីនេះប្តូរតម្លៃ (value) ទៅជា 33.333%

ក្រឡាបែប CSS Masonry សម្រាប់បណ្តុំរូបភាព

ប្រសិនបើអ្នកចង់បង្ហាញបណ្តុំរូបភាពបែប Masonry ដូចដែលបានបង្ហាញក្នុងរូបថតអេក្រង់ខាងក្រោម អ្នកអាចប្រើកូដខាងក្រោមនេះបាន។ រូបភាព៖ បណ្តុំរូបភាពក្រឡាបែប Masonry ដែលបត់បែនតាមអេក្រង់សម្រាប់ Blogger

កូដ

<div class="masonry">
  
  <div class="mItem">
    <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YmxvZ3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60">
  </div>
  
  <div class="mItem">
    <img src="https://images.unsplash.com/photo-1572044162444-ad60f128bdea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
  </div>

  <div class="mItem">
    <img src="https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80">
  </div>
  
  <div class="mItem">
    <img src="https://images.unsplash.com/photo-1611532736597-de2d4265fba3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80">
  </div>
  
    <div class="mItem">
    <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80">
  </div>

  <div class="mItem">
    <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
  </div>

  <div class="mItem">
    <img src="https://images.unsplash.com/photo-1641951822637-9622ad2a1cad?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80">
  </div>

</div>

<style>
.masonry img {
  width: 100%;
}
.masonry {
	column-count: 4;
	column-gap: 16px;
}
.masonry .mItem {
  display: inline-block;
  margin-bottom: 16px;
  width: 100%;
}
@media (max-width: 1199px) {
  .masonry {
    column-count: 3;
  }
}
@media (max-width: 991px) {
  .masonry {
    column-count: 2;
  }
}

@media (max-width: 767px) {
  .masonry {
    column-count: 1;
  }
}
</style>

ចប់តែ​ត្រឹម​ប៉ុណ្ណឹង៕