מדריך דרופל- שדה תמונה עם אפשרות לגודל שונה של התמונה בטיזר
כדי לגרום לתמונות בפורמט הרצוי, צריך להכיר את הרעיון של פריסטים (presets), שאילו הם פורמטים של תמונות שאנחנו מגדירים מראש ואחר-כך משתמשים בהם באתר. לדוגמה, פריסט בפורמט קטן לטיזר ופריסט בפורמט גדול לדף עצמו.
נתחיל במלאכה:
1. כדי להשיג את התוצאה הרצויה בדרופל 6 נוריד את הרכיבים : CCK ,Filefield ,Imagefield (מאפשרים להוסיף שדה תמונה) ו-Imagecache ,ImageAPI (מאפשרים מניפולציה של התמונה).
2. נפעיל את הרכיבים: Image crop, Image field, File field, Content תחת CCK. את imageAPI ,ImageAPI GD2 ,Image cache ו-Image cache UI תחת Image cache.
3. כדי להפעיל את הרכיבים נכנסים מתפריט המנהלן: בניית אתר> רכיבים. על הדרך המומלצת להורדת רכיבים והתקנתם ניתן לקרוא כאן.
3. נגדיר פורמט תמונה שמתאים לצרכינו (preset) על-ידי כניסה מתפריט המנהלן : imagecache >Add new presets < בניית אתר.
נזין preset name (לדוגמה:small_image).
תחת New action נבחר באפשרות Add resize ונגדיר את גודל התמונה בפיקסלים width=100 ו-height=80 שזה גודל שיכול להתאים לתמונה בטיזר.
בסוף שומרים. עכשיו קיבלנו פורמט של תמונה שמתאים לצרכינו, והוא מאוחסן ב-imagecache.
באותו אופן ניתן ליצור preset לתמונה שתוצג בדף, עם גודל של 400x400. נקרא ל-preset זה big_image.
4.נוסיף שדה תמונה לסוג התוכן הרצוי. נגדיר רזולוציה מינימלית ומקסימלית של תמונה שניתן להעלות לאתר. תחת File path נגדיר את המיקום של התיקייה שיצרנו בתוך default/files . לדוגמה: default/files/animal_images. נדאג להוסיף תיקייה בשם זה לתוך תיקיית files. אפשר גם לבחור במיקום אחר, לדוגמה מטעמים של אבטחת האתר.
נמשיך ונגדיר את גודל המסמך שנעלה, תחת file size restrictions.
תחת ALT text settings נבחר באפשרות שמזין התוכן יבחר שם אלטרנטיבי לתמונה, ונקבע שם דיפולטי לדוגמה: "תמונות של בעלי חיים".
נשמור את השדה.
5. כדי שהתמונה הקטנה תופיע רק בטיזר והתמונה הגדולה תופיע רק בדף המלא, נכנס לניהול תוכן> סוגי תוכן> Edit סוג התוכן.
נכנס ללשונית display fields, ונגדיר את אפשרויות התצוגה. small_image לטיזר, ו-big_image לדף המלא.
6. נלך לאחד מפריטי התוכן בסוג התוכן, דרך ניהול תוכן> תוכן, ונערוך את פריט התוכן. כדי להוסיף תמונה לשדה התמונה שיצרנו, נבחר את הקובץ, נעלה אותו, וניזכור לתת שם אלטרנטיבי (חשוב ל-seo).
נשמור.
7. נוודא שתמונות בפורמט הנכון מופיעות בטיזר ובדף המלא.
לסיום: הוספה של הרכיב Insert תאפשר שילוב של תמונות לתוך שדה WYSIWYG. לדוגמה, CKEditor.
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.