Download the PHP package diu/neos-content-picture without Composer
On this page you can find all versions of the php package diu/neos-content-picture. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download diu/neos-content-picture
More information about diu/neos-content-picture
Files in diu/neos-content-picture
Package neos-content-picture
Short Description Neos default picture element with auto download option, auto target _blank for external links and rel noopener
License MIT
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package neos-content-picture
Responsive Images in Neos
This package delivers the basic image content element for responsive Neos websites. It's heavily depending on the Sitegeist Kaleidoskop package. See the packages Readme here for more information about possible settings: https://github.com/sitegeist/Sitegeist.Kaleidoscope
Using this package
By default this package creates a picture tag with fallback image so that also IE11 is supported. It also creates several renditions of an image as the default type of the image, like jpg, gif ... and also a webp format. Make sure that your system/server is correctly configured in order to get .webp images out of the box.
Adapt image size to your grid
In order to have an image fit perfectly to your grid settings do the following:
1) Make sure you add this package to your site packages composer.json as a required dependency 2) Create a fusion file to override the Picture settings, e.g. if you use our DIU.Grid package:
Two column example
How does it work
Step one
First you tell the browser on which break point the image will have which width.
These are just the column width at the breakpoints with one additional on mobile, so that we don't load the biggest
necessary one for 767px.
Now you know which width the image can have in a two column (50%/50%) grid.
One thing, you have to use max-width NOT min-width! The last value without the max-width will be then the image for
every bigger screen. ( So this is different from CSS where you go usually with min-with up )
Step two
Second we have screens with several dpi values. "Old" regular screens have a value of 1x, others like HiRes screens for computer or mobile phones will have a twice as high density "2x" or even "3x". There for we need an image which has the doubled or three times the size of the column width. This makes the next line, where we have 1x, 2x, 3x of the sizes values:
If the browser doesn't find the exact matching image it will take the next bigger one. This is important to know so that you provide an efficient set of image widths. Just keep in mind, that every additional value in srcset will increase the amount of disk space necessary on the server! So you should find a good balance here.
Step three
Third one, test your images. We recommand to use Firefox to test responsive images as Firefox will load the different images when changing the size, whereas Chrome will load once the biggest and won't show you that he will load the smaller image when you shrink the with of the browser window
