إخفاء الصور في مدونات Blogger باستثناء تصنيف مُحدد (حل نهائي)

يواجه العديد من مستخدمي Blogger مشكلة في التحكم في ظهور الصور داخل مشاركات مدوناتهم. قد يرغب البعض في إخفاء جميع الصور في جميع المشاركات باستثناء المشاركات التي تنتمي إلى تصنيف معين، مثل "صور" أو "معرض". في هذه المقالة، سأقدم لكم حلاً نهائيًا وفعّالًا لهذه المشكلة، باستخدام كود JavaScript و CSS بسيط. هذا الحل يضمن إخفاء الصور بشكل صحيح، بغض النظر عن طريقة تضمينها في المشاركة.

المشكلة:

الطريقة التقليدية للتحقق من وجود صورة في مشاركة Blogger باستخدام المتغير data:post.firstImageUrl لا تعمل دائمًا، خاصةً إذا كانت الصورة مُضمّنة كخلفية لعنصر HTML. كما أن تطبيق أنماط CSS مباشرة على أساس التصنيفات غير ممكن في Blogger بطريقة ديناميكية بسيطة.

الحل:

الحل الأمثل لهذه المشكلة هو استخدام كود JavaScript للبحث عن جميع عناصر <img> داخل محتوى المشاركة، ثم تطبيق نمط display: none; لإخفائها إذا كانت المشاركة لا تنتمي إلى التصنيف المحدد.

كود HTML لقالب postBody:

HTML

<b:includable id='postBody' var='post'>
  <b:if cond='data:blog.pageType == "item"'>
    <b:if cond='data:post.labels any (label => label.name == "صور")'>
      <div class='post-image'>
        <script type='text/javascript'>
          //<![CDATA[
          var postContent = document.getElementById('post-body');
          var imgElements = postContent.getElementsByTagName('img');
          if (imgElements.length > 0) {
            document.write('<img src="' + imgElements[0].src + '" alt="' + imgElements[0].alt + '"/>');
          } else {
            document.write('<img src="https://via.placeholder.com/300x200?text=Default+Image" alt="' + data:post.title + '"/>');
          }
          //]]>
        </script>
      </div>
    <b:else/>
        <style>
          #post-body img {
            display: none;
          }
        </style>
    </b:if>
  </b:if>
  <b:if cond='data:view.isPost'><b:tag cond='data:widgets any w => w.sectionId == "colorify-pro-main-before-ad"' id='before-ad' name='div'/></b:if>
  <div class='post-body entry-content' id='post-body'>
    <data:post.body/>
  </div>
  <b:if cond='data:view.isPost'><b:tag cond='data:widgets any w => w.sectionId == "colorify-pro-main-after-ad"' id='after-ad' name='div'/></b:if>
</b:includable>

شرح الكود:

• <b:if cond='data:post.labels any (label => label.name == "صور")'>: يتحقق هذا الشرط مما إذا كانت المشاركة تنتمي إلى التصنيف "صور". استبدل "صور" باسم التصنيف الذي تريده.
• كود JavaScript: يبحث هذا الكود عن جميع الصور داخل محتوى المشاركة ويعرض الصورة الأولى أو صورة افتراضية إذا لم تكن هناك صور.
• <b:else/>: إذا كانت المشاركة لا تنتمي إلى التصنيف "صور"، يتم تنفيذ الكود التالي.
• <style> #post-body img { display: none; } </style>: يُخفي هذا الكود CSS جميع الصور داخل محتوى المشاركة.

طريقة التطبيق:

1. سجل الدخول إلى مدونة Blogger الخاصة بك.
2. انتقل إلى "المظهر" > "تعديل HTML".
3. ابحث عن <b:includable id='postBody' var='post'>.
4. استبدل محتويات هذا القالب بالكود المذكور أعلاه.
5. احفظ القالب.

الاختبار:

بعد تطبيق الكود، اختبر الحالات التالية:

• مشاركة مصنفة "صور" بصورة مضمنة: يجب أن تظهر الصورة.
• مشاركة مصنفة "صور" بدون صورة مضمنة: يجب أن تظهر الصورة الافتراضية.
• مشاركة غير مصنفة "صور" بصورة مضمنة: يجب ألا تظهر الصورة.
• مشاركة غير مصنفة "صور" بدون صورة مضمنة: يجب ألا تظهر أي صورة.

ملاحظات هامة:

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

الخلاصة:

باستخدام هذا الحل، يمكنك التحكم بشكل كامل في ظهور الصور في مدونة Blogger الخاصة بك، وإخفائها في جميع المشاركات باستثناء تلك التي تنتمي إلى تصنيف مُحدد.