Увеличьте миниатюру django при наведении курсора мыши в админке django - PullRequest
Новая
       23

Увеличьте миниатюру django при наведении курсора мыши в админке django

0 голосов
/ 01 ноября 2018

Как добавить эффект наведения CSS на эту функцию администратора django, которая отображает миниатюру в разделе администратора. Увеличить размер изображения 

def image_tag(self):
        if self.image:
            return mark_safe('<img src="%s" style="width: 50px; height:40px;" />' % self.image.url)
        else:
            return 'No Image Found'
    image_tag.short_description = 'Image'

Ответы [ 2 ]

0 голосов
/ 03 ноября 2018

Создайте статический каталог внутри вашего django app-> антистатическую> app_name-> css-> style.css

Затем в вашем admin.py вы добавляете стиль, подобный этому 

class Media:   
    css = {
     'all': ('app_name/css/style.css',)
    }

внутри модели админ. Пример: 

class ModelNameAdmin(admin.ModelAdmin):
      class Media:   
             css = {
             'all': ('app_name/css/style.css',)
            }

затем напишите свой собственный css

0 голосов
/ 01 ноября 2018

Я рекомендую обернуть изображение в тот или иной элемент, и при наведении на него установите абсолютное положение изображения, если не увеличите макет при его увеличении.

Проверьте этот пример кода и дайте мне знать, если это работает для вас: https://codepen.io/darthrubens/pen/Zqgwoa

.profile-pic-wrapper {
  width: 60px;
  height: 90px;
  cursor: pointer;
}

.profile-pic-wrapper img {
  position: relative;
  width: 60px;
}

.profile-pic-wrapper:hover img {
  position: absolute;
  width: 120px;
}
<div class="profile-pic-wrapper">
  <img src="https://media.bizj.us/view/img/10179818/nicolascage2011cc*750xx617-823-17-0.jpg" />
</div>
<div>
  Some other content
</div>
...