Download the PHP package frontend-services/craft-compare without Composer

On this page you can find all versions of the php package frontend-services/craft-compare. 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?

Informations about the package craft-compare

Compare — Craft CMS Plugin

Before/after image comparison slider field for Craft CMS 5. Editors pick two assets and configure a draggable divider. It also includes a custom web component for rendering the comparison on the frontend out of the box, with support for responsive images, retina displays, and lazy loading.

Requirements

Field Setup

Add a Compare field to any field layout. The field settings let you configure:

Setting Description
Allowed Volumes Restrict which asset volumes editors can pick from. Leave empty to allow all.
Default Start Position Initial divider position (0–100). Default: 50.
Default Moving Delay (ms) Drag smoothing in milliseconds (0 = instant). Default: 0.
Default Initial Animation Animate the divider when it first enters the viewport. Default: off.
Default Animation Distance (%) How far (0–50%) the divider swings during the intro animation. Default: 10.

Twig Usage

entry.myField.render()

The simplest way to output the comparison component:

Pass a config array to control image transforms and other options:

Config options

Key Type Default Description
transforms array {} Breakpoint → transform map. Keys are min-width values in px; Craft image transforms as values. Generates <picture>/<source> elements.
retina bool true When true, doubles transform dimensions for a 2x srcset descriptor.
lazy bool true Adds loading="lazy" to <img> elements.
class string '' CSS class added to the <craft-compare> element.
id string '' id attribute added to the <craft-compare> element.

Manual output

Access the raw data model to build your own markup:

Available properties

Property Type Description
before Asset\|null The "before" asset element.
after Asset\|null The "after" asset element.
divider Asset\|null The divider asset element (nullable).
beforeUrl string URL of the before asset.
afterUrl string URL of the after asset.
startPosition int Divider position (0–100).
movingDelay int Drag smoothing in ms.
initialAnimation bool Whether the intro animation is enabled.
initialAnimationDistance int Intro animation swing distance (0–50).

<craft-compare> Web Component

The frontend relies on the <craft-compare> custom element, automatically registered when using render() or when the CompareFieldAsset is registered in the CP.

Attributes

Attribute Type Default Description
position number 50 Initial divider position as a percentage (0–100).
delay number 0 Drag smoothing delay in milliseconds.
animate boolean (presence) — Enables the viewport-entry animation.
animate-distance number 10 Swing distance for the intro animation (0–50).

Slots

Slot Description
before <img>, <picture>, or <video> for the "before" state.
after <img>, <picture>, or <video> for the "after" state.
divider Optional element used as the drag handle (SVG <span> or <img>).

GraphQL

The field exposes a CompareFieldData type with the following fields:

All versions of craft-compare with dependencies

PHP Build Version
Package Version
Requires craftcms/cms Version ^5.0.0
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 frontend-services/craft-compare contains the following files

Loading the files please wait ...