נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך דרופל- שדה תמונה עם אפשרות לגודל שונה של התמונה בטיזר

מחבר:
בתאריך:

 

כדי לגרום לתמונות בפורמט הרצוי, צריך להכיר את הרעיון של פריסטים (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.

 

הוסף תגובה חדשה

 

= 4 + 2