केकपीएचपी में सीएसएस फ़ाइल के अंदर यूआरएल कैसे प्रबंधित किए जाते हैं ताकि वे सही स्थान का संदर्भ दे सकें?

Question

मैं सीएसएस फ़ाइलों का उपयोग करके एक वेबसाइट तैयार कर रहा हूं, लेकिन मेरे पास पृष्ठभूमि छवियों की कई घटनाएं हैं, सूचियों में गोलियों के लिए छवियां हैं और मुझे शायद सीएसएस url() फ़ंक्शन के लिए एक और आवश्यकता मिल जाएगी।

लेकिन केक में, सभी यूआरएल कई मायनों में, Route::url() समारोह के द्वारा नियंत्रित किया जाना चाहिए, सबसे आम है $html->url()

लेकिन मेरी समस्या यह है कि सीएसएस फ़ाइलें पीएचपी से व्याख्या नहीं कर रहे हैं। मैं कैसे की तरह कुछ युक्त एक सीएसएस फ़ाइल बना सकते हैं:

div.coolbg { 
    background-image: url('<?= $html->url("/img/coolbg.jpg") ?>'); 
} 

देखें, मेरा आखिरी विकल्प लेआउट पर सीएसएस फ़ाइल इनलाइन आयात करने के लिए तो यह व्याख्या की जा सकती है। लेकिन मैं अधिक "केक" दृष्टिकोण का उपयोग करना पसंद करता हूं।

धन्यवाद!

Answer 1

आपको अपनी सीएसएस फ़ाइल में $ html-> url() का उपयोग करने की आवश्यकता नहीं है, इसके परिणामस्वरूप आपको PHP के माध्यम से सीएसएस फ़ाइलों को पार्स करने या CssController बनाने की आवश्यकता नहीं है।

यदि आपका केक ऐप आपके वर्चुअल होस्ट्स DocumentRoot में स्थापित है, तो बस वेब पथ से पूर्ण छवियों के सभी पथ बनाएं। जैसे

div.coolbg { 
    background-image: url(/img/coolbg.jpg); 
} 

यह आपके केक एप्लिकेशन आभासी मेजबान DocumentRoot में स्थापित नहीं है, तो अपने

करने के लिए एप्लिकेशन/webroot/img/coolbg.jpg पर छवि लागू होगी, यानी आप एक URL के द्वारा अपने केक ऐप्स को एक्सेस http://www.domain.com/myapp/ की तरह, तो आप सीएसएस फ़ाइल के सापेक्ष छवि के लिए पथ बनाते हैं। ऐप/वेबूट/सीएसएस/केके.generic.css जैसे स्टाइल नियम देखें।

#header h1 { 
background:#003D4C url(../img/cake.icon.gif) no-repeat scroll left center; 
color:#FFFFFF; 
padding:0 30px; 
} 

यह काम करता है क्योंकि स्टाइल शीट एप्लिकेशन/webroot/सीएसएस/निर्देशिका में रहते हैं, और छवि ऐप्लिकेशन/webroot/img/निर्देशिका में रहते हैं, तो पथ "../img/cake.icon.gif "सीएसएस निर्देशिका से बाहर आता है, फिर आईएमजी निर्देशिका में वापस आ गया।

Answer 2

आप अपाचे में अपनी .htaccess फ़ाइल को संपादित करके PHP के माध्यम से संसाधित होने के लिए सीएसएस जोड़ सकते हैं। इसे संसाधित करने के विपरीत, इसे बाहर थूकने के विपरीत थोड़ा सा प्रदर्शन होता है।

AddType application/x-httpd-php .css 

इसके अलावा, देखें: http://www.webmasterworld.com/forum88/5648.htm

Answer 3

इस केक सामान के साथ बहुत अधिक मदद नहीं करेगा जब तक कि आप पहले केक वस्तुओं का दृष्टांत। यदि आप एचटीएमएल हेल्पर का उपयोग करना चाहते हैं, तो आप शायद यह जानना चाहेंगे कि पहली केक ऑब्जेक्ट को तत्काल कैसे किया जाता है, फिर अपने सीएसएस सामान में नकल करें। निश्चित रूप से यह नहीं है कि मैं यह कैसे करूँगा - मुझे लगता है कि एक संपूर्ण सीएसएस कंट्रोलर अधिक हो जाएगा, लेकिन मुझे लगता है कि आपको एक ऐप नियंत्रक को तुरंत चालू करना पड़ सकता है (आखिरकार, आप पुनः लिखने वाले सीएसएस यूआरएल को ऐप की सेटिंग्स को प्रतिबिंबित करना चाहते हैं, है ना?)। तो मुझे लगता है कि आपको किसी भी तरह से एक CSSController बनाना पड़ सकता है।

Answer 4

CakePHP विशेषज्ञों की एक पूरी गुच्छा शायद मुझे इस एक सुझाव देने के लिए नफरत करने जा रहे हैं .. :)

सबसे आसान समाधान मेरे लिए सिर्फ सीएसएस फ़ोल्डर में छवि फ़ाइल शामिल करने के लिए किया गया था।इस

/app/webroot/css/css_images/mypic.jpg 

तो सीएसएस फ़ाइल में मैं बस में डाल दिया जाएगा की तरह कुछ:

background-image: url(css_images/mypic.jpg); 

बुरी बात स्पष्ट रूप से है यह करने के लिए cakiest बात नहीं है। अच्छी बात यह है कि यह काम करेगा भले ही आप फैंसी यूआरएल का उपयोग कर रहे हों या नहीं क्योंकि सीएसएस सीएसएस फ़ाइल से संबंधित छवि पाता है।

Answer 5

मैं निश्चित रूप से zam3858 द्वारा सुझाए गए समाधान के लिए जाऊंगा। और यदि आप अपनी छवियों को दो अलग-अलग स्थानों में रखना पसंद नहीं करते हैं, तो छवियों को इंगित करने वाली सीएसएस निर्देशिका में एक प्रतीकात्मक लिंक बनाएं। इस तरह:

$ cd app/webroot/css 
$ ln -s ../img . 

अब, छवि पथ दोनों एचटीएमएल सहायक और स्टाइल शीट के लिए सही ढंग से हल किया जाएगा:

// css: 
url(img/image.png); 

// view.ctp 
echo $html->image('image.png'); 

यह cakiest समाधान नहीं हो सकता है, लेकिन यह की तरह नहीं दिखता केकफैप एक प्रदान करता है।

Answer 6

बदलें background

background:url(../img/menu_027_l.jpg) no-repeat left; 

Answer 7

को मैंने पाया कि सीएसएस में सापेक्ष URL अलग गिर जब CakePHP के लिए एक सहायक में सीएसएस एम्बेड करने के साथ लाइन। यह राउटर एक ही पृष्ठ पर विभिन्न यूआरएल मैप करने में सक्षम होने के कारण है, इसलिए रिश्तेदार यूआरएल अलग होना चाहिए। उदाहरण के लिए यदि आपके पास लोकलहोस्ट/माईएप/पार्ट्स/इंडेक्स या लोकलहोस्ट/मायप/पार्ट्स/या लोकहोस्ट/मैप/पार्ट्स जैसे यूआरएल हैं तो ../img/image.gif का एक सापेक्ष यूआरएल केवल उनमें से एक के लिए काम करेगा।

मेरी सहायक में एक ही रास्ता मैं इसे चारों ओर पाने के लिए मिल गया इस

.jquery-dialog-spinner { 
    display: none; 
    position: fixed; 
    z-index: 1010; 
    top:  0; 
    left:  0; 
    height:  100%; 
    width:  100%; 
    background: rgba(0, 0, 0, .1) 
      url('__loader_image__') 
      50% 50% 
      no-repeat; 

}

की तरह मेरे सीएसएस बनाने के लिए और फिर उत्पादन से पहले कोड में एक उत्पन्न यूआरएल के साथ टैग को बदलने था सीएसएस।

$map = array(
     '__loader_image__' => $this->Html->assetUrl('ajax-loader.gif', array('pathPrefix' => IMAGES_URL)) 
); 
    $formatted_css = strtr($this->css, $map); 
    $response .= "<style type=\"text/css\">" . $formatted_css . "</style>"; 

यदि ऐसा करने का कोई आसान तरीका है तो मैं एक टिप्पणी की सराहना करता हूं।