Moodle in English: Moodle 2.0: Using images within your themes and the silk icon theme

Hello everyone

Having seen a few of you asking about, or struggling with how to make use of images or override images within Moodle I have documented the process.

Themes 2.0 How to use images within your theme

The document looks at how images are handled within Moodle 2.0, how to make use of your own images, and how to override images within your theme.

The document is very fresh at this point, having only just finished the first edition so please excuse any grammatical insanity I will be asking Helen shortly to fix it up for me as she always does a lovely job and of course I open the floor to anyone adding things to it they feel important or raising it here so that I can do it for you.

As mentioned at the bottom of the document I am also making available the theme that I created while testing the image handling in Moodle.

Download the Silk icon theme: silkicons.zip
Please note: this link will change in the near future so do not bookmark it.

It makes use of the awesome icon set created by Mark James and available from his website http://famfamfam.com/lab/icons/silk/. Kudo's to him for that icon set.

Cheers
Sam

平均分：Useful (3)

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Mary Evans - 2010年06月4日星期五 16:58

Hi Sam,

Thanks for this much needed and timely Moodle Doc.

Mary

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Daniele Cordella - 2010年06月4日星期五 18:08

First of all: thanks Sam for your really interesting page: http://docs.moodle.org/en/Development:Themes_2.0_How_to_use_images_within_your_theme

I read it with care and I found: "Obviously we won't be overriding theme images as we are in a theme and have full control over that already which just leaves core and plugin images that you may want to override."

My question is: "Following what I can read in moodle 1.* standardlogo:

 if (file_exists($CFG->dirroot.'/logo.jpg')) {

   $standardlogo = $CFG->httpswwwroot.'/logo.jpg';

 } else if (file_exists($CFG->dirroot.'/logo.gif')) {

  $standardlogo = $CFG->httpswwwroot.'/logo.gif';

 } else if (file_exists($CFG->dataroot.'/1/logo.jpg')) {

  require_once($CFG->libdir.'/filelib.php');

  $standardlogo = get_file_url('1/logo.jpg', null, 'httpscoursefile');

 } else if (file_exists($CFG->dataroot.'/1/logo.gif')) {

  require_once($CFG->libdir.'/filelib.php');

  $standardlogo = get_file_url('1/logo.gif', null, 'httpscoursefile');

 } else {

  $standardlogo = $CFG->httpsthemewww .'/'. current_theme().'/logo.gif';

 //Accessibility: warning: ALT text will need editing if logo changes. 'headermain' is now H1.

?>

 <?php print_container_start(true, '', 'header-home'); ?>

 <h1 class="headermain"><img alt="Moodle" src="<?php echo $standardlogo ?>" /></h1>

is there a way to create a theme writing to users: if you want to overwrite its default logo simply drop your custom logo (with the same dimensions) in the folder /pix_theme/"?

I tried but it doesn't work!

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Tim Hunt - 2010年06月4日星期五 18:28

Remember that for Moodle to spot the new image, you need to turn on theme designer mode. (You can then turn it off again.)

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Daniele Cordella - 2010年06月4日星期五 18:45

Thanks Tim, but I already turned on theme designer mode.

mmmmhhh Tim, I believe the folder /pix_theme/ is not "foreseen" inside a theme folder!

Is this correct?

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Mauno Korpelainen - 2010年06月4日星期五 19:48

But pix, pix_core and pix_plugins are ...

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Daniele Cordella - 2010年06月4日星期五 20:42

Ciao Mauno
you are right but this strengthen my doubt.
Am I allowed to customize a 2.0 theme adding the /pix_theme/ folder inside it to re-create what we all had in moodle 1.* with standardlogo theme?

I guess we no longer can.

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Tim Hunt - 2010年06月4日星期五 21:34

Just use pix (I think)

That will look in your child theme's pix folder, before looking in the parent theme pix folder.

At least I think it will, from looking at the code. Try it and let us know if it works.

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Daniele Cordella - 2010年06月6日星期日 03:45

Ciao good Tim.
I am starting to feel that I am wrong when I believe I can not understand your fast English because of your speed.
You use 50% of words I expect, so your English if fast even when you write it!!! strabuzzante

Ok, the answer is no. If I well understood, I added /pix/ folder inside /pix/ folder as in the picture but it doesn't work.

Do all moodle community has to say good bye to the "soft" logo overwrite inside themes?

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Mary Evans - 2010年06月6日星期日 05:38

Ciao Daniele,

dovete scriverli in questo modo...

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Tim Hunt - 2010年06月6日星期日 15:43

I have not actually tried this. I am only guessing based on Development:Themes_2.0_How_to_use_images_within_your_theme and what I have read in the code.

I think for a simple theme, it is supposed to look like

theme/mytheme/
   + pix/
   |  + gradent.png
   + pix_mod/mod/quiz/
      + icon.png

Now, suppose in a child theme, we want to override gradent.png. I think you just do

theme/childtheme/
   + pix/
      + gradent.png

Can anyone confirm this?

(P.S. I was amused to be accused of 'speaking too fast' in written English. It is just that I am lazy, but I will try to do better in future. Sorry.)

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Daniele Cordella - 2010年06月7日星期一 18:57

Ciao good Tim.
What you write may be correct but is not an answer to my question.
I am asking if I can change a theme from within itself like it was for standard_logo theme of moodle 1.*

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Sam Hemelryk - 2010年06月8日星期二 09:52

Hi Tim,

Dead on with that one, that would be the intended way of overriding the logo.

By the way thank you for fixing up the mistakes I made in the doc

Cheers
Sam

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Daniele Cordella - 2010年06月7日星期一 18:43

Ciao Mary
and thanks for your suggestion.
What you spotted is correct but I am asking if it is possible to also add the sub folder "pix_theme" to overwrite theme images inside the theme itself.
This feature was available in standard_logo theme of moodle 1.*.

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Mary Evans - 2010年06月7日星期一 20:03

Ciao Daniele,

The standard_logo theme has no pix folder in it as it uses standard theme images by default. But like every other theme in Moodle 1.x it has the option to add a pix folder to override images in the theme.

The PHP in the header is only selecting a logo from the ROOT (site file) if you want to add it you can do so via Site Administration area. Other wise you can FTP your logo (gif or jpg) directly into the Moodle folder of your website.

As the README.html from standard_logo theme states...

Standard Logo Theme

To add your own homepage logo to this theme, you can simply:

upload a file called logo.jpg or logo.gif in your Site Files (look on the home page),
OR
put a file called logo.jpg or logo.gif in the main Moodle directory (using FTP, for example).

However, what you are asking sounds feasible, but I'm not sure if you are understanding the action of the standard_logo where it looks for and chooses an image in the main Moodle folder. Try writing that script into general.php or your main layout.php and see if it works.

Mary

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Sam Hemelryk - 2010年06月8日星期二 10:09

Hi Daniele,

Indeed it is not possible to override theme images in such a manner.

Tim is correct in his comments on the matter the intended method of overriding an image within a theme would be to create a theme to do so.

Mary is correct in her understanding of how the standardlogo theme currently operates.

Having had a little think about it I really do think that the best way to achieve this would still be to include a default logo.* within the pix folder of a theme, override the layout files to make use of it in the header, and then write instructions to the effect of uploading your own logo to theme/themename/pix/logo.*

However if you really did want to create a solution that would look for the logo.* within the base Moodle directory you could use similar PHP code to that of standardlogo in the top of your layout files. If you would like to do this and would like a hand with the little bit of code let me know and I'll help out where I can.

Cheers
Sam

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Daniele Cordella - 2010年06月8日星期二 18:19

Thanks Sam.
I will try to follow your suggestion.

I do not want to disturb you for this.
Where can I get hints about the "new" code you are talking about?... because I already had experience the "standard" code doesn't work as supposed.
Ciao.

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Sam Hemelryk - 2010年06月11日星期五 11:06

Hi Daniele,

Unfortunately there is no really great place to point you towards for code presently.

After thinking on it for a little while the idea of using a theme settings page jumped at me.
It is a more technical solution to what you are looking to achieve but I think if you give it a chance you will find it does what you are looking for.

I have been meaning to write a tutorial on it for quite some time and (I hope) it will be a solution to numerous tasks the themeing community will encounter: Themes 2.0 adding a settings page

One of the settings that I add to my tutorial theme is an image URL setting whereby the admin can tell the theme to use any web accessible image as the logo for the theme.

Check it out if you like, if it is to technical I am more than happy to write you a little bit of PHP to do exactly what the setting was doing in the theme.

Cheers
Sam

p.s. The theme from the tutorial can be downloaded from discuss.php?d=152053

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Daniele Cordella - 2010年06月4日星期五 18:14

One more question, still reading your page,

"You should also note that like with any other image in Moodle the extension doesn't matter. If you want to replace help.gif with a png file you can just put the png into the correct directory. As long as the filename is the same Moodle will find it."

is: what happen if I add to my /pix_core/ the following two files:

help.gif
help.jpg

Who will win and why?
Was it a really good idea the lack of file extension need?

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Tim Hunt - 2010年06月4日星期五 18:31

It is well defined, but the only place it is written down is in the source code:

Look at the image_exists function in http://cvs.moodle.org/moodle/lib/outputlib.php?view=markup

The order currently seems to be gif, png, jpg, jpeg. I don't know why. I would prefer png first and gif last, but it does not really matter.

平均分：Useful (1)

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Mauno Korpelainen - 2010年06月4日星期五 19:45

It might be interesting to add browser detection logic here:

- if we had any modern browser we could use svg (scalable vector graphics will be finally supported even in IE9) ... if such files exist

- if we had IE7 or IE8 we could use png (with native alpha transparency) ... if such files exist

- if we had IE6 (or older) we could use gif (to support transparency for IE6) ... if such files exist

- if we had none of the previous image types we could choose to use jpg or jpeg to get full set of colors without transparency

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Sam Hemelryk - 2010年06月8日星期二 10:19

Hi Mauno,

This is an interesting idea!

Unfortunately at the moment however it is not possible. The reason being the way in which Moodle handles image caching.
Currently Moodle looks for the an only once, what ever is found is cached and then every subsequent request for the image is served from the cache. This is why turning themedesignermode on is so important (that way the cache isn't used and we search every time).
The problem here would be that unless themedesignermode was on the first person to view the site would determine the image that was cached and no matter what browser anyone else used they would always see the image that was used for the first viewing.

The ability to make use of SVG would be fantastic. I for one an a BIG fan of using vector graphics. Plus now that we have the ability to select a theme for modern browsers and a theme for old browsers we potentially have room for a search as a theme could state that it were designed for use with modern browsers only and make use of SVG graphics. Hehe it would require adding the IE series of browsers to the `old` browsers list but I see no problem in that ;)

Cheers
Sam

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Dobby Spencer - 2010年09月1日星期三 19:47

Sam,

I followed your document on how to add a logo but I have had no success after many hours. I am running Moodle 2.0 for windows from my local machine and I am using the boxxie theme. I have placed an image named logo.jpg in the pix directory (theme/boxxie/pix/logo.jpg) and added the line of code to both the frontpage.php and general.php files which are located at theme/boxxie/layout. I have restarted Moodle, I have restarted the computer and I have deleted from the theme folder from the cache directory. What am I doing wrong? Have I left out a step?

Here's an excerpt from the code:

<?php if ($PAGE->heading) { ?>

<img src="<?php echo $OUTPUT->pix_url('logo', 'theme');?>" alt="" />

<h1 class="headermain"><?php echo $PAGE->heading ?></h1>

<?php echo $OUTPUT->login_info();

if (!empty($PAGE->layout_options['langmenu'])) {

echo $OUTPUT->lang_menu();

}

echo $PAGE->headingmenu; ?>

</div>

<?php } ?>

</div>

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Mary Evans - 2010年09月1日星期三 22:39

Hi Dobby,

I've just copied the image tag from your code to the Boxxie theme and it works OK for me. I used a png image, but that shouldn't make any difference. I must admit it took a few refreshes of the browser for it to show up. But it works.

Mary

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Richard Oelmann - 2010年09月2日星期四 00:35

Hi Dobbie,
Like Mary have checked this by adding a logo into the pix folder and your img tag into the layout files and it works fine (I tried both png and jpg logos).
The only thing you don't mention doing that I have set is in Theme Settings I have Theme Designer mode ticked - have you tried that.

Rich

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Dobby Spencer - 2010年09月2日星期四 05:51

Rich,

I have Theme Designer mode ticked. I have another problem which may be related to the issue that I am having with the logo. When I go to the Theme Selector, I am not seeing the themes. The only option I get is a button to Clear theme caches. I have clicked the button and manually deleted the cache/theme directory contents but I am still not able to see the list of themes to select from as the button keeps appearing each time I go to select a new theme.

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Mary Evans - 2010年09月2日星期四 08:06

Hi Dobby,

I'm not sure why this happens but it happens to me quite regularly, especially when adding a new theme I have created. I think the problem is that there are elements within the theme which are still linked to theme folder which I duplicated and then re-named. I'm in the same situation now as a matter of fact. But I have a feeling with the theme I'm working on it's a PHP issue which needs resolving.

All you need to do is take out the theme which you think is causing the problem, and look at the coding of each layout page. If it a settings page you have created, make sure that all the colons and commas are in place, I guarantee there will be something you have done wrong, or not done as the case may be.

Taking out the theme you are working on and even logged into, isn't a problem as you will, by default be taken back to Base theme at login so that you can get back in and try again! That's the fun thing about Moodle. The more mistakes you make the bigger the learning curve...and you always have a home to come back to

I was told once by a lecture at university when I was studying for my BSc(Hons) to embrace those moments when you felt totally lost in what you where doing, in my case FORTRAN & Mathematical Modelling, because the next step would be the understanding of the problem and the resulting euphoria when the penny drops and you find out exactly where you went wrong and how to solve the given problem. It's worth all the head banging, and frustration of it all.

Good luck...

Mary

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Richard Oelmann - 2010年09月4日星期六 01:29

Hi Dobby,
Sorry to take a few days to reply - school has restarted and haven't got to my moodle emails till this evening!
I did have a similar problem at one point of not being able to see themes in Selector and found it was related to the permissions on the theme's folder - somehow they had got altered in downloading them and copying them from one computer to another and this seemed to be preventing the Theme selector displaying them. Ended up setting mine to open read and write access for everyone - This would almost certainly be wrong and insecure on a production/internet site, but mine is currently a local host machine for trying things out on and not live on the net anywhere for public access.
I see below that Sam and Mary have both made suggestions too and that you have managed to get your logo up on your site.

Richard

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Sam Hemelryk - 2010年09月2日星期四 11:32

Hi guys,

These sort of PHP errors will unfortunately be inevitable. What you can do to make your lives easier when creating a theme, or particularly the layouts + settings pages is to turn Moodle debugging on.

Site Administration > Development > Debugging
Set Debug messages to DEVELOPER: ...
Check Display debug messages

Turning this on will cause most PHP, or coding errors and notifications to be displayed. It can be quite intense and you will see all errors and notifications for the whole of Moodle, but when something is going wrong and you don't know why this will usually turn it up.

Dobby in regards to the logo problem, the code looks fine to me, and although I havn't tested it if Mary and Richard both did and didn't have problems then I imagine it is something else.
Perhaps you could view your sites source, locate the HTML that is meant to be showing the image and post it in here. Perhaps that will give us some clues, also you could try viewing the URL by itself in your browser, perhaps that will provide some useful errors or such.

Cheers
Sam

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Dobby Spencer - 2010年09月2日星期四 13:07

Thank you Mary and Sam.

Mary,

I followed your suggestion and cleared up the issue of the themes not appearing in the Theme Selector by deleting the themes that I had copied to the theme directory. I still could not get the image to show so I resorted to editing the core.css file and it works via that route. I made the following changes;

#page-header {
background: #3b4c25 url([[pix:theme|logo]]) no-repeat;
color: #fff; margin-bottom:3px;
}
#page-header h1.headermain {
color: #FFD700;
font-weight: normal;
margin: 1.5em 1.5em 1.5em 6em;
font-size: 2em;
}

.pagelayout-frontpage #page-header h1.headermain {
font-size: 2.75em;
margin: 1em 0 0 5em;
}

Sam,

I am just seeing your post regarding the debug option so I did not get a chance to try it.

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Kevin Mueller - 2010年09月6日星期一 22:33

Thanks Sam. How can I implement different logos for different languages in one theme in 2.0?
Kind regards, Kev

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Sam Hemelryk - 2010年09月8日星期三 09:51

Hi Kevin,

The theme's are language independent, as such choosing images based on the users current language isn't immediately possible.

However it can easily be done! The following method assumes you are just adding a bit of HTML to your layout file for the logo.

As you're undoubtedly aware theme's can now have language files associated with them in the /lang/ directory.
What I would purpose you do is add a string to your theme's language files that contains the name of the image to use for your language file.

 

// theme/themename/lang/en/themename.php

$string['logofile'] = 'logodefault';



// theme/themename/lang/it/themename.php

$string['logofile'] = 'logoalt';

At the top of your layout file add the following bit of code:

 

// Get the logofile from the string

$logofile = get_string('logofile', 'theme_themename');

// Check if its empty or a bad filename

if (empty($logofile) || $logofile != clean_param($logofile, PARAM_FILE)) {

    // Set an good default

    $logofile = 'logodefault';

}

// Get the correct URL for the image

$logourl = $OUTPUT->pix_url($logofile, 'theme');

And finally where you want to use the image:

 

<img src="<?php echo $logourl;?>" alt="Alt text here" />

Hope this helps, I should add I havn't tested it but I hope it does

Cheers
Sam

平均分：Useful (1)

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Mary Evans - 2010年09月8日星期三 18:02

This is REALLY helpful Sam thanks. I'll test it for you and report back.

Many thanks

Mary

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Mary Evans - 2010年09月9日星期四 01:12

I've tested this Sam and it works perfectly.

There is, however, one tiny error in your code.

in this line...

// theme/themename/lang/en/themename.php should read in the two instances for this file name below...

// theme/themename/lang/en/theme_themename.php (default language only)
$string['logofile'] = 'logodefault'; //where logodefault = your default logo image name

// theme/themename/lang/it/theme_themename.php (alternate lang only)
$string['logofile'] = 'logoalt'; //where logoalt = your alternative logo image name

Also, and this is addressed to anyone trying out this 'mini' tutorial, it is important you name the file in the php code you add to your layout pages. Where it says theme_themename.php in the code above (see Sam's original post) you MUST change this to your own theme_themename.php file. In my case, I wrote theme_cafelite.php because that's the name of the file I put the $string code in, a copy of which now resides in each of these directory folders

theme/cafelite/lang/en (my default language = English)
and
theme/cafelie/lang/it (my alternate language = Italian)

Hope this helps anyone following Sams tutorial above.

Cheers

Mary

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Kevin Mueller - 2010年09月9日星期四 21:50

Dear Sam,
Thank you so much! It works. I lost quite some time because I added the filetype ('logoalt.png') in

// theme/themename/lang/it/themename.php
$string['logofile'] = 'logoalt';

which didn't work because that's defined in lib/outputlib.php

Cheers,
Kev

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Mary Evans - 2010年10月6日星期三 19:30

Hi Sam,

I've run into a problem trying to update a Moodle 1.9.x Theme to Moodle 2.0 format.

I'm looking for the <?php echo $OUTPUT->pix_url('logo', 'theme');?> equivalent to go in this php if statement so that the user picture shows up on the front page, because the OUTPUT->pix_url I have put in is not working.

if (!isloggedin() or isguestuser()) {

echo '<div id="profilepic">';
echo '<a href="'.$CFG->wwwroot.'/user/view.php?id='.$USER->id.'&course='.$COURSE->id.'"><img src="'.$OUTPUT->pix_url('u/f1').'" width="80px" height="80px" title="" alt="" /></a>';
echo '</div>';

} else {

echo '<div id="profilepic">';
echo '<a href="'.$CFG->wwwroot.'/user/view.php?id='.$USER->id.'&course='.$COURSE->id.'"><img src="'.$OUTPUT->pix_url('user/icon/f1').'" width="80px" height="80px" title="'.$USER->firstname.' '.$USER->lastname.'" alt="'.$USER->firstname.' '.$USER->lastname.'" /></a>';
echo '</div>';
}

Hope you have time to answer!

Mary

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Richard Oelmann - 2010年10月6日星期三 22:56

Hi Mary,

ran into the same problem with my theme and thought I'd solved it - but on further testing have only half solved it! Hopefully Sam can shed some more light for both of us, or you can take my first steps to complete the solution

The code I used was - and this worked fine for the administrator I had set up - it was only when I read your email today that I thought I'd better check it for other users - but when I set the other user up, the administrator's picture is all that's displayed.

echo '<a href="'.$CFG->wwwroot.'/user/view.php?id='.$USER->id.'&course='.$COURSE->id.'"><img src="'.$CFG->wwwroot.'/pluginfile.php/13/user/icon/f1" width="75px" height="75px" title="'.$USER->firstname.' '.$USER->lastname.'" alt="'.$USER->firstname.' '.$USER->lastname.'" /></a>';

on a quick investigation it's the number highlighted (13) that changes for the user (my new user has 18 in the url for its picture on its profile). I presume this number can be found from in the Moodle code, but have not yet had chance to look into how.

If I get chance I'll take another look later this evening or later in the week - but hopefully Sam can come back with some help. Hope you get it sorted

Richard

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Mary Evans - 2010年10月7日星期四 02:23

At the moment Richard nothing seems to work, although in a similar situation it works OK in Moodle 1.9.9. It will be something really simple, which I haven't thought of yet! LOL

Cheers

Mary

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Sam Hemelryk - 2010年10月7日星期四 11:03

Hi guys,

Would you mind trying the following bit of code for me and seeing if this works:

 




$options = array();

$options['size'] = 80; // This is 80px width 80px height.

$options['course'] = $PAGE->course->id;

$options['link'] = true; // Make it a link as well.

echo $OUTPUT->user_picture($USER, $options);

It should be used inside your if statement for printing the logged in not guest users picture.

Let me know how that goes, if it works (sorry so much on my plate with the moodle.org upgrade I havn't had time to test) let me know and I'll explain how it all works.

Cheers
Sam

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Mary Evans - 2010年10月8日星期五 01:12

It didn't work, but I'm not giving up, I'm trying to work out why it isn't working...it's the only way to learn!

If I still can't get it to work, I'll post the error messages after I exhaust all possible solutions.

Mary

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Sam Hemelryk - 2010年10月8日星期五 09:48

Hi Mary,

Don't forget you can check out the splash themes layoutfile for an example of it in action (theme/splash/layout/general.php line:55).

Cheers
Sam

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Mary Evans - 2010年10月8日星期五 22:39

Thanks for this Sam. Looks like I am going to have to rewrite the php as it still isn't working, although with Splash theme to refer to make life much easier. There's a lot in that theme, that I hadn't noticed before.

Thanks again...

Mary

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Chad Outten - 2010年10月18日星期一 14:35

Thanks for sharing!

@Sam: I'm not sure but you're probably aware - MD asked for some input with new icons some time ago over at tracker. Might be an idea for ppl to check out MDL-14361.

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Craig Gunderson - 2011年04月2日星期六 02:32

I'm having an issue with the CSS pointing to the theme pix folder. Moodle is spitting out strings where the "/" is replaced by "%2F".

So this:
body {background-image:url([[pix:theme|myimages/gradients/gradient]]);}

Produces this:
http://www.site.com/theme/image.php?theme=themename&image=myimages%2Fgradients%2Fgradient&component=theme

Any idea why that might be happening?

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Tim Hunt - 2011年04月2日星期六 03:10

Because that is the right way to represent a / in a URL parameter like &image=.

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Craig Gunderson - 2011年04月2日星期六 03:18

Well, the part I left out is, the images aren't showing up.

I'll double-check my paths and whatnot if you're saying nothing's broken.

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Mary Evans - 2011年04月2日星期六 06:18

Try enabling Designer Mode ...

Settings > Site Administration > Appearance > Themes > Theme settings

Click the Check-box next to Theme Designer Mode to turn it on.

Save settings...

Another possible cause is that your myimages folder might not be inside the pix folder where it should be.

HTH Mary

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Víctor Pérez Tapia - 2011年11月24日星期四 00:52

Hi Sam, and thanks

In the tutorial you mentioned this:

moodle/blocks/customblock/activate.png This is an icon in a custom block I have installed.

How can i use pictures in a block? I´m writing a block, and i need to use an image (located in moodle/blocks/myblock/my_image.png). in the get_content() function i like to insert that image. How can i write the path to the image?

Thanks again

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Mary Evans - 2011年11月24日星期四 09:09

Hi,

How are you creating this block? And where abouts in your code would you be wanting to call this image? If the block is in the main part of your page then you would be able use ADD BLOCK as an HTML block as you can do in the Profile Bar in Aardvark Post-IT theme

Cheers

Mary

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Víctor Pérez Tapia - 2011年11月24日星期四 18:38

Hi Mary:

My purpose is learning programming moodle.

I´m trying to develop a block named My account Lite. It is a block_list type, and It must show links to typicall settings (my profile, change passwords, my messages etc) with custom icons located in the block folder (someting like this: blocks/block_myaccountlite/pix/info.png)

In the get_content function i put this:

    $this->content         = new stdClass;

$this->content->items = array();
$this->content->icons = array();
   $cont='';
   $this->content->items[]=html_writer::tag('a',get_string('info_edit', 'block_my_account_lite'),array('class' => 'info','href'=>'/user/edit.php'))

And I would add something like this:

$this->content->icons[]= my_block/pix/info.png

One more thing:

The icons must can be overwrited by the user theme like suggest Sam in his tutorial:

moodle/blocks/customblock/activate.png This is an icon in a custom block I have installed.

Thanks and sorry for my english

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Mary Evans - 2011年11月24日星期四 19:16

If you look at the Profileblock I used in Aardvark Post-IT you will see the way images were added. However I realise what you are doing is different, but the way you add images within PHP tags is the same.

I have attached the profileblock.php to this comment.

I hope it shows up?

HTH

Mary

profileblock.php

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Víctor Pérez Tapia - 2011年11月25日星期五 17:15

Hi Mary:

Finally I did it by this way:

$this->content->icons[]=html_writer::empty_tag('img',array('src'=>$CFG->wwwroot."/blocks/my_account_lite/info.png",'height'=>'16'));

It works and looks fine but if an user try to overwrtite this icon following the Sam´s tutorial: Uploading into his theme´s folder this: /pix_plugins/blocks/my_account_lite/info.png.

This method doesn´t work.

I don´t know if is possible make this in moodle at this moment/version.

Thanks a lot for the answers and your interest

平均分： -

Re: Moodle 2.0: Using images within your themes and the silk icon theme

Mary Evans - 2011年11月25日星期五 20:19

Hi Victor,

I am not too sure about this, but as I understand this the icon needs to be in a pix_core directory so that it can be overwritten by a theme icon, because $OUTPUT->pix_url('i/info') will take care of that, so your html writer code might look like this...

$this->content->icons[]=html_writer::empty_tag('img',array('src'=>,$OUTPUT->pix_url('i/info'),'height'=>'16'));

Is this info.png the same info.png that is in Moodle already or a special one? If it is in Moodle you don't need a copy of your custom block image, also I think pix_plugins/block/my_account_lite/info.png is wrong as it should be in pix_core/i/info.png this way it would be over written by a theme icon.

I hope this helps?

By the way, you might be better asking this question in the General Developers forum. There are lots of people understand PHP better than me.

Cheers

Mary

平均分： -