הגדרת גלריית תמונות מותאמת ב-1C-Bitrix
גלריית תמונות ב-Bitrix עלולה להפוך לאיטית ללא WebP וטעינה עצלה. לקוחות חווים לעיתים קרובות זמני טעינה של מעל 15 שניות במובייל, ותנועת SEO מגוגל תמונות היא מינימלית. התמונות הן לרוב JPEG בגודל 5 MB, הרשת נשברת על מסכים קטנים, ותגי alt ריקים. יש לנו ניסיון של למעלה מ-10 שנים בהקמת גלריות תמונות ב-1C-Bitrix, עם למעלה מ-50 פרויקטים שהושלמו. הפתרונות שלנו משפרים את מהירות הטעינה בעד 70% ומגדילים את התנועה מגוגל תמונות פי 3–5, וחוסכים ללקוחות עד $3000 בשנה על רוחב פס CDN. מאמר זה מכסה שתי גישות: מודול גלריית התמונות וגלריה מותאמת אישית על אינפובלוק. תלמדו כיצד לבחור את האפשרות הנכונה ולהשתמש בכלים מודרניים כמו GLightbox ו-CSS Grid.
כיצד לבחור בין מודול גלריית התמונות לאינפובלוק מותאם אישית?
מודול גלריית התמונות פועל על גבי אינפובלוק, ויוצר אינפובלוק ייעודי עם מאפיינים מוגדרים מראש. רכיבים:
-
photogallery— רכיב מורכב (אלבומים + תמונות). -
photogallery— רשימת אלבומים. -
photogallery.album.list— יצירה/עריכה של אלבום. -
photogallery.album.edit— רשימת תמונות באלבום. -
photogallery.detail.list— צפייה בתמונה. -
photogallery.detail.view— העלאת תמונות.
פרמטרים: photogallery.upload, photogallery, IBLOCK_ID, ALBUM_PHOTO_THUMBS_SIZE.
מגבלות: תבניות מיושנות, חוסר ב-lightbox מודרני, רספונסיביות ירודה. עבור אתר מודרני, יש צורך בשיפוץ מלא של התבניות. עם זאת, זה נוח להתחלה מהירה.
אינפובלוק מותאם אישית מציע שליטה מלאה. צרו אינפובלוק "גלריית תמונות". קטעים הם אלבומים; אלמנטים הם תמונות. מאפיינים מינימליים:
| מאפיין | סוג | מטרה |
|---|---|---|
| PREVIEW_PICTURE | קובץ (מובנה) | תמונה ממוזערת |
| DETAIL_PICTURE | קובץ (מובנה) | תמונה בגודל מלא |
| DESCRIPTION | מחרוזת | כיתוב לתמונה |
| PHOTOGRAPHER | מחרוזת | שם הצלם |
אינפובלוק מותאם אישית גמיש פי 2 ממודול גלריית התמונות ומאפשר שילוב קל יותר של WebP, טעינה עצלה ורשתות רספונסיביות.
יישום גלריה על אינפובלוק
השתמשו ב-ALBUM_PHOTO_SIZE עבור רשת התמונות. עבור lightbox, עטפו כל תמונה בקישור עם מאפיין PHOTOS_PER_PAGE:
<a href="/upload/photo_full.jpg" class="glightbox" data-gallery="album1"> <img src="/upload/photo_thumb.webp" loading="lazy" alt="Описание"> </a> אתחול GLightbox: DETAIL_PICTURE. הוא נטען פי 5 מהר יותר מ-Fancybox.
בניית רשת רספונסיבית
CSS Grid עובד מצוין:
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; } עבור פריסות masonry, השתמשו ב-Masonry.js או הגדירו יחס גובה-רוחב קבוע (לדוגמה, PREVIEW_PICTURE).
אופטימיזציה של תמונות
- WebP: המרת תמונות בעת ההעלאה באמצעות
CFile::ResizeImageGet()ו-news.list. WebP מקטין את גודל הקובץ ב-30% בהשוואה ל-JPEG. יישמו מטמון בצד השרת עם ETag כדי להפחית עוד יותר את עלויות רוחב הפס. - טעינה עצלה: הוסיפו
news.detailלכלnews.listמלבד 4–6 הראשונים מעל הקיפול. זה מקטין את משקל העמוד הראשוני בעד 60%. - גדלי תמונות ממוזערות: השתמשו ב-400x300px עבור הרשת והגבילו תמונות lightbox לרוחב של 1600px.
- השתמשו ב-
data-galleryעבור תמונות רספונסיביות, המשרתות רזולוציות שונות בהתאם ל-viewport.
SEO לגלריה
- מאפייני Alt: כללו טקסט תיאורי כמו "אלבום גלריית תמונות ב-Bitrix."
- סימון Schema.org: הוסיפו
<a href="/upload/photo_full.jpg" class="glightbox" data-gallery="album1"> <img src="/upload/photo_thumb.webp" loading="lazy" alt="Описание"> </a>ו-GLightbox({ selector: '.glightbox' })באמצעות נתונים מובנים JSON-LD. - תגי Meta: הגדירו כותרות ותיאורים עבור דפי קטעי האלבום. השתמשו בתגי
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }כדי למנוע תוכן כפול. - שקלו ליצור מפת אתר XML עבור תמונות כדי לשפר את האינדוקס. זה גם עוזר עם תכונת מציג התמונות של Bitrix והיררכיית האלבומים של Bitrix.
מה כלול בהקמה במפתח מלא
אנו מספקים את המחזור המלא:
- ייעוץ וניתוח דרישות
- עיצוב: יצירת אינפובלוק, הגדרת מאפיינים
- פיתוח: שילוב GLightbox, CSS Grid, WebP, טעינה עצלה
- SEO: תגי alt, סימון Schema.org, תגי meta
- בדיקות על מכשירים (רוחב 320–1920px)
- הדרכה למנהלי תוכן
- אחריות ותמיכה למשך חודש
רשימת בדיקה של טעויות נפוצות
- חוסר בטעינה עצלה → טעינה איטית במובייל - JPEG ללא דחיסה → 5 MB לכל תמונה. השתמשו ב-WebP ובשינוי גודל. - תגי alt ריקים → אובדן תנועה מגוגל תמונות - רשת ללא media queries → חפיפה על מסכים צרים - Lightbox לא רספונסיבי → מודאל חורג מהמסךהשוואה: מודול גלריית תמונות לעומת אינפובלוק מותאם אישית
| קריטריון | מודול גלריית תמונות | אינפובלוק מותאם אישית |
|---|---|---|
| מהירות יישום | מהיר (רכיבים מוכנים) | בינוני (דורש פיתוח) |
| גמישות | נמוכה | גבוהה (גמיש פי 2) |
| רספונסיביות | דורש כוונון | ניתן להתאמה מלאה |
| SEO | תגי meta סטנדרטיים | כל סימון (לדוגמה, Schema.org) |
| פורמטים מודרניים | דורש תכנות | WebP, טעינה עצלה, srcset |
לצוות שלנו ניסיון של למעלה מ-10 שנים ו-50+ פרויקטי Bitrix. חבילות מתחילות ב-$500. צרו קשר לייעוץ—נעזור לכם לבחור את האפשרות הטובה ביותר ולהקים את גלריית התמונות שלכם במפתח מלא.
תיעוד רשמי של מודול גלריית התמונות: תיעוד רשמי עוד על פורמט WebP — הוא דוחס תמונות ב-25–35% ללא אובדן איכות.