Image path in CSS not being translated to full address

Image path in CSS not being translated to full address

Marcos Acciolydən -
Number of replies: 6
Hi all,

We've got some custom images in the theme (Essential) we're using and their URLs are not being translated.

According to the docs about the theme and about images specifically, they should be translated from 

.element { background: url([[pix:theme|week/week_3]]); }

to 

.element { background: url(<base_url>/essential/pix/week/week_3.png); }

But images are not showing in the browser and inspecting the element shows me the placeholder has not been substituted with the URL (as you can see in the attached printscreen - watch for the red rectangle).

Any ideas on how to solve this?

P.S.: This is probably just a dead simple thing, but I've been dealing with it for two weeks now and decided to resort to you guys.


Attachment moodle_forum_01.jpg
Orta qiymət: -
In reply to Marcos Accioly

Re: Image path in CSS not being translated to full address

David Mudrákdən -
Core developers istifadəçinin şəkili Documentation writers istifadəçinin şəkili Moodle HQ istifadəçinin şəkili Particularly helpful Moodlers istifadəçinin şəkili Peer reviewers istifadəçinin şəkili Plugin developers istifadəçinin şəkili Plugins guardians istifadəçinin şəkili Testers istifadəçinin şəkili Translators istifadəçinin şəkili
Where did you put this CSS to? Is it broken for all the theme's images or just those you added?
Orta qiymət: -
In reply to David Mudrák

Re: Image path in CSS not being translated to full address

Marcos Acciolydən -

David, 

The CSS was put in: \theme\essential\style\essential.css

All uploaded images from the user interface (such as labels) work fine.

There are only two such use of images (as placeholders) in the theme's essential.css file. I'm copying them below. Both go to the browser unconverted to URLs. 


.navbar .navbar-inner {
  border-radius: 0px;
  border: none;
  line-height: 0px;
  background: transparent url([[pix:theme|bg/header]]) repeat 0% 0%;
  box-shadow: none;
  filter: none;
}

and

.sectionname-week-icon1{background:url([[pix:theme|week/week_1]]) no-repeat;}

Thank you for your time, David. This problem is really disturbing since I can't figure out where it's roots are.

Orta qiymət: -
In reply to Marcos Accioly

Re: Image path in CSS not being translated to full address

David Mudrákdən -
Core developers istifadəçinin şəkili Documentation writers istifadəçinin şəkili Moodle HQ istifadəçinin şəkili Particularly helpful Moodlers istifadəçinin şəkili Peer reviewers istifadəçinin şəkili Plugin developers istifadəçinin şəkili Plugins guardians istifadəçinin şəkili Testers istifadəçinin şəkili Translators istifadəçinin şəkili

Well, looking at https://github.com/gjb2048/moodle-theme_essential/blob/master/config.php it seems that the style/essential.css is not listed as one of the $THEME->sheets. I would expect it's not even loaded but apparently it somehow gets to you browser so I must miss something.

Anyway, if I remember correctly, only the listed CSS files are post processed (which is when the pix path syntax gets replaced with real URL). So you may wish to either put your CSS into another file such as style/custom.css or even better, define it via admin UI in the Essential's "customcss" setting.

Orta qiymət: -
In reply to David Mudrák

Re: Image path in CSS not being translated to full address

Marcos Acciolydən -
Hmmm... We've got a bit of misleading documentation, then, which states that (bold is mine)

Moodle parses all CSS files. When theme designer mode is off, Moodle combines them into a handful of large CSS files that get cached and served. At the same time Moodle also looks at the CSS and replaces special syntax rules.

Anyway... Because of your enlightening comment, something has dawned on me: there's a folder called "essential-pix.css". Guess what that is for? I've put the images code in there and presto! it's done.

Thank you so much, David.
Orta qiymət: -
In reply to Marcos Accioly

Re: Image path in CSS not being translated to full address

David Mudrákdən -
Core developers istifadəçinin şəkili Documentation writers istifadəçinin şəkili Moodle HQ istifadəçinin şəkili Particularly helpful Moodlers istifadəçinin şəkili Peer reviewers istifadəçinin şəkili Plugin developers istifadəçinin şəkili Plugins guardians istifadəçinin şəkili Testers istifadəçinin şəkili Translators istifadəçinin şəkili

Yes, that is what I would expect as the sheet essential-pix is registered as one of the theme's style sheets (see https://github.com/gjb2048/moodle-theme_essential/blob/master/config.php#L40) and thence it is post-processed by the function defined in $THEME->csspostprocess.

I personally think that the docs is correct because it assumes that every stylesheet is registered in the theme's config.php. You probably should report missing

$THEME->sheets[] = 'essential';

as the Essential theme's bug in their tracker. It may be intentional (for some reason) or just a small bug.

Orta qiymət:Useful (1)