Download the PHP package sigtrygg-space/kirby-image-compare without Composer

On this page you can find all versions of the php package sigtrygg-space/kirby-image-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?

Example code of sigtrygg-space/kirby-image-compare

Informations about the package kirby-image-compare

Kirby Image Compare

A before/after image comparison block for Kirby CMS — two images, a draggable divider, done.

Requirements

Installation

Composer

Download

Download the latest release and copy the folder to site/plugins/image-compare.

Git submodule

Usage

Allow the block type in any blocks field:

Editors then pick a before image, an after image, an optional caption, and the initial divider position (0–100 %, default 50). The Panel preview mirrors the frontend: drag its divider to set the start position, or fine-tune it with the range field in the drawer (double-click the preview to open it).

The block renders a <figure class="image-compare"> with both images as responsive <picture> elements and a draggable divider. The stylesheet and script are injected into the <head> automatically whenever a rendered page contains the block — nothing to add to your templates. (Only if you render blocks entirely outside of Kirby's page rendering — e.g. in a custom route without a <head> — do you need to include the two files from kirby()->plugin('sigtrygg-space/kirby-image-compare')->asset('image-compare.css')->url() and …->asset('image-compare.js')->url() yourself.)

Options

Configure site-wide in site/config/config.php under the sigtrygg-space.kirby-image-compare namespace:

Option Default Purpose
widths [480, 768, 1024, 1200, 1440] srcset widths
formats ['webp', 'jpg'] <source> formats in order (avif, webp, jpg, png)
quality 88 thumb quality: int, per-format map, or null for your Kirby thumbs config
sizes (min-width: 1200px) 720px, 100vw sizes attribute (also overridable per call via the snippet variable)
fallback 1200 width of the plain <img> fallback
step 2 keyboard step in percent (arrow keys; PageUp/PageDown move 10 %, Home/End jump to the edges)
label null overrides the handle's aria-label (useful on single-language sites, where the English translation would otherwise win)

When setting label, use a noun naming what is controlled (e.g. 'Bildvergleich') — screen readers announce the slider role themselves, so don't repeat it in the label ("slider for …" would be read twice).

Dynamically inserted blocks

The script initializes every [data-image-compare] stage once on page load. If your site swaps content in later (htmx, Turbo, infinite scroll), re-run the idempotent initializer on the new fragment:

Theming

Override these custom properties on .image-compare or any ancestor:

Property Default Purpose
--image-compare-line-width 2px divider line width
--image-compare-line-color #fff divider line color
--image-compare-handle-size 2rem diameter of the round grip
--image-compare-handle-bg #fff grip background
--image-compare-handle-color #555 grip arrow color
--image-compare-handle-hover-color OS accent color* arrow color on hover and keyboard focus
--image-compare-arrow-size 75% arrow size relative to the grip

* where the browser supports the AccentColor system color keyword (Safari, Firefox); elsewhere the arrows keep their regular color until you set the property.

The stage's aspect ratio is derived from the before image automatically (the plugin sets --image-compare-ratio as an inline style on the figure). To force a different ratio, target the stage itself — a declaration on the stage always beats the inherited inline value:

Custom image markup

The responsive <picture> lives in its own snippet. To replace it (different widths, formats, a lazy-loading library, …), copy snippets/image-compare-picture.php to site/snippets/image-compare-picture.php and adjust it — site snippets override plugin snippets of the same name. Your markup's picture/img elements are sized by the plugin CSS regardless of their classes. The same goes for the block markup itself (snippets/blocks/image-compare.php → site/snippets/blocks/image-compare.php).

Development

The Panel preview is a Vue single-file component, precompiled with kirbyup:

The built index.js/index.css are committed; CI fails when they are stale.

License

MIT

All versions of kirby-image-compare with dependencies

PHP Build Version
Package Version
Requires php Version >=8.2
getkirby/composer-installer Version ^1.2
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 sigtrygg-space/kirby-image-compare contains the following files

Loading the files please wait ...