2017-07-14 74 views
0

我有一個用戶模型,用戶可以在另一個模型中上傳多張照片。所以,在更新/創建用戶時,我也使用內聯表單來添加/更新照片。默認的django圖片上傳字段渲染效果不是很好。它顯示詳細信息,如當前圖像URL,刪除複選框,文件上傳字段和其他消息(目前,更改等)。這根本沒有吸引力。我的意思是一個管理界面,這是沒問題的。但是當涉及到最終用戶界面時,我不得不說它不夠好。我找到了從數據庫中顯示縮略圖代替image_url的方法。但我仍然需要它變得更好。無論如何,我可以渲染它如下?如何在django表單中設置圖像的樣式?

拖放功能不是必需的,因爲對於每個圖像,我想要在具有更改選項的編輯窗體中顯示小部件和圖像本身作爲小部件的背景。有沒有辦法做到這一點?

Sample Upload widjet

+0

檢查https://github.com/sigurdga/django-dropzone-upload有多種選項可以顯示縮略圖和個性化文字等。 – hansTheFranz

回答

1

檢查與該插件它很容易的評論的鏈接。 可選的,你可以使用窗口小部件的調整和使用廉價的伎倆,如:

.dropzone{ 
 
    margin-top: 5px; 
 
    width: 360px; 
 
    background-color: rgba(225,225,225,0.5) !important; 
 
    border-radius: 5px; 
 
    height:140px; 
 
    border: 3px dashed green; 
 
    padding-top: 150px; 
 
    } 
 
    .textForDropzone{ 
 
     pointer-events:none; 
 
     padding: 10px; 
 
     margin-left: 130px; 
 
    
 
     color:black; 
 
     margin-top: -110px; 
 
     z-index:10000; 
 
    }
<form method="POST"...> 
 
    
 
    <form id="uploadFiles" class="dropzone" > 
 
     <span class="mainop">2. Upload Image: </span> 
 
     <input type="text" class="dropzone"> 
 
     <h3 class="textForDropzone"> Drop Image here or click to upload </h3> 
 

您展開輸入字段並使它看起來像裏面等文本放置區....

代碼應該是這樣的,如果你使用的小部件的調整

<form method="POST"...> 
{% load widget_tweaks %} 
{% csrf_token %} 
<form id="uploadFiles" class="dropzone" > 
    <span class="mainop">2. Upload a Image: </span>{{ formUP.image|add_class:"dropzone" }} 

    <h3 class="textForDropzone"> Drop Image here or click to upload </h3> 
+1

感謝您的快速幫助。讓我試試這個。 – athultuttu

相關問題