Download the PHP package jkphl/responsive-images-css without Composer

On this page you can find all versions of the php package jkphl/responsive-images-css. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

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 PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • 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.
Please rate this library. Is it a good library?

Example code of jkphl/responsive-images-css

Informations about the package responsive-images-css

jkphl/responsive-images-css

Build Status Coverage Status Scrutinizer Code Quality Code Climate Clear architecture

HTML5-like responsive background images in CSS (sort of …)

About

The purpose of responsive-images-css is to ease the creation process of responsive background images in CSS. It provides similar semantics as responsive images via <img srcset="…" sizes="…"> in HTML5.

The rendering sequence of a standard HTML5 responsive (foreground) image is a highly complex process. It's impossible to fully predict which exact image candidate a browser will pick as some decisions may depend on environment settings that are only available at runtime (such as the network performance).

In contrast, responsive-images-css generates CSS code on the server-side — that is, long before the browser gets to interpret the generated output. To make this work, some asumptions have to be made:

Usage

The generator

Creating a responsive background image always starts with a fresh Generator instance:

As you see in the example, the Generator accepts a list of CSS breakpoints and an em to px ratio as constructor arguments. The latter defaults to 16 if omitted. The breakpoints only get used in combination with a width based image candidates set and a sizes specification (you can pass in an empty array in all other cases).

Image candidates

Next, you have to register a couple of image candidates for the various states of the responsive image. The file names don't get validated in any way — they will be used as-is for the generated CSS.

As with HTML5 responsive images, you can use resolution or width based descriptors for the image candidates, but be aware that you're not allowed to mix them within a single image candidate set.

Compiling the CSS ruleset

Finally, to create the responsive image CSS, call the generator's make() method and apply a CSS selector of your choice to the resulting CSS ruleset:

The list of floating point numbers passed to the make() method are the device pixel densities / resolutions you want the CSS to be rendered for. If you omit this argument, only the default density 1.0 will be considered. The output will look something like this (not pretty-printed):

As you see in the example, only the background-image property is specified for the image candidates. For a fully functional responsive image you will need some more lines of CSS — in order to give you full control, however, it's up to you to add this to your overall CSS.

Example

A minimal, all-things-inlined HTML / PHP example document with responsive background image could look like this:

Using sizes

A very powerful feature of HTML5 responsive images is the sizes attribute which lets you further describe the way your image gets displayed. responsive-images-css aims to support the sizes specification to a reasonable extent so that you can use the same values as you would for <img srcset="…" sizes="…">:

The Generator will try to calculate the anticipated image sizes for the registered breakpoints and select the appropriate image candidates accordingly. Please be aware that

Installation

This library requires PHP 7.1 or later. I recommend using the latest available version of PHP as a matter of principle. It has no userland dependencies. It's installable and autoloadable via Composer as jkphl/responsive-images-css.

Alternatively, download a release or clone this repository, then require or include its autoload.php file.

Dependencies

Composer dependency graph

Quality

To run the unit tests at the command line, issue composer install and then phpunit at the package root. This requires Composer to be available as composer, and PHPUnit to be available as phpunit.

This library attempts to comply with PSR-1, PSR-2, and PSR-4. If you notice compliance oversights, please send a patch via pull request.

Contributing

Found a bug or have a feature request? Please have a look at the known issues first and open a new issue if necessary. Please see conduct for details.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

License

Copyright © 2018 Joschi Kuphal / [email protected]. Licensed under the terms of the MIT license.

All versions of responsive-images-css with dependencies

PHP Build Version
Package Version
Requires php Version >=7.1
chriskonnertz/string-calc Version ^1.0.10
sabberworm/php-css-parser Version ^8.1
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package jkphl/responsive-images-css contains the following files

Loading the files please wait ....