Controllers: Asset Management - Versionsgeschichte

Tm: /* General Usage */

2017-11-05T16:39:39Z

General Usage

← Nächstältere Version		Version vom 5. November 2017, 16:39 Uhr
Zeile 43:		Zeile 43:
	To link for example to your css assets named '''style.css''' that you have saved in the folder '''application/assets/some_subfolder_if_needed/style.css''' use the following tag:		To link for example to your css assets named '''style.css''' that you have saved in the folder '''application/assets/some_subfolder_if_needed/style.css''' use the following tag:

	<syntaxhighlight>		<syntaxhighlight lang="html">
	<link rel="stylesheet" href="assets/some_subfolder_if_needed/style.css" type="text/css" />		<link rel="stylesheet" href="assets/some_subfolder_if_needed/style.css" type="text/css" />
	</syntaxhighlight>		</syntaxhighlight>

Tm am 5. November 2017 um 16:38 Uhr

2017-11-05T16:38:53Z

← Nächstältere Version		Version vom 5. November 2017, 16:38 Uhr
Zeile 1:		Zeile 1:
	All the assets of your web-application can be placed inside a folder named '''assets'''. You can use any folder hierarchy you want. Assets will be based on the type compiled or otherwise modified before sending them to the client.		== Summary ==

	~~Here all~~ the ~~features~~ of the ~~asset management library~~:		All the assets of your web-application can be placed inside a folder named '''assets'''. You can use any folder hierarchy you want.

			Assets will be based on the type compiled or otherwise modified before sending them to the client:

			* Images will be downscaled for small displays
			* SCSS will be compiled to CSS
			* JavaScript will be compressed

			=== Features ===

	'''Caching of compiled files:'''		'''Caching of compiled files:'''
Zeile 11:		Zeile 19:
	It could be useful to delete the entire cache from time to time (e.g. after heavy reconstructions of your assets), because there is no garbage collection. The system will not recognize deletion of original files and the compiled version will stay.		It could be useful to delete the entire cache from time to time (e.g. after heavy reconstructions of your assets), because there is no garbage collection. The system will not recognize deletion of original files and the compiled version will stay.

	''Support of Browser Caching:'''		'''Support of Browser Caching:'''

	Browsers caching techniques are also supported and files will not be delivered at all if they are cached by the browser.		Browsers caching techniques are also supported and files will not be delivered at all if they are cached by the browser.
Zeile 25:		Zeile 33:
	'''Environment Dependence:'''		'''Environment Dependence:'''

	The output of some asset types depends on the environment of your CodeIgniter instance. JavaScript files will be compressed for example if you set your environment to '''production''' or '''testing'''.		The output of some asset types depends on the environment of your CodeIgniter instance (depending on the constant "ENVIRONMENT"). JavaScript files will be compressed for example if you set your environment to '''production''' or '''testing'''.

	== General Usage ==		== General Usage ==
Zeile 71:		Zeile 79:
	=== Images ===		=== Images ===

	Imagefiles with the extensions '''jpg''', '''jpeg''', '''gif''' and '''png''' will be resized accordingly to the users display size. All types of displays should be detected, from high density displays like retina displays down to small mobile devices. For this reason you should use high resolution images from the beginning. The controller will serve the client an image with an optimized size automatically. The only thing you have to pay attention to, is the correct marking of the used <img~~>-Tags~~ and set a little JavaScript into yout page.		Imagefiles with the extensions '''jpg''', '''jpeg''', '''gif''' and '''png''' will be resized accordingly to the users display size. All types of displays should be detected, from high density displays like retina displays down to small mobile devices. For this reason you should use high resolution images (twice as big as displayed) from the beginning. The controller will serve the client an image with an optimized size automatically. The only thing you have to pay attention to, is the correct marking of the used '''img''' tags and set a little JavaScript into yout page.

	The JavaScript~~-Snippet~~ will be automatically inserted if you use the master template library. If you do not use the master template library you can add it manually:		The required JavaScript will be automatically inserted if you use the master template library. If you do not use the master template library you can add it manually:

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
Zeile 87:		Zeile 95:
	<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';</script>		<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';</script>
	[...]		[...]
			</head>
			</syntaxhighlight>

			The '''img''' tag mus have always the correct sizes:

			<syntaxhighlight lang="html">
			<img width="150" height="50" src="..." />
	</syntaxhighlight>		</syntaxhighlight>

	An example: Acoording to the given design you have to place an image of 150x50 pixels onto the page. In this case you ~~will~~ save a double-sized image into the img folder with 300x100 pixels. The most important thing now, is to write your <img~~>-Tag~~ with the correct sizes: <img width="150" height="50" src="..." />. That's all. Everything else will be done by the ~~img-controller~~. Retina-displays will show a sharp image and mobile browsers will get a downsized image.		'''An example:'''

			Acoording to the given design you have to place an image of 150x50 pixels onto the page. In this case you should save a double-sized image into the img folder with 300x100 pixels. The most important thing now, is to write your '''img''' tag with the correct sizes: '''<img width="150" height="50" src="..." />'''. That's all. Everything else will be done by the library. Retina-displays will show a sharp image and mobile browsers will get a downsized image.

	Used library: http://adaptive-images.com/		Used library: http://adaptive-images.com/
Zeile 95:		Zeile 112:
	=== Stylesheets ===		=== Stylesheets ===

	~~Sometimes everyone miss features that don~~'~~t exist in CSS yet like~~ variables, nesting, mixins, inheritance. ~~This is now possible by using SCSS. To learn more about this~~ CSS~~-Extension read the basic introduction here: http://sass-lang.com/guide But~~ you ~~do not have to use SCSS~~. If you dont want or need it, just use simple CSS as always.		Stylesheetfiles with the extensions '''css''' or '''scss''' will be compiled as SCSS. You can use variables, nesting, mixins, inheritance etc. and the library will produce the CSS for you. If you dont want or need it, just use simple CSS as always.

	~~The stylesheet will be compressed in a testing or production environment (depending on~~ the constant "ENVIRONMENT"). Otherwise it will be only normalized. In case of a compiler error a css comment will be inserted at the beginning of your stylesheet and the stylesheet will be delivered uncompiled.		To learn more about SCSS read the basic introduction here: http://sass-lang.com/guide

	~~Only SCSS is supported, not SASS!~~		Furthermore the stylesheet will be compressed in a testing or production CodeIgniter environment. Otherwise it will be only normalized.

			In case of a compiler error a css comment will be inserted at the beginning of your stylesheet and the stylesheet will be delivered uncompiled.

	Used library: http://leafo.net/scssphp/		Used library: http://leafo.net/scssphp/
Zeile 105:		Zeile 124:
	=== JavaScript ===		=== JavaScript ===

	~~You Javascript~~ files will be automatically minified if you are on production or testing environment ~~(depending on the constant "ENVIRONMENT"), so that it can be delivered to the client quicker~~. Otherwise it will be left untouched. In case of a compiler error a JavaScript comment will be inserted at the beginning of your script and the file will be delivered uncompiled.		JavaScript files with the extension '''js''' will be automatically minified if you are on production or testing CodeIgniter environment. Otherwise it will be left untouched.

			In case of a compiler error a JavaScript comment will be inserted at the beginning of your script and the file will be delivered uncompiled.

	Used library: https://github.com/tedious/JShrink		Used library: https://github.com/tedious/JShrink
Zeile 111:		Zeile 132:
	=== Other Binaries ===		=== Other Binaries ===

	For other files (for ~~example pdf-files for download) the folder "etc" was scheduled. For~~ now no special processing will be done ~~for these files~~. Just put your files inside of the folder ~~"assets/etc"~~ being prepared for future enhancements.		For other files for now no special processing will be done. Just put your files inside of the assets folder being prepared for future enhancements.

Tm am 5. November 2017 um 15:51 Uhr

2017-11-05T15:51:38Z

Änderungen zeigen

Tm: /* JavaScript */

2015-06-22T14:27:27Z

JavaScript

← Nächstältere Version		Version vom 22. Juni 2015, 14:27 Uhr
Zeile 87:		Zeile 87:
	=== JavaScript ===		=== JavaScript ===

	You Javascript files will be automatically minified if you are on production environment (depending on the constant "ENVIRONMENT"), so that it can be delivered to the client quicker. Otherwise it will be left untouched. In case of a compiler error a JavaScript comment will be inserted at the beginning of your script and the file will be delivered uncompiled.		You Javascript files will be automatically minified if you are on production or testing environment (depending on the constant "ENVIRONMENT"), so that it can be delivered to the client quicker. Otherwise it will be left untouched. In case of a compiler error a JavaScript comment will be inserted at the beginning of your script and the file will be delivered uncompiled.

	Used library: https://github.com/tedious/JShrink		Used library: https://github.com/tedious/JShrink

Tm: /* Stylesheets */

2015-06-22T14:27:11Z

Stylesheets

← Nächstältere Version		Version vom 22. Juni 2015, 14:27 Uhr
Zeile 79:		Zeile 79:
	Sometimes everyone miss features that don't exist in CSS yet like variables, nesting, mixins, inheritance. This is now possible by using SCSS. To learn more about this CSS-Extension read the basic introduction here: http://sass-lang.com/guide But you do not have to use SCSS. If you dont want or need it, just use simple CSS as always.		Sometimes everyone miss features that don't exist in CSS yet like variables, nesting, mixins, inheritance. This is now possible by using SCSS. To learn more about this CSS-Extension read the basic introduction here: http://sass-lang.com/guide But you do not have to use SCSS. If you dont want or need it, just use simple CSS as always.

	~~Depending on the constant "ENVIRONMENT" the served~~ stylesheet will be compressed ~~if it was set to "~~testing" or "~~production~~". ~~If set to "development"~~ it will be only normalized. In case of a compiler error a css comment will be inserted at the beginning of your stylesheet~~. The~~ stylesheet will be delivered uncompiled.		The stylesheet will be compressed in a testing or production environment (depending on the constant "ENVIRONMENT"). Otherwise it will be only normalized. In case of a compiler error a css comment will be inserted at the beginning of your stylesheet and the stylesheet will be delivered uncompiled.

	Only SCSS is supported, not SASS!		Only SCSS is supported, not SASS!

Tm: /* JavaScript */

2015-06-22T14:26:10Z

JavaScript

← Nächstältere Version		Version vom 22. Juni 2015, 14:26 Uhr
Zeile 87:		Zeile 87:
	=== JavaScript ===		=== JavaScript ===

	You Javascript files will be automatically minified if you are on production environment (depending on the constant "ENVIRONMENT"), so that it can be delivered to the client quicker. Otherwise it will be left untouched. In case of a compiler error a JavaScript comment will be inserted at the beginning of your script~~. The~~ file will be delivered uncompiled.		You Javascript files will be automatically minified if you are on production environment (depending on the constant "ENVIRONMENT"), so that it can be delivered to the client quicker. Otherwise it will be left untouched. In case of a compiler error a JavaScript comment will be inserted at the beginning of your script and the file will be delivered uncompiled.

	Used library: https://github.com/tedious/JShrink		Used library: https://github.com/tedious/JShrink

Tm: /* Images */

2015-06-22T14:24:24Z

Images

← Nächstältere Version		Version vom 22. Juni 2015, 14:24 Uhr
Zeile 67:		Zeile 67:
	=== Images ===		=== Images ===

	Images placed inside the folder "img" will be resized accordingly to the users display size. ~~High~~ density displays like retina displays will be detected ~~and~~ small mobile devices. For this reason you should use high resolution images from the beginning. The controller will serve the client an image with an optimized size automatically. The only thing you have to pay attention to, is the correct marking of the used <img>-Tags.		Images placed inside the folder "img" will be resized accordingly to the users display size. Grom high density displays like retina displays will be detected down to small mobile devices. For this reason you should use high resolution images from the beginning. The controller will serve the client an image with an optimized size automatically. The only thing you have to pay attention to, is the correct marking of the used <img>-Tags.

	An example: Acoording to the given design you have to place an image of 150x50 pixels onto the page. In this case you will save a double-sized image into the img folder with 300x100 pixels. The most important thing now, is to write your <img>-Tag with the correct sizes: <img width="150" height="50" src="..." />. That's all. Everything else will be done by the img-controller. Retina-displays will show a sharp image and mobile browsers will get a downsized image.		An example: Acoording to the given design you have to place an image of 150x50 pixels onto the page. In this case you will save a double-sized image into the img folder with 300x100 pixels. The most important thing now, is to write your <img>-Tag with the correct sizes: <img width="150" height="50" src="..." />. That's all. Everything else will be done by the img-controller. Retina-displays will show a sharp image and mobile browsers will get a downsized image.

Tm: /* Special Flags */

2015-06-22T14:23:12Z

Special Flags

← Nächstältere Version		Version vom 22. Juni 2015, 14:23 Uhr
Zeile 45:		Zeile 45:
	* '''live:''' Like '''force''' the asset will always compiled. But it will compile the asset as it would be compiled in a production environment.		* '''live:''' Like '''force''' the asset will always compiled. But it will compile the asset as it would be compiled in a production environment.
	* '''auto:''' This is the standard flag. The asset will be recompiled if the cached version is out-of-date. If you set this flag or leave it, the behaviour is exactly the same.		* '''auto:''' This is the standard flag. The asset will be recompiled if the cached version is out-of-date. If you set this flag or leave it, the behaviour is exactly the same.

	Using the flag '''live''' (in a development environment of course) can be confusing. If you call an asset with the flag '''live''' a new compiled version will be saved into the cache. If you call the next time the asset without this flag the system will recognize an up-to-date cached asset and you will get delivered all the time the "live"-version of the compiled asset. You can reverse this by calling the asset with the flag '''force'''.

	Here an example how to use these flags:		Here an example how to use these flags:
Zeile 60:		Zeile 58:
	http://domain.tld/assets/css/mySubfolder/style.css/off		http://domain.tld/assets/css/mySubfolder/style.css/off
	</syntaxhighlight>		</syntaxhighlight>

			Hint: Using the flag '''live''' (in a development environment of course) can be confusing. If you call an asset with the flag '''live''' a new compiled version will be saved into the cache. If you call the next time the asset without this flag the system will recognize an up-to-date cached asset and you will get delivered all the time the "live"-version of the compiled asset. You can reverse this by calling the asset with the flag '''force'''.

	== Asset Types ==		== Asset Types ==

Tm am 22. Juni 2015 um 14:21 Uhr

2015-06-22T14:21:34Z

← Nächstältere Version		Version vom 22. Juni 2015, 14:21 Uhr
Zeile 13:		Zeile 13:
	In the most cases you do not have to delete the compiled assets. The controller will recognize a new version of the origin asset, and will delete the cached one by itself. But removing all the contents inside of the folders '''compiled''' can be done everytime safely. This caches will be rebuild automatically.		In the most cases you do not have to delete the compiled assets. The controller will recognize a new version of the origin asset, and will delete the cached one by itself. But removing all the contents inside of the folders '''compiled''' can be done everytime safely. This caches will be rebuild automatically.

	'''It is sometimes useful to delete (e.g. after heavy reconstructions of your assets) the entire cache, because there is no garbage collection. The system will not recognize deletion of original files and the compiled version will stay.~~'''~~		'''Important Remark:''' It is sometimes useful to delete (e.g. after heavy reconstructions of your assets) the entire cache, because there is no garbage collection. The system will not recognize deletion of original files and the compiled version will stay.

	'''Cache Control'''		'''Cache Control'''

Tm am 22. Juni 2015 um 14:20 Uhr

2015-06-22T14:20:31Z

← Nächstältere Version		Version vom 22. Juni 2015, 14:20 Uhr
Zeile 5:		Zeile 5:
	'''Multiple Applications Support'''		'''Multiple Applications Support'''

	You will find a folder named "assets" inside of your application folder and at the root of your webfolder. The assets at the top of your web folder will be available to all your applications (if you have). Every application can override assets from the top of your web folder by creating an asset with the same name.		You will find a folder named '''assets''' inside of your application folder and at the root of your webfolder. The assets at the top of your web folder will be available to all your applications (if you have). Every application can override assets from the top of your web folder by creating an asset with the same name.

	'''Compile and Cache'''		'''Compile and Cache'''