חלונית הוספת מדיה לתוכן – גלריה

בלשונית זו של חלונית הוספת מדיה משתמשים כאשר רוצים להוסיף מדיה שכבר משויכת לתוכן, בין עם שויכה בעקבות ההעלאה שלה בדף עריכת התוכן, או בעקבות שיוך בספרית המדיה.

שימוש אפשרי נוסף הוא הוספת גלריה. בלשונית זו ניתן להגדיר את תכונות הגלריה ולהכניס את קוד הקיצור של הגלריה לתוכן.

הלשונית מכילה טבלה בה כל שורה מוקדשת לקובץ מדיה אחר המשויך לתוכן. טורי הטבלה הם:

  • מדיה – תמונה ושם המדיה (תמונה מוקטנת אם המיה היא תמונה אחרת סמלון ייצוגי של סוג המדיה)
  • סדר (באג גורם לשדה הסדר להופיע בפועל מתחת ל"עולות" – מספר המזהה את המיקום של המדיה בגלריה. המספר ניתן לשינוי על ידי הכנסת ערך אחר.
  • פעולות – הצג או הסתר, פותח או סוגר את האזור המציג תכונות ופעולות ספציפיות לקובץ המדיה.

מעל לטבלה קישורים לביצוע פעולות המשננות את צורת ההצגה של הטבלה:

  • כל הלשוניות – הצג או הסתר, פותח או מסתיר את האזור המציג תכונות ופעולות ספציפיות לקובץ המדיה עבור כל קבצי המדיה בטבלה
  • סדר – מיון הטבלה לפי הערך בעמודת הסדר לפי סדר עולה או יורד
  • לאפס טופס – איפוס ערכי עמודת הסדר

בנוסף לשינוי ידני של ערך הסדר ניתן גם לקבוע אותו לפי גרירה של השורות כך שיווצר הסדר הרצוי

אפשרויות העריכה:(לקבצים שאינם תמונות יש פחות אפשרויות עריכה אבל המבנה הכללי דומה)

  • הסתר (מתחלף בהצג) – מסתיר/מציג את פרטי התמונה – שימושי כאשר מעלים מספר תמונות ביחד
  • עריכת תמונה – פותח את מסך עריכת תמונה (רק לתמונות)
  • כותרת – הכותרת של דף התמונה כאשר הוא מוצג
  • טקסט חלופי – הטקסט שיוצג כאשר הדפדפן לא מצליח להציג את התמונה (רק לתמונות)
  • כיתוב – טקסט שיופיע מתחת לתמונה בצורה שבדרך כלל משויכת עיצובית לתמונה בדף התמונה וגם כאשר מכניסים את התמונה לתוכן. לרוב מתעלמים מהערך הזה עבור סוגי קבצים אחרים
  • תאור – התוכן הטקסטואלי של דף התמונה/קובץ.
  • כתובת URL לקישור – הכתובת שאליה תקשר התמונה/קובץ. הכתובת ניתנת לעריכה ואינה חייבת להוביל להצגה של המדיה. הכפתורים שמתחת לשדה מהווים קיצור להכנסת כתובות מיוחדות
    • ללא – ללא קישור או כתובת ריקה. במקרה הזה תמונות יוצגו בלי לקשר למקום כלשהו ועבור קבצים שאינם תמונות תוצג רק כותרת הקובץ. עבור תמונות כדאי להשתמש כאשר רוחב התמונה קטן מרוחב אזור התוכן, והתמונה לא אמורה לקשר לשום מקום.
    • כתובת URL לקובץ – הכתובת של קובץ המדיה. במקרה של תמונה שימוש בכתובת כזו יגרום להצגת התמונה לבד בחלון הדפדפן. במקרה של קובץ הקישור יתחיל תהליך הורדה של הקובץ. עבור תמונות כדאי להשתמש כאשר רוחב התמונה גדול מרוחב אזור התוכן, והתמונה לא אמורה לקשר לשום מקום.
    • כתובת URL של הקובץ המצורף – כתובת דף המדיה של התמונה/קובץ. לחיצה על הקישור תפתח את דף המדיה.
  • יישור (רק עבור תמונות) – מיקום התמונה יחסית לטקסט בפיסקה בה התמונה נמצאת. האפשרויות הן:
    • ללא – התמנה מוצגת כחלק מהזרימה של הטקסט
    • לשמאל – התמונה מוצמדת לצד שמאל של התוכן והטקסט זורם מימינה
    • למרכז – התמונה נמצאת במרכז אזור התוכן והטקסט מתחיל בצד ימין ועובר לצד שמאל עבור כל שורה.
    • לימין – התמונה מוצמדת לצד ימין של התוכן והטקסט זורם משמאלה
  • גודל (תמונות בלבד) – גודל התמונה שתוצג. לכל תמונה המועלית לשרת, או לאחר עריכת תמונה, נוצרות באופן אוטומטי מספר גרסאות בגדלים שונים לפי הגדרות המדיה. באזור זה ניתן לבחור באיזה גודל יעשה שימוש, או האם יעשה שימוש בתמונה המקורית הגדולה.
    במקרה שרוחב התמונה גדול מרוחב אזור התוכן יקרה אחד משני דברים, התמונה תוצג מכווצת על ידי הדפדפן כך שתתאים לרוחב, או שהתמונה תחרוג מרוחב האזור ותשתלט על אזורים אחרים.
  • להכניס לפוסט – מכניס את המדיה לתוכן לפי ההגדרות. אחרי ההכנסה החלונית נסגרת.
  • השתמש כתמונה ראשית (תמונות בלבד) – גורם לשימוש בתמונה כתמונה הראשית של התוכן
  • מחיקה – מתחיל תהליך מחיקה של קובץ המדיה מהשרת. אחרי הלחיצה תתבקשו לאשר את המחיקה.
  • שמור את השינויים – גורם לסגירת החלונית ושמירת השינויים בכותרת, תיאור של קבצי המדיה, והסדר

הגדרות גלריה:

  • קישור תמונות מוקטנות – לאן יוביל הקישור מכל תמונה בגלריה
    • קובץ תמונה – לתמונה הגדולה, כלומר לחיצה על התמונה הקטנה בגלריה תפתח את התמונה הגדולה.
    • עמוד קובץ – לדף המדיה של התמונה, כלומר לחיצה על התמונה הקטנה בגלריה תפתח את דף המדיה.
  • סידור תמונות לפי – האפשרויות הן
    • סדר תפריט – לפי שדה הסדר בטבלה
    • כותרת – לפי הכותרת של המדיה
    • תאריך/שעה – לפי הזמן בו המדיה הועלתה
    • אקראי – סדר אקראי
  • סדר – אם סידור התמונות אינו אקראי ניתן להגדיר האם הן יוצגו בסדר עולה או יורד
  • טורים בגלריה – מספר הטורים שישמשו לתצוגת הגלריה
  • הכנס גלריה לפוסט/עדכן הגדרות – מכניס או מעדכן את קוד הקיצור של הגלריה בתוכן

הוספת קישורים מבוססי תמונות לעמודה צדדית

ישנן שתי דרכים להוספת סדרות קישורים מבוססי תמונות, דרך שימוש במספר וידג'טי טקסט, או על ידי הוספת קישורים ושימוש בוידג'ט הקישורים.

שימוש בקישורים מיתר את הצורך בהעתקה או יצירה של קוד HTML כפי שנדרש עבור שימוש בוידג'ט טקסט בעוד ששימוש בויד'גטי טקסט הוא הרבה יותר גמיש

ראשית צריך לדעת מהן הכתובות של כל התמונות.

  • אם התמונה נמצאת באתר אחר נוכל בדרך כלל לדעת מה כתובת התמונה על ידי ביצוע קליק ימני עליה ובחירה באפשרות "הצגת התמונה" (המיקום של אפשרות זו בתפריט עשוי להיות שונה בין הדפדפנים אבל לכולם יש כזו). כאשר מוצגת התמונה ניתן להעתיק את הכתובת שלה משורת הכתובת של הדפדפן.
  • אם זו תמונה שלנו, נצטרך להעלות אותה לאתר דרך אפשרות העלאת קובץ מדיה.  אחרי ההעלאה נוכל לראות את הכתובת בשדה "כתובת URL לקובץ". את הכתובת ניתן לראות גם במסך העריכה של קובץ המדיה.

לצורך ההמשך נניח שהכתובת של התמונה היא
http://mysite.co.il/wp-content/uploads/2013/10/5/pic.png
הכתובת אליה מקשרים היא http://thatsite.co.il/page.html
וטקסט הקישור הוא "אתר מומלץ"

עבור שימוש בוידג'טי טקסט

כעת נוסיף לעמודה הצדדית וידג'ט טקסט  ולתוכו נוסיף את הטקסט הבא

<a href="http://thatsite.co.il/page.html"><img src="http://mysite.co.il/wp-content/uploads/2013/10/5/pic.png">אתר מומלץ</a>

אם הגודל של התמונה לא מתאים לרוחב העמודה יש שתי אפשרויות

  • לערוך את התמונה במחשב האישי ואז להעלות מחדש ולחזור על התהליך
  • להשתמש בעורך התמונות לעריכת התמונה. בסיום העריכה צריך מחדש את הכתובת משדה "כתובת URL לקובץ"
  • להורות לדפדפנים להציג את התמונה ברוחב הרצוי (זו האפשרות החוקית היחידה אם התמונה לא שלכם). אם הרוחב הרצוי הוא 300 פיקסלים נשנה את הטקסט הקודם ל

<a href="http://thatsite.co.il/page.html"><img width="300" src="http://mysite.co.il/wp-content/uploads/2013/10/5/pic.png">אתר מומלץ</a>

אם לחיצה על הקישור צריכה לפתוח חלון או לשונית חדשה בדפדפן צריך להשתמש בגירסא הבאה

<a href="http://thatsite.co.il/page.html" target="_blank"><img src="http://mysite.co.il/wp-content/uploads/2013/10/5/pic.png">אתר מומלץ</a>

אחרי שכל הוידג'טים נוספו ניתן לסדר אותם בעמודה הצדדית כך שיופיעו בסדר הרצוי.

עבור שימוש בקישורים

ראשית צריך ליצור קטגורית קישורים חדשה אליה יהיו משויכים כל הקישורים שברצוננו להציג. ניתן לעשות זאת דרך דף ניהול קטגוריות הקישורים, או בזמן הוספת הקישור הראשון אותה אנו צריכים.

כעת עבור כל קישור נבצע הוספת קישור תוך כדי הזנת:

  • "אתר מומלץ" כשם הקישור
  • http://thatsite.co.il/page.html ככתובת URL של הקישור
  • http://mysite.co.il/wp-content/uploads/2013/10/5/pic.png ככתובת התמונה של הקישור
  • דירוג המתאים למקום בו הקישור צריך להיות מוצג בין כל הקישורים

ושיוך הקישור לקטגורית הקישורים אותה יצרנו בשלב הראשון.

כעט נוסיף את וידג'ט הקישורים לעמודה הצדדית בה נרצה שהקישורים יופיעו, תוך הגדרת:

  • קטגורית הקישורים – הקטגוריה שיצרנו
  • איך למיין את הרשימה? – לפי דירוג
  • הצג את תמונת הקישור – מסומן
  • יתר האפשרויות לא מסומנות או ריקות

עריכת תמונות

עורך התמונות המובנה בוורדפרס מספק פונקציונליות עריכה בסיסית של חיתוך, סיבוב הפיכה והקטנה פרופורציונלית. אם לצורך עריכת התמונה נדרש שימוש בפילטרים, או שינוי תוכן התמונה על ידי הוספת טקסט או סימון מים צריך לעשות זאת לפני שמעלים את התמונה לוורדפרס.

התוצאה של תהליך העריכה היא תמונה חדשה שמחליפה את המקורית כקובץ המדיה אבל אינה מוחקת את התמונה המקורית והתמונה המקורית נשארת נגישה ברשת, לכן  רצוי לבצע את העריכה לפני שימוש כלשהו בתמונה, או לשנות את התמונה בכל המקומות בהן היא מופיע.
יוצא הדופן הוא שימוש בתמונה בגלריה. בגלריה באופן אוטומטי תוצג התמונה החדשה.

עבודה בסיסית עם העורך

בחלק הימני העליון של העורך מוצגים כפתורים הפעולות – המבצעים פעולות על התמונה המוצגת מתחתיהם.

הכפתורים מימין לשמאל: חיתוך, סיבוב 90 מעלות לשמאל, סיבוב 90 מעלות לימין, היפוך אנכי, היפוך אופקי, ביטול פעולה אחרונה, חזרה על פעולה שבוטלה.

הקטנת תמונה על ידי חיתוך

בחיתוך משתמשים בכדי להוריד מהתמונה חלקים שאיננו רוצים שיוצגו.

בכדי לבצע חיתוך צריך לסן את האזור שרוצים לחתוך וזה נעשה על ידי ביצוע קליק שמאלי וגרירה על התמונה. התוצאה תהיה אזור מסומן שיוצג באופן רגיל כאשר יתר התמונה "יוחשך".

  • ניתן להרחיב את האזור המסומן על ידי הקלקה על אחד הריבועים הקטנים במסגרת של האזור המסומן וגרירה שלהם.
  • ניתן ליגרור את האזור המסומן לחלק אחר של התמונה על ידי קליק שמאלי על האזור וגרירה.
  • ניתן לבטל את הסימון על ידי קליק שמאלי על החלק ה"מוחשך"

אחרי שסימנו לחיצה על כפתור החיתוך תראה לנו תמונה בה מופיע רק האזור המסומן

אם נבצע שמירה התמונה תחליף את הקודמת כקובץ מדיה.

הקטנת תמונה תוך שמירה על קנה מידה

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

בשביל לבצע שינוי כזה צריך להקליק על "שינוי גודל" מצד שמאל למעלה בעורך. ואז יוצג

הכנסת מידת רוחב או אורך חדשה תשנה אוטומטית את המידה השניה כך שהפרופורציה המקורית של התמונה תישמר.

לחיצה על "קנה מידה" תשנה את התמונה עצמה לגודל החדש. הפעולה הזו שומרת באופן אוטומטי את התמונה החדשה שמתקבלת ומחליפה את המקורית כקובץ המדיה.

חיתוך מתקדם

ניתן לשנות את גודל האזור המסומן ברמת דיוק של פיקסלים, או לקבוע פרופורציה מסוימת לאזור

אם יחס הגובה:רוחב (למעשה זה רוחב:גובה) לא ריק, בכל פעם בה ישתנה הרוחב של האזור המסומן  ישונה אוטומטית הגובה כך שהיחס ישמר. אותו הדבר נכון לשינוי הגובה.

חיתוך מציג את גודל השטח המסומן וניתן לשנות את הגודל על ידי שינוי המידות המצוינות. כלומר אם ידועות המידות מראש ניתן לקבוע אותן פה ורק להזיז את האזור המסומן על גבי התמונה.

ישנם גם קיצורי מקלדת:

  • Shift+מקשי החצים : להזיז בפיקסל אחד כל פעם
  • Shift+מקשי החצים : להזיז בפיקסל אחד
  • Ctrl+מקשי החצים : להזיז ב-10 פיקסלים כל פעם
  • Ctrl+Shift+מקשי החצים : להגדיל או להקטין בפיקסל אחד כל פעם
  • Shift + גרירה עם העכבר: שמירה על הפרופורציות

קביעת גדלי התמונות עליהם יחולו השינויים

כפי שמצוין בהגדרות המדיה, וורדפרס מיצר באופן אוטומטי שלוש גרסאות מוקטנות לתמונה המקורית – קטנה בינונית וגדולה. בעוד שהגירסאות הבינונית והגדולה מיוצרות על ידי הקטנה פרופורציונלית של התמונה המקורית, הגירסא המוקטנת עשויה להיות מיוצרת על ידי חיתוך והיא אינה פרופורציונלית לתמונה המקורית.
בתהליך עריכת התמונה ניתן לקבוע האם השינויים יוחלו על כל הגירסאות, רק על המוקטנת, או רק על האחרות.

שחזור תמונה

מאחר והתמונה המקורית נשמרת גם לאחר העריכה ניתן לשחזר אותה (למעשה לשיך אותה מחדש לקובץ המדיה). השחזור לא מוחק את הגרסאות שנוצרו לפני השחזור ואם נעשה בהן שינוי מחוץ לגלריות יהיה צריך לשנות ידנית את כל המקומות האלו.

הוספת תמונה לעמודה צדדית

בכדי להוסיף תמונה עלינו לדעת מה הכתובת שלה.

  • אם התמונה נמצאת באתר אחר נוכל בדרך כלל לדעת מה כתובת התמונה על ידי ביצוע קליק ימני עליה ובחירה באפשרות "הצגת התמונה" (המיקום של אפשרות זו בתפריט עשוי להיות שונה בין הדפדפנים אבל לכולם יש כזו). כאשר מוצגת התמונה ניתן להעתיק את הכתובת שלה משורת הכתובת של הדפדפן.
  • אם זו תמונה שלנו, נצטרך להעלות אותה לאתר דרך אפשרות העלאת קובץ מדיה.  אחרי ההעלאה נוכל לראות את הכתובת בשדה "כתובת URL לקובץ". את הכתובת ניתן לראות גם במסך העריכה של קובץ המדיה.

לצורך ההמשך נניח שהכתובת היא http://mysite.co.il/wp-content/uploads/2013/10/5/pic.png

כעת נוסיף לעמודה הצדדית וידג'ט טקסט  ולתוכו נוסיף את הטקסט הבא

<img src="http://mysite.co.il/wp-content/uploads/2013/10/5/pic.png">

אם הגודל של התמונה לא מתאים לרוחב העמודה יש שתי אפשרויות

  • לערוך את התמונה במחשב האישי ואז להעלות מחדש ולחזור על התהליך
  • להשתמש בעורך התמונות לעריכת התמונה. בסיום העריכה צריך מחדש את הכתובת משדה "כתובת URL לקובץ"
  • להורות לדפדפנים להציג את התמונה ברוחב הרצוי (זו האפשרות החוקית היחידה אם התמונה לא שלכם). אם הרוחב הרצוי הוא 300 פיקסלים נשנה את הטקסט הקודם ל

<img width="300" src="http://mysite.co.il/wp-content/uploads/2013/10/5/pic.png">

קוד מקוצר caption

הקוד המקוצר הזה מאפשר הכנסה של כיתוב/תיאור לתמונות, כך שבתצוגת הדף המתקבלת יהיה חיווי ויזואלי המקשר בין הכיתוב לתמונה.

לאחר ההכנסה הראשונית וורדפרס יחליף את הקוד המקוצר כך שבעורך תוצג התוצאה הצפויה. עבור תמונות עריכת הכיתוב עדיף שתעשה דרך מנגנוני עריכת התמונה, אבל ניתן לעבור לעורך הHTML ולשנות בו פרמטרים אם מנסים להשיג תוצאה שאינה אפשרית דרך עריכת התמונה כמו כיתוב שונה לאותה תמונה.

צורת השימוש היא (המרחאות מסביב למילה gallery הן בכדי למנוע את הפעלת קוד הקיצור וצריך להוריד אותן בשימוש אמיתי)

['caption' width="300" caption="הופעה"]<a href="http://wordpress.marksw.com/wp34/files/2013/01/IMG_0526.jpg"><img title="IMG_0526" src="http://wordpress.marksw.com/wp34/files/2013/01/IMG_0526-300×224.jpg" alt="" width="300" height="224" /></a>[/'caption']

הופעה

פרמטרים:

  • caption (חובה) – הכיתוב שיוצג
  • width (חובה) – רוחב הכיתוב
  • align – לאן ייושר טקסט הכיתוב. ערכים אפשריים:
    • alignnone – ללא ישור
    • alignright – מיושר לימין
    • alignleft – מיושר לשמאל
    • aligncenter – ממורכז
  • id – שם מזהה למתן אפשרות לעיצוב יעודי

קוד מקוצר gallery

הקוד המקוצר הזה מאפשר הכנסה אוטומטית של גלרית תמונות המשויכות לתוכן ללא צורך בשינוי של התוכן בכל פעם שמוסיפים או מוחקים תמונה.

לאחר ההכנסה הראשונית וורדפרס יחליף את הקוד המקוצר בתמונה. מהתמונה ניתן להכנס לממשק בו ניתן לשלוט על חלק מהפרמטרים של הגלריה, אבל בכדי להיות מסוגלים לשלוט בכולם צריך לעבור לעורך הHTML בו הקוד המקוצר מוצג כפשוטו.

צורת השימוש הפשוטה היא (המרחאות מסביב למילה gallery הן בכדי למנוע את הפעלת קוד הקיצור וצריך להוריד אותן בשימוש אמיתי)

['gallery']

בשימוש בצורה הזו יוצגו תמונות מוקטנות בשלוש עמודות, מסודרות, אם לא נקבע להן סדר, לפי סדר ההעלאה שלהן. כל תמונה שתוצג תקשר לדף המדיה של התמונה ומתחתיה יופיע הכיתוב שלה אם קיים לה כזה.

פרמטרים אופציונליים:

  • columns – מספר העמודות שישמשו להצגת הגלריה
  • link – אם הערך שלו הוא "file", במקום קישור לדף המדיה יהיה קישור לגירסאת התמונה המלאה
  • size – גודל התמונות המוצגות. הערכים האפשרים הם:
    • thumbnail – יוצגו תמונות קטנות בגודל המוגדר בהגדרות המדיה תחת "תמונה מוקטנת"
    • medium – יוצגו תמונות קטנות בגודל המוגדר בהגדרות המדיה תחת "בינוני"
    • large – יוצגו תמונות קטנות בגודל המוגדר בהגדרות המדיה תחת "גדול"
    • full – יוצגו התמונות המלאות
      תבניות ותוספים עשויים להגדיר גם גדלים אחרים בהם ניתן יהיה להשתמש.
  • include – רשימה של מספרים מזהים של קבצי המדיה של תמונות אותן רוצים להציג כחלק מהגלריה. תמונות אלו לא חייבות להיות משויכות לפוסט. אם include="5,8" יוצגו תמונות שקבצי המדיה שלהן מזוהים במספרים 5 ו 8 (איך למצוא מספר מזהה של קובת מדיה)
  • exclude – רשימה של מספרים מזהים של קבצי המדיה של תמונות אותן לא רוצים להציג כחלק מהגלריה למרות שהן משויכות לפוסט. אם exclude="5,8" לא יוצגו תמונות שקבצי המדיה שלהן מזוהים במספרים 5 ו 8 (איך למצוא מספר מזהה של קובת מדיה)
  • id – בגלריה יוצגו תמונות המשויכות לפוסט שהמספר המזהה שלו ניתן בפרמטר הזה. אם id="5" יוצגו תמונות המשויכות לפוסט מספר 5. (איך למצוא מספר מזהה של פוסט)
  • orderby – קביעת פרמטר המיון לפיו תבוצע הצגת התמונות. האפשרויות הן:
    • menu_order – לפי מספר ה"סדר" של התמונה בין התמונות המוצגות
    • title  – לפי כותרת קובץ המדיה של התמונה
    • post_date – לפי תאריך הפרסום של קובץ המדיה של התמונה
    • rand – אקראי
    • ID – לפי סדר העלאת התמונות
  • order – סוג המיון עולה או יורד. ערכים אפשריים הם
    • ASC – עולה
    • DESC – יורד
  • itemtag – תג הHTML  בו מוכלת כל תמונה והכותרת שלה. ברירת המחדל היא dl
  • icontag – תג הHTML  בו מוכלת כל תמונה. ברירת המחדל היא dt
  • captiontag – תג הHTML  בו מוכלת כל כותרת של תמונה. ברירת המחדל היא dd

שימוש בפרמטרים האופציונליים הוא יותר נוח כאשר עורכים את התוכן דרך עורך הHTML.

גלריה (אלבום תמונות)

גלריות משמשות להצגה בו זמנית של מספר תמונות כמו באלבום תמונות – אזור התצוגה הראשי בדרך כלל מציג תמונות מוקטנות והקלקה עליהן תאפשר לגולש לראות את התמונה בגודל מלא, או לעבור לדף המדיה שלה.

כברירת מחדל גלריה מורכבת מקבצי מדיה המשויכים לתוכן של הפוסט או העמוד. ניתן לעקוף את המגבלה הזו על ידי שימוש ישיר בקוד הקיצור gallery.