Name: TYPO3-Imgix
Owner: AOE
Description: The "imgix" TYPO3 extension provides the Auto Responsive Images feature of imgix called imgix.fluid().
Created: 2016-03-18 10:33:39.0
Updated: 2017-12-21 13:41:47.0
Pushed: 2018-01-11 13:02:54.0
Size: 83
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
The “imgix” TYPO3 extension provides the Auto Responsive Images feature of imgix called imgix.fluid(). This allows you to deliver perferctly custom sized images for the client without using local capaticities. For more details have a look at imgix, imgix.fluid() and the JS library imgix.js.
In addition this extension provides some additional features like:
oser require aoe/imgix
Once the “imgix” extension is installed you have to activate the extension in the TYPO3 “Extension Manager”. You can do that by using the the TYPO3 Backend Module or using the comand line tool.
Click the “configure” action button to open the configuration. You can also do that by clicking the extension title.
The configuration is seperated in two parts: “basic” and “imgix”
The basic configuration includes specific settings of the extension which you need to set up for your project.
This is the host you have specified in the imgix webapp as source for your project. Be aware that you have to use the “Web Folder” source in imgix. For further information have a look at the imigx doumentation.
If basic.enabeld is set to false, the JS will never be rendered into browser.
Check this configuration if the image urls should be replaced by the configured basic.host configuration. If basic.enabeld is set to false, it will cause a fallback behavior: all image urls will be used as they are. This is helpful if you want to disable the responsive images from imgix using a simple checkbox without having broken or missing images.
If your JS adds images dynamically/asynchroniously, this setting will observe these changes to the DOM and will add the responsive image feature to new HTML image tags. Be careful by enabling this option. This feature is realized by Mutation Observers which is not supported by all browsers at the moment.
The imigx configurations are imgix.js related settings. For a detailed description about the options, take a look at the documentation.
If some of the URL API Parameters should be set by default, list them here as a GET-Parameter string, e.g. q=75&fit=max
To use this extension you have to add a static template file to your template record.
Now you have to take a decision for one of the supported integrations:
For AngularJS you have to add these two static template files to your template record:
For jQuery you have to add these two static template files to your template record:
lar.module('your-module', ['aoe.imgixify']);
aoe-imgix class="imgix-fluid" data-src="fileadmin/my-fancy-image.jpg">
To use responsive images you have to add the following class and attribute to you HTML image tag:
class="imgix-fluid" data-src="fileadmin/my-fancy-image.jpg">
License: GPLv3 or later. See LICENSE.
1. Fork the repository on Github
2. Create a named feature / bugfix branch (like `feature/add-something-new` or `bugfix/thing-which-does-not-work`)
3. Write your change
4. Write tests for your change (if applicable)
5. Run the tests, ensuring they all pass
6. Submit a Pull Request using Github