2017-05-10 4 views
1

私はDjangoには比較的新しく、Wagtailで初心者です。Wagtailでのカルーセル画像のトラブル

私が構築しているウェブサイトは、1つのカルーセルしかなく、ホームページにあります。私はmodels.py、次の2つのモデルを作成しました:

class CarouselItem(Orderable): 
    image = models.ForeignKey(
     'wagtailimages.Image', 
     null=True, 
     blank=True, 
     on_delete=models.SET_NULL, 
     related_name='+' 
    ) 
    caption = models.CharField(max_length=255, blank=True) 
    page = ParentalKey('HomePage', related_name='carousel_items') 

    panels = [ 
    ImageChooserPanel('image'), 
    FieldPanel('caption'), 
    ] 

class HomePage(Page): 
    nila_intro = RichTextField(blank=True) 

    content_panels = Page.content_panels + [ 
      InlinePanel('carousel_items', label="Carousel Items"), 
      FieldPanel('nila_intro', classname="full"), 
     ] 

    class Meta: 
     verbose_name = "Homepage" 

をテンプレートタグが権利を取得するためには、私がしようとすると、既に行われているものを複製するためにGithubの上セキレイデモサイトを参照しました。

{% if page.carousel_items %},{% for carousel_item in page.carousel_items.all %}{{ carousel_item.caption }}などの基本操作はうまく動作します。また、管理者には、すべて私が意図した通りです。

しかし、画像や画像を取得する際に問題が発生しています。src URLを表示してください。私はsrcに次のものを追加しようとしましたが、何も起こっていません:{{carousel_item.image.url}}そして、<img>タグをすべて削除して、{% image carousel_item.image alt="Slide Image" %}というエラーが出ました。だから私は本当に何をすべきかわからない!

私は

{% load wagtailcore_tags wagtailimages_tags %}が含まれているたぶん私ModelClustersは、まだどのように機能するかについては100%明確ではありませんよ?私が見たように、皆さんはあなたのデモでカルーセルを別に管理しました。

答えて

4

http://docs.wagtail.io/en/v1.10/topics/images.htmlに記載されているように、max-800x600のようなサイズ変更ルールを{% image %}タグに指定して、テンプレートに挿入するときにイメージのサイズを変更する方法を指定する必要があります。あなたはイメージが全くリサイズしたくない場合は、originalを使用します。別のセキレイラーナーとして

{% image carousel_item.image original alt="Slide Image" %} 
+0

ダング、私はそれをどのように逃したのですか?ありがとう! カルーセルモデルを設定する方法については、本質的に間違っていることは何もありません。私はちょうど良い方法があるという気持ちが残っている? – DDiran

0

を、Gasmanの答えは正しく見えるとドキュメントはかなりよく、画像の使用をカバーしています。また、あなたのモデルは、私たちと似ているか、少なくとも類似しています。

私にとっては、カルーセルの画像応答性を混乱させるような「幅」と「高さ」の属性を避けるため、「as」構文を使用して手動イメージタグを作成する必要がありました。つまり:

{% image theme.card_image fill-262x344 as photo %} 
<img src="{{ photo.url }}" alt="" class="carousel-img"/> 
関連する問題