2017-10-18 7 views
1

以前にユーザーが登録した画像をCSSファイルに挿入しようとしました。css django 1.11.xでモデルからイメージを設定するには?

マイモデル

class Basics(models.Model): 
    ... 
    logo = models.ImageField('Logo') 
    ... 

マイcontext_processors

# -*- conding:utf-8 -*- 

from .models import Basics 

def general(request): 
    try: 
     sitebasics = Basics.objects.get(pk=1) 
    except: 
     sitebasics = False 
    context = { 
     'sitebasics': sitebasics, 
    } 
    return context 

私のcssファイル

{% load thumbnail %} 

    ... 

    .header-full-title { 
    float: left; 
    overflow: hidden; 
    padding-left: 75px; 
    background-image: url("{{ sitebasics.logo|thumbnail_url:'logo_large' }}"); 
    background-repeat: no-repeat; 
    background-position: left center; 
    } 

とHTMLを検査出力は、次のとおりです。

.header-full-title { 
    float: left; 
    overflow: hidden; 
    padding-left: 75px; 
    background-image: url({{ sitebasics.logo|thumbnail_url:'logo_large' }}); 
    background-repeat: no-repeat; 
    background-position: left center; 

イメージのパスを入れないでレンダリングすると、{{ sitebasics.logo|thumbnail_url:'logo_large' }}をcssの生のテキストとして配置します。

HTMLをレンダリングするときにCSSファイルに画像をロードする方法は?

+0

これは通常、CSSクラスを変更する方法ではありません。この荘園でこれをやっている理由はありますか?あなたは通常myproject/myproject/static/imgと.../static/cssにhtmlテンプレート{%load static%}からCSSクラスと画像を保存し、スタイルシートを読み込んで目的の画像を取得します。テンプレート内から{%if test%}することもできます。 – noes1s

答えて

2

DjangoはCSS内でレンダリングされません。

テンプレート内部その後、より良い書き込みインライン背景画像を変更したい場合は、次のテンプレート内

<div class="header-full-title" style="background-image: url('{{ sitebasics.logo|thumbnail_url:"logo_large" }}');"></div> 

ます。また、動的なCSSを作成することができますが、ので、それはそうではありませんプロパティを1つだけ変更する必要があります。

+0

いくつかのプロパティは同じ画像を持っていますが、私は1つの例文を投稿しています.cssには 'class'と' id'が5つあります。 –

+0

変更するプロパティが複数あり、それぞれの要素を変更できる場合は、おそらくCSSファイルを動的にレンダリングすることができます。こちらをご覧くださいhttps://stackoverflow.com/a/10970037/709897 –

関連する問題