时间戳

首页 > 解决方案 > 使用 django 和 bootstrap 裁剪图像以解决艺术指导问题

dynamic-programming - 使用 django 和 bootstrap 裁剪图像以解决艺术指导问题

问题描述

我有一个有 400 幅画作的绘画图书馆。我创建了一个轮播模型来显示我通过管理空间创建的特定主题的绘画组。

轮播通过“img-fluid”类显示响应式图像。

我想裁剪图像，以便它们产生更强的影响。

我希望通过 HTML 而不是 jquery 来完成，以便更快地提供图像，请参阅 Mozilla 链接：

看来我应该使用图片标签来获得类似于：

<picture> 
<source media="(max-width: 799px)" srcset="img_cropped.png"> 
<source media="(min-width: 800px)" srcset="img.png"> 
<img src="img.png" alt="man on a tree" /> 
</picture>

因此，我寻找并努力使用可以：

  1. 为任何以“...img.png”结尾的painting.image 创建img_cropped.png 文件。

和

  1. 在 carousel.html 中使用 for 循环提供图像

关于如何实现这一目标的任何意见和想法？

如果它有帮助，下面是我的代码片段：

html

<div class="carousel slide" id="demo-carousel" data-ride="carousel">
 <div class="carousel-inner" role="listbox">
 {% for photo in photos %}
 {% if forloop.first %}
 <div class="carousel-item active">
 {% else %}
 <div class="carousel-item">
 {% endif %}
 {% if photo.image %}
<!-- <img class="img-responsive center-block" src='{{ photo.image.url }}' alt="Image">-->
 <img src='{{ photo.image.url }}' class="img-fluid" alt="Responsive image">
 >
 {% endif %}
 <div class="carousel-caption">
 <h3>{{ photo.title }}</h3>
 <p>{{ photo.description }}</p>
 </div>
 </div>
 {%endfor%}
</div>

模型.py：

class Photo(models.Model):
 title = models.CharField(max_length=60, default='', blank=True)
 description = models.TextField(max_length=200, default='', blank=True)
 width = models.IntegerField(default=0)
 height = models.IntegerField(default=0)
 image = models.ImageField(width_field="width", height_field="height")
 timestamp = models.DateTimeField(auto_now_add=True, auto_now=False)

 def __str__(self):
 return self.title

 class Meta:
 ordering = ["timestamp"]
 verbose_name = 'Photo'

视图.py：

def photo_carousel(request):
 queryset = Photo.objects.all()
 context = {
 "photos": queryset,
 }
 return render(request, 'bootstrap.html', context)admin.py@admin.register(Photo)
class PhotoCarouselAdmin(admin.ModelAdmin):
 list_display = ('title', 'timestamp', 'width', 'height')
 exclude = ('width', 'height')
 list_display_links = ('title', 'timestamp')

 class Meta:
 model = Photo

管理员.py：

@admin.register(Photo)
class PhotoCarouselAdmin(admin.ModelAdmin):
    list_display = ('title', 'timestamp', 'width', 'height')
    exclude = ('width', 'height')
    list_display_links = ('title', 'timestamp')

    class Meta:
        model = Photo

标签： dynamic-programmingcropresponsive-imagesdjango-bootstrap4

解决方案

推荐阅读