Image control in Datalist

[Haim]

יש לי Datalist שכל Item שלו מציג תמונת מוצר מסויים באמצעות פקד Image.
תמונות המוצרים שהועלו לשרת בגודל (רוחב\גובה) די דומה אבל לא זהים ממש.
בכדי לתת מראה אחיד לכל המשבצות ניסיתי למדוד את מידת התמונה (יותר נכון של פקד Image ) באירוע ItemCreated או ItemDataBound ואח"כ להגדיר לו מידה.
למרות שפרמטר ImageUrl מזוהה נכון באירועים הנ"ל, פרמטרים Height ו- Width אינם מזוהים (= 0).
יתכן שהאירועים הנ"ל הינם שלב מוקדם מדי בשביל לקבל מידת ה-Image אבל אין לפקד Datalist משהו אחר מובנה.
דרך אגב בגישה דרך קוד מקבלים את הפרמטר Image.Height.Value ולא Image.Height סתם.
בזבזתי הרבה זמן לחפש ולא מצאתי שום תשובה.

 

[danielkatz]

מתוך דבריך קשה להבין לאיזה מחלקות התכוונת, ומה בדיוק הצורך

אניח שהתכוונת לSystem.Web.UI.WebControls.Image אם כך אתה מצפה לשוא שיתקבלו הערכים של Width וHeight. זה לא בגלל השלב אלא כי הערכים האלו נועדו לקבוע את הwidth והheight של התגית img ותו לא. כדי לקבל בזמן ריצה את הגודל הפיזי (בפיקסלים) של התמונה עליך להשתמש במחלקה אחרת: System.Drawing.Image.

בעניין הצורך, אני מבין שאתה מעוניין להציג את התמונות בגודל טבעי (1:1), א"כ זוהי הברירת מחדל ואין כל צורך להציב ערכים של גובה ורוחב.
אם אתה מתכוון סך הכל להציג תמונות מוקטנות (Thumbnailים) אז תנסה קודם שימוש במאפייני max-width וmax-height של CSS (זה מספיק לרוב השימושים).
אם אתה רוצה להציג מתחת לתמונה בפקד נפרד את גודלה את תשתמש בSystem.Drawing.Image כמו שכתבתי בתחילה.

בהצלחה

 

[drvvv]

אם תגדיר max-width אחיד לכולם אז הגובה יסתדר לבד לפי הפורפורציות וכן עם תגדיר max-height

 

[Haim]

תודה על התגובות.
אולי באמת לא הסברתי כ"כ טוב את הבעיה. בניתי דף הוספת מוצרים עם תמונות. בהעלאת תמונה לשרת היא יוצרת גם Thumbnail לתיקייה אחרת. אבל חלק מהתמונות הן "לגובה" וחלק "לרוחב". אז בניתי פונקציה שמזהה את התמונה ולפי "התנוחה" שלה יוצרת Thumbnail - אם התמונה היא לגובה אז גובה ה-Thumbnail מוגבל ל -225 ואם לרוחב - אז הרוחב מוגבל ל-150. אחרי שהעלתי כמה מאות תמונות, גיליתי שיש תמונות שהן אכן "לגובה" אבל הפרופורציה שונה - 225X169 זה יצר רוחב לא אחיד בטורים של הטבלה.
במקרה כזה לא עוזר max-width ו-max-height של CSS
לבסוף פתרתי את זה באמת דרך System.Drawing.Image ככה:

protected System.Drawing.Image currImage;
    protected void dlProducts_ItemDataBound(object sender, DataListItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem ) 
            {
                Image imgProduct = (Image)e.Item.FindControl("imgProduct");
                currImage = System.Drawing.Image.FromFile(Server.MapPath(imgProduct.ImageUrl)); 

                if (currImage.Height > 225 && currImage.Width <= 150) imgProduct.Height = 225;
                else if (currImage.Width > 150) imgProduct.Width = 150;
               
            }
    }

 

[drvvv]

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

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

 

[Haim]

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

כי יש לי גם תמונות "רזות" - אז אם, למשל, התמונה היא 225 גובה על 111 רוחב, כאשר אני נותן הוראה להציג אותה ברוחב 150, הפקד Image שומר על הפרופורציה ומקצה לה גובה 304 ואז היא בולטת מחוץ לשורה.

 

[danielkatz]

השימוש בCSS יהיה נבון יותר

לדוגמה: אתה מקדיש לכל תמונה בעמוד מקסימום של 200PX בגובה ואותו המקסימום ברוחב.

בCSS:

.thumbnail {
max-width: 200px;
max-height: 200px;
}

התוצאה תהיה ששום תמונה לא תתפוס יותר מ200PX לגובה או לרוחב. אם התמונה היא גבוהה יותר מאשר רחבה את גובהה יוגבל ל200PX ורוחבה יהיה בהתאם ליחס. וכן בתמונה רחבה, בהתאמה.

 

[Haim]

לדוגמה: אתה מקדיש לכל תמונה בעמוד מקסימום של 200PX בגובה ואותו המקסימום ברוחב.

התוצאה תהיה ששום תמונה לא תתפוס יותר מ200PX לגובה או לרוחב. אם התמונה היא גבוהה יותר מאשר רחבה את גובהה יוגבל ל200PX ורוחבה יהיה בהתאם ליחס. וכן בתמונה רחבה, בהתאמה.

עשיתי את זה אתמול לפי מה שכתבתם וגם היום ניסיתי שוב...
לבסוף גיליתי שהבעיה היא ב-IE (אני משתמש ב IE8)
ב- Chrome וב-Firefox זה מוצג כהוגן, אבל IE מתעלם מזה וגם משקר...
אמנם, כאשר אתה עושה right-click על מאפייני התמונה, כתוב שהרוחב הוא 150, אבל בעיניים רואים שזה לא כך...
העלתי גם את האופציה של CSS לשרת שתוכלו לראות בחוש:
עיצוב באמצעות קוד:
http://yidaicac.w01.winhost.com/Products.aspx?MainCatId=1&SubCatID=1
עיצוב באמצעות CSS:
http://yidaicac.w01.winhost.com/ProductsCSS.aspx?MainCatId=1&SubCatID=1
אם פותחים את 2 הלינקים ב-2 לשוניות או ב-2 חלונות רואים ברור את ההבדל ברוחב של תמונת המוצר השני בשורה הראשונה, למרות שמבאפיינים (כנ"ל) שתיהן מוצגות כרוחב 150.
(על פי בקשת בעל האתר כל גולש צריך להצהיר שהוא משתמש באינטרנט כשר , אז בהתחלה תועברו לעמוד אישור ואח"כ תכניסו שוב את הלינק בשורת הכתובות)

 

[drvvv]

הגדרת:
max-height:225px;
max-width:150px;

אולי זה המקור לבעיות, ,תנסה להגדיר רק אחד מהם (בתקווה שהשני יסתדר לבד).