Using images in a theme - Revision history

Popnose: Changed "themes" to "theme's" in several places. The apostrophe indicates the item belongs to the theme. For example, "the theme's directory" should be used, rather than "the themes directory".

2022-02-24T20:42:22Z

Changed "themes" to "theme's" in several places. The apostrophe indicates the item belongs to the theme. For example, "the theme's directory" should be used, rather than "the themes directory".

Show changes

Mudrd8mz: Text replacement - "`" to ""`


2021-07-15T08:12:41Z
Text replacement - "<code (.*)>" to "<syntaxhighlight lang="$1">"

				
				
				
				
				
				← Older revision
				Revision as of 08:12, 15 July 2021
				
Line 56:
Line 56:



To use gradient.png as the background for our pages, add the following line of CSS to the themes core.css. To use gradient.png as the background for our pages, add the following line of CSS to the themes core.css.
<code css> <syntaxhighlight lang="css">
body {background-image:url([[pix:theme|gradient]]);} body {background-image:url([[pix:theme|gradient]]);}
</syntaxhighlight> </syntaxhighlight>
Line 65:
Line 65:



The CSS would need to be as follows: The CSS would need to be as follows:
<code css> <syntaxhighlight lang="css">
body {background-image:url([[pix:theme|myimages/gradients/gradient]]);} body {background-image:url([[pix:theme|myimages/gradients/gradient]]);}
</syntaxhighlight> </syntaxhighlight>
Line 71:
Line 71:
If you want to refer to an image belonging to a plugin, you can do it like this: If you want to refer to an image belonging to a plugin, you can do it like this:



<code css> <syntaxhighlight lang="css">
body {background-image:url([[pix:quiz|icon]]);} body {background-image:url([[pix:quiz|icon]]);}
body {background-image:url([[pix:qtype_ddmarker|grid]]);} body {background-image:url([[pix:qtype_ddmarker|grid]]);}
Line 78:
Line 78:
That refers to mod/quiz/pix/icon.png/gif and question/type/ddmarker/pix/grid.png/gif respectively (or whatever icons you have put in your theme to override these). That refers to mod/quiz/pix/icon.png/gif and question/type/ddmarker/pix/grid.png/gif respectively (or whatever icons you have put in your theme to override these).



<code css> <syntaxhighlight lang="css">
body {background-image:url([[pix:block_customblock|grid]]);} body {background-image:url([[pix:block_customblock|grid]]);}
</syntaxhighlight> </syntaxhighlight>
Line 108:
Line 108:



''theme/yourtheme/templates/somelayout.mustache'' ''theme/yourtheme/templates/somelayout.mustache''
<code handlebars> <syntaxhighlight lang="handlebars">
... ...
<img src="{{{imageone}}}" alt="Please give your image alt text or set the role to presentation" width="50" height="50"> <img src="{{{imageone}}}" alt="Please give your image alt text or set the role to presentation" width="50" height="50">



Mudrd8mz: Text replacement - "" to ""

2021-07-14T20:37:15Z
Text replacement - "<code php>" to "<syntaxhighlight lang="php">"

				
				
				
				
				
				← Older revision
				Revision as of 20:37, 14 July 2021
				
Line 95:
Line 95:



''theme/yourtheme/layout/somelayout.php'' ''theme/yourtheme/layout/somelayout.php''
<code php> <syntaxhighlight lang="php">
... ...
$templatecontext = [ $templatecontext = [



Mudrd8mz: Text replacement - "" to ""
2021-07-14T20:24:56Z
Text replacement - "</code>" to "</syntaxhighlight>"

				
				
				
				
				
				← Older revision
				Revision as of 20:24, 14 July 2021
				
Line 58:
Line 58:
<code css> <code css>
body {background-image:url([[pix:theme|gradient]]);} body {background-image:url([[pix:theme|gradient]]);}
</code> </syntaxhighlight>



Before we look at how to use your own images within your themes layout files we should first look at how this changes if the image is in a sub directory. Before we look at how to use your own images within your themes layout files we should first look at how this changes if the image is in a sub directory.
Line 67:
Line 67:
<code css> <code css>
body {background-image:url([[pix:theme|myimages/gradients/gradient]]);} body {background-image:url([[pix:theme|myimages/gradients/gradient]]);}
</code> </syntaxhighlight>



If you want to refer to an image belonging to a plugin, you can do it like this: If you want to refer to an image belonging to a plugin, you can do it like this:
Line 74:
Line 74:
body {background-image:url([[pix:quiz|icon]]);} body {background-image:url([[pix:quiz|icon]]);}
body {background-image:url([[pix:qtype_ddmarker|grid]]);} body {background-image:url([[pix:qtype_ddmarker|grid]]);}
</code> </syntaxhighlight>



That refers to mod/quiz/pix/icon.png/gif and question/type/ddmarker/pix/grid.png/gif respectively (or whatever icons you have put in your theme to override these). That refers to mod/quiz/pix/icon.png/gif and question/type/ddmarker/pix/grid.png/gif respectively (or whatever icons you have put in your theme to override these).
Line 80:
Line 80:
<code css> <code css>
body {background-image:url([[pix:block_customblock|grid]]);} body {background-image:url([[pix:block_customblock|grid]]);}
</code> </syntaxhighlight>



That refers to blocks/customblock/pix/grid.png/gif/jpg (or whatever icons you have put in your theme to override these). That refers to blocks/customblock/pix/grid.png/gif/jpg (or whatever icons you have put in your theme to override these).
Line 92:
Line 92:
/pix/logo.jpg /pix/logo.jpg
/pix/myimages/logos/logo.png /pix/myimages/logos/logo.png
</code> </syntaxhighlight>



''theme/yourtheme/layout/somelayout.php'' ''theme/yourtheme/layout/somelayout.php''
Line 105:
Line 105:



echo $OUTPUT->render_from_template('theme_yourtheme/somelayout', $templatecontext); echo $OUTPUT->render_from_template('theme_yourtheme/somelayout', $templatecontext);
</code> </syntaxhighlight>



''theme/yourtheme/templates/somelayout.mustache'' ''theme/yourtheme/templates/somelayout.mustache''
Line 113:
Line 113:
<img src="{{{imagetwo}}}" alt="Please give your image alt text or set the role to presentation" width="50" height="50"> <img src="{{{imagetwo}}}" alt="Please give your image alt text or set the role to presentation" width="50" height="50">
... ...
</code> </syntaxhighlight>



==Overriding images in your theme== ==Overriding images in your theme==
Line 166:
Line 166:
<syntaxhighlight lang="php"> <syntaxhighlight lang="php">
/theme/themename/area/plugintype/pluginname/filename.gif /theme/themename/area/plugintype/pluginname/filename.gif
</code> </syntaxhighlight>



==See also== ==See also==



Mudrd8mz: Text replacement - "" to ""

2021-07-14T13:02:17Z
Text replacement - "<code>" to "<syntaxhighlight lang="php">"

				
				
				
				
				
				← Older revision
				Revision as of 13:02, 14 July 2021
				
Line 89:
Line 89:



Images: Images:
<code> <syntaxhighlight lang="php">
/pix/logo.jpg /pix/logo.jpg
/pix/myimages/logos/logo.png /pix/myimages/logos/logo.png
Line 164:
Line 164:



So you end up with: So you end up with:
<code> <syntaxhighlight lang="php">
/theme/themename/area/plugintype/pluginname/filename.gif /theme/themename/area/plugintype/pluginname/filename.gif
</code> </code>



Santiago.ei: /* Using images within CSS */
2020-11-15T13:56:29Z
Using images within CSS

				
				
				
				
				
				← Older revision
				Revision as of 13:56, 15 November 2020
				
Line 77:
Line 77:



That refers to mod/quiz/pix/icon.png/gif and question/type/ddmarker/pix/grid.png/gif respectively (or whatever icons you have put in your theme to override these). That refers to mod/quiz/pix/icon.png/gif and question/type/ddmarker/pix/grid.png/gif respectively (or whatever icons you have put in your theme to override these).

<code css>
body {background-image:url([[pix:block_customblock|grid]]);}
</code>

That refers to blocks/customblock/pix/grid.png/gif/jpg (or whatever icons you have put in your theme to override these).



===Using your images within your layout files=== ===Using your images within your layout files===



Dness: /* A little background */
2018-07-10T14:01:53Z
A little background

				
				
				
				
				
				← Older revision
				Revision as of 14:01, 10 July 2018
				
Line 1:
Line 1:
{{Template:Themes}} {{Template:Themes}}
==A little background== ==A little background==
Moodle a standard way of making use of images within its pages enabling theme designers to take full control over what images are being used and when possible ensures images are passed through Moodle's performance caching system to obtain the best possible performance. Moodle has a standard way of making use of images within its pages enabling theme designers to take full control over what images are being used and when possible ensures images are passed through Moodle's performance caching system to obtain the best possible performance.



==Before we start== ==Before we start==





Demsley: /* Using your images within your layout files */
2017-11-23T12:02:49Z
Using your images within your layout files

				
				
				
				
				
				← Older revision
				Revision as of 12:02, 23 November 2017
				
Line 93:
Line 93:
$templatecontext = [ $templatecontext = [
... ...
'imageone' => $OUTPUT->pix_url('logo', 'theme'), 'imageone' => $OUTPUT->image_url('logo', 'theme'),
'imagetwo' => $OUTPUT->pix_url('myimages/logos/logo', 'theme'), 'imagetwo' => $OUTPUT->image_url('myimages/logos/logo', 'theme'),
... ...
]; ];



Demsley: /* Using your images within your layout files */
2017-05-22T14:29:24Z
Using your images within your layout files

				
				
				
				
				
				← Older revision
				Revision as of 14:29, 22 May 2017
				
Line 93:
Line 93:
$templatecontext = [ $templatecontext = [
... ...
$imageone => $OUTPUT->pix_url('logo', 'theme'), 'imageone' => $OUTPUT->pix_url('logo', 'theme'),
$imagetwo => $OUTPUT->pix_url('myimages/logos/logo', 'theme'), 'imagetwo' => $OUTPUT->pix_url('myimages/logos/logo', 'theme'),
... ...
]; ];



Joostvanderborg: Remove link to removed page
2017-02-28T09:45:38Z
Remove link to removed page

				
				
				
				
				
				← Older revision
				Revision as of 09:45, 28 February 2017
				
Line 165:
Line 165:



* [[Plugins]] * [[Plugins]]
* [[Replacing icons with CSS3]] 
* [http://youtu.be/g_9VM9OMs3Y Adding Images to your Theme]  MoodleBites video on YouTube * [http://youtu.be/g_9VM9OMs3Y Adding Images to your Theme]  MoodleBites video on YouTube

← Older revision		Revision as of 08:12, 15 July 2021
Line 56:		Line 56:

	To use gradient.png as the background for our pages, add the following line of CSS to the themes core.css.		To use gradient.png as the background for our pages, add the following line of CSS to the themes core.css.
	<~~code~~ css>		<syntaxhighlight lang="css">
	body {background-image:url([[pix:theme\|gradient]]);}		body {background-image:url([[pix:theme\|gradient]]);}
	</syntaxhighlight>		</syntaxhighlight>
Line 65:		Line 65:

	The CSS would need to be as follows:		The CSS would need to be as follows:
	<~~code~~ css>		<syntaxhighlight lang="css">
	body {background-image:url([[pix:theme\|myimages/gradients/gradient]]);}		body {background-image:url([[pix:theme\|myimages/gradients/gradient]]);}
	</syntaxhighlight>		</syntaxhighlight>
Line 71:		Line 71:
	If you want to refer to an image belonging to a plugin, you can do it like this:		If you want to refer to an image belonging to a plugin, you can do it like this:

	<~~code~~ css>		<syntaxhighlight lang="css">
	body {background-image:url([[pix:quiz\|icon]]);}		body {background-image:url([[pix:quiz\|icon]]);}
	body {background-image:url([[pix:qtype_ddmarker\|grid]]);}		body {background-image:url([[pix:qtype_ddmarker\|grid]]);}
Line 78:		Line 78:
	That refers to mod/quiz/pix/icon.png/gif and question/type/ddmarker/pix/grid.png/gif respectively (or whatever icons you have put in your theme to override these).		That refers to mod/quiz/pix/icon.png/gif and question/type/ddmarker/pix/grid.png/gif respectively (or whatever icons you have put in your theme to override these).

	<~~code~~ css>		<syntaxhighlight lang="css">
	body {background-image:url([[pix:block_customblock\|grid]]);}		body {background-image:url([[pix:block_customblock\|grid]]);}
	</syntaxhighlight>		</syntaxhighlight>
Line 108:		Line 108:

	''theme/yourtheme/templates/somelayout.mustache''		''theme/yourtheme/templates/somelayout.mustache''
	<~~code~~ handlebars>		<syntaxhighlight lang="handlebars">
	...		...
	<img src="{{{imageone}}}" alt="Please give your image alt text or set the role to presentation" width="50" height="50">		<img src="{{{imageone}}}" alt="Please give your image alt text or set the role to presentation" width="50" height="50">

← Older revision		Revision as of 20:37, 14 July 2021
Line 95:		Line 95:

	''theme/yourtheme/layout/somelayout.php''		''theme/yourtheme/layout/somelayout.php''
	<~~code~~ php>		<syntaxhighlight lang="php">
	...		...
	$templatecontext = [		$templatecontext = [

← Older revision		Revision as of 20:24, 14 July 2021
Line 58:		Line 58:
	<code css>		<code css>
	body {background-image:url([[pix:theme\|gradient]]);}		body {background-image:url([[pix:theme\|gradient]]);}
	</~~code~~>		</syntaxhighlight>

	Before we look at how to use your own images within your themes layout files we should first look at how this changes if the image is in a sub directory.		Before we look at how to use your own images within your themes layout files we should first look at how this changes if the image is in a sub directory.
Line 67:		Line 67:
	<code css>		<code css>
	body {background-image:url([[pix:theme\|myimages/gradients/gradient]]);}		body {background-image:url([[pix:theme\|myimages/gradients/gradient]]);}
	</~~code~~>		</syntaxhighlight>

	If you want to refer to an image belonging to a plugin, you can do it like this:		If you want to refer to an image belonging to a plugin, you can do it like this:
Line 74:		Line 74:
	body {background-image:url([[pix:quiz\|icon]]);}		body {background-image:url([[pix:quiz\|icon]]);}
	body {background-image:url([[pix:qtype_ddmarker\|grid]]);}		body {background-image:url([[pix:qtype_ddmarker\|grid]]);}
	</~~code~~>		</syntaxhighlight>

	That refers to mod/quiz/pix/icon.png/gif and question/type/ddmarker/pix/grid.png/gif respectively (or whatever icons you have put in your theme to override these).		That refers to mod/quiz/pix/icon.png/gif and question/type/ddmarker/pix/grid.png/gif respectively (or whatever icons you have put in your theme to override these).
Line 80:		Line 80:
	<code css>		<code css>
	body {background-image:url([[pix:block_customblock\|grid]]);}		body {background-image:url([[pix:block_customblock\|grid]]);}
	</~~code~~>		</syntaxhighlight>

	That refers to blocks/customblock/pix/grid.png/gif/jpg (or whatever icons you have put in your theme to override these).		That refers to blocks/customblock/pix/grid.png/gif/jpg (or whatever icons you have put in your theme to override these).
Line 92:		Line 92:
	/pix/logo.jpg		/pix/logo.jpg
	/pix/myimages/logos/logo.png		/pix/myimages/logos/logo.png
	</~~code~~>		</syntaxhighlight>

	''theme/yourtheme/layout/somelayout.php''		''theme/yourtheme/layout/somelayout.php''
Line 105:		Line 105:

	echo $OUTPUT->render_from_template('theme_yourtheme/somelayout', $templatecontext);		echo $OUTPUT->render_from_template('theme_yourtheme/somelayout', $templatecontext);
	</~~code~~>		</syntaxhighlight>

	''theme/yourtheme/templates/somelayout.mustache''		''theme/yourtheme/templates/somelayout.mustache''
Line 113:		Line 113:
	<img src="{{{imagetwo}}}" alt="Please give your image alt text or set the role to presentation" width="50" height="50">		<img src="{{{imagetwo}}}" alt="Please give your image alt text or set the role to presentation" width="50" height="50">
	...		...
	</~~code~~>		</syntaxhighlight>

	==Overriding images in your theme==		==Overriding images in your theme==
Line 166:		Line 166:
	<syntaxhighlight lang="php">		<syntaxhighlight lang="php">
	/theme/themename/area/plugintype/pluginname/filename.gif		/theme/themename/area/plugintype/pluginname/filename.gif
	</~~code~~>		</syntaxhighlight>

	==See also==		==See also==

← Older revision		Revision as of 13:02, 14 July 2021
Line 89:		Line 89:

	Images:		Images:
	<~~code~~>		<syntaxhighlight lang="php">
	/pix/logo.jpg		/pix/logo.jpg
	/pix/myimages/logos/logo.png		/pix/myimages/logos/logo.png
Line 164:		Line 164:

	So you end up with:		So you end up with:
	<~~code~~>		<syntaxhighlight lang="php">
	/theme/themename/area/plugintype/pluginname/filename.gif		/theme/themename/area/plugintype/pluginname/filename.gif
	</code>		</code>

← Older revision		Revision as of 13:56, 15 November 2020
Line 77:		Line 77:

	That refers to mod/quiz/pix/icon.png/gif and question/type/ddmarker/pix/grid.png/gif respectively (or whatever icons you have put in your theme to override these).		That refers to mod/quiz/pix/icon.png/gif and question/type/ddmarker/pix/grid.png/gif respectively (or whatever icons you have put in your theme to override these).

			<code css>
			body {background-image:url([[pix:block_customblock\|grid]]);}
			</code>

			That refers to blocks/customblock/pix/grid.png/gif/jpg (or whatever icons you have put in your theme to override these).

	===Using your images within your layout files===		===Using your images within your layout files===

← Older revision		Revision as of 14:01, 10 July 2018
Line 1:		Line 1:
	{{Template:Themes}}		{{Template:Themes}}
	==A little background==		==A little background==
	Moodle a standard way of making use of images within its pages enabling theme designers to take full control over what images are being used and when possible ensures images are passed through Moodle's performance caching system to obtain the best possible performance.		Moodle has a standard way of making use of images within its pages enabling theme designers to take full control over what images are being used and when possible ensures images are passed through Moodle's performance caching system to obtain the best possible performance.

	==Before we start==		==Before we start==

← Older revision		Revision as of 12:02, 23 November 2017
Line 93:		Line 93:
	$templatecontext = [		$templatecontext = [
	...		...
	'imageone' => $OUTPUT->~~pix_url~~('logo', 'theme'),		'imageone' => $OUTPUT->image_url('logo', 'theme'),
	'imagetwo' => $OUTPUT->~~pix_url~~('myimages/logos/logo', 'theme'),		'imagetwo' => $OUTPUT->image_url('myimages/logos/logo', 'theme'),
	...		...
	];		];

← Older revision		Revision as of 14:29, 22 May 2017
Line 93:		Line 93:
	$templatecontext = [		$templatecontext = [
	...		...
	$imageone => $OUTPUT->pix_url('logo', 'theme'),		'imageone' => $OUTPUT->pix_url('logo', 'theme'),
	$imagetwo => $OUTPUT->pix_url('myimages/logos/logo', 'theme'),		'imagetwo' => $OUTPUT->pix_url('myimages/logos/logo', 'theme'),
	...		...
	];		];

← Older revision		Revision as of 09:45, 28 February 2017
Line 165:		Line 165:

	* [[Plugins]]		* [[Plugins]]
	* [[Replacing icons with CSS3]]
	* [http://youtu.be/g_9VM9OMs3Y Adding Images to your Theme] MoodleBites video on YouTube		* [http://youtu.be/g_9VM9OMs3Y Adding Images to your Theme] MoodleBites video on YouTube