בחלק זה נלמד איך ניתן לערוך את גריד התמונה עצמו - העלאת תמונה בגרסת מובייל ובגרסת דסקטופ, הוספת כותרת, כותרת משנה, טקסט וכפתור.
גריד תמונה הוא רכיב המאפשר להציג תמונה בעמוד.
כאשר עובדים עם גריד תמונה, חשוב להבין שיש אופציה להזין את התמונה בשני גדלים - אחת שמותאמת לגרסת דסקטופ, ואחת שמותאמת לגרסת מובייל.
לרוב, השימוש בגריד התמונה יהיה עבור תמונה שמוצגת כ "Full-screen" באתר. כלומר, מקצה לקצה במסך. יש כל מיני תוספות שניתן להגדיר בגריד תמונה כמו כותרת, כותרת משנה, טקסט, כפתור.
כדי להבטיח שהאתר שלכם ייראה מעולה ושהעבודה במערכת תהיה חלקה, ריכזנו עבורכם 4 כללים שחובה להכיר לפני שמתחילים עריכה במערכת. קריאה של דקה תחסוך לכם זמן יקר בהמשך!
המערכת לא שומרת אוטומטית. בכל סיום פעולה או עדכון שדה, הקפידו ללחוץ על כפתור השמירה האדום שבצד שמאל למעלה.
זכרו: לא לחצתם? השינוי לא קרה. הקפידו לשמור אחרי כל עדכון שדה או העלאת תמונה
העתקתם תוכן מ-Word או מהאינטרנט? הדביקו אותו קודם בכתבן (Notepad) ורק אז באתר, כדי לשמור על עיצוב נקי ופונטים אחידים.
מומלץ להשאיר לשונית אחת של מערכת הניהול ולשונית שנייה של האתר פתוחה, כדי לרענן ולראות את השינויים בלייב מיד לאחר השמירה.
האתר שלכם ייחודי – ייתכן ששדות מסוימים במערכת לא יופיעו באתר כי הם אינם חלק מהתבנית העיצובית שלכם.
האתר שלכם ייחודי, לכן ייתכן שפיצ'רים מסוימים במערכת לא יופיעו באתר – מילאתם שדה והוא לא מוצג? זה כנראה לא חלק מהעיצוב שלכם.
קראתם? הבנתם? אתם מוכנים לצאת לדרך!
כאן נלמד כיצד יוצרים גריד תמונה, כיצג עורכים את המעטפת שלו וכיצד מעלים תמונה מתאימה לכל רזולוציה (דסקטופ ומובייל).
נלחץ על כפתור "הוסף רכיב חדש" ונבחר בגריד מסוג "תמונה".
הוספת רכיב חדש
הוספת רכיב תמונה
בחלק זה נלמד איך ניתן לערוך את גריד התמונה עצמו - העלאת תמונה בגרסת מובייל ובגרסת דסקטופ, הוספת כותרת, כותרת משנה, טקסט וכפתור.
לגריד מסוג זה, ניתן להוסיף מעטפת של תכנים - כותרת, טקסט, וכפתור.
*חשוב לדעת - כל הנתונים שנזין מלבד התמונות יתווספו בדיפולט על גבי התמונה. באתרים שאין אופציה מוגדרת מראש, הנראות תהיה משובשת ולא נגישה על גבי התמונה. יש להשתמש באופציות אלו רק במידה ויש התייחסות נראותית ברמת התבנית.
עריכת כותרת ראשית וכפתור
עריכת טקסט
בגריד מסוג תמונה, השימוש יהיה בד"כ לתמונה שמוגת באתר על פני המסך - מקצה לקצה.
משום כך, יש הבדל בפרופורציות התמונה בגרסת הדסקטופ אל מול גרסת המובייל.
לחיצה על כפתור "בחר תמונה" בשדה התמונה העליון תפתח את בחירת הקבצים מהמחשב עבור תמונת הדסקטופ. לחיצה על כפתור "בחר תמונה למובייל" תפתח את בחירת הקבצים מהמחשב עבור תמונת המובייל.
כמובן שאם יש תמונה קיימת שמוזנת בגריד, ניתן יהיה ללחוף על כפתור הפח, למחוק אותה ולבחור תמונה חדשה לאחר מכן.
*שימו לב - מחיקה ולחיצה על כפתור שמירה מסירה את התמונה באופן מיידי, ולא ניתן יהיה לשחזר אותה לאחר מכן.
*חשוב לדעת: באתר, תוצג תמונה אחת בלבד - התמונה שתעלה לדסקטופ תוצג במחשבי דסקטופ ולפטופ, והתמונה שתעלה למובייל תוצג במכשירי מובייל. במידה ולא תעלה תמונה לשדה המובייל, התמונה שהועלתה לדסקטופ תילקח באופן דיפולטיבי ותיחתך בצורה אוטומטית בהתאם.
*חשוב לדעת 2: יש לעבוד עם העלאת התמונות לפי מסמך הנחיות גדלי התמונות באתר שנשלח ע" מנהל/ת הפרויקט.
העלאת תמונה בגרסת דסקטופ ומובייל
מחיקת תמונות קיימות והעלאה מחדש
ישנם מספר חלקים בעריכת גריד שורות אשר מוגדרים כחלקים מתקדמים יותר. כמו:
Class הוא חלק בעריכת הגריד הראשי אשר משמש את המתכנתים שלנו, ולכן אין לגעת בו!
לגריד התמונה, התנהגות דיפולט של מעין גלילה פנימית אוטומטית. התנהגות זו מוסיפה לחווית הגלילה והתנועתיות באתר.
תמונות שיועלו בדיוק במידה של התמונה שמופיעה באתר, לא יוצגו עם ההתנהגות. ההתנהגות תחול רק כאשר התמונה שמעלים תהיה גבוהה משמעותית מהגריד שבה היא מופיעה באתר.
לצורך הדוגמא, אם המידה של התמונה בעמוד היא רוחב של 1200 פיקסל על גובה של 800 פיקסל, רק אם נעלה תמונה במידה של רוחב 1200 על גובה של 1400, נוכל לראות תנועתיות.
באתרים שבהם האופציה קיימת, מסמך ההנחיות של גדלי התמונות יכיל את הגודל המלא של התמונה שכולל את ההתנהגות.