PHPackages vangenplotz/imageshop - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. vangenplotz/imageshop ActiveCraft-plugin vangenplotz/imageshop ===================== Integrate with an Imageshop account and use Imageshop resources in Craft 1.0.21(5y ago)01.1k4[14 PRs](https://github.com/vangenplotz/Craft-Imageshop/pulls)MITPHP Since Dec 11Pushed 2y ago1 watchersCompare [ Source](https://github.com/vangenplotz/Craft-Imageshop)[ Packagist](https://packagist.org/packages/vangenplotz/imageshop)[ RSS](/packages/vangenplotz-imageshop/feed)WikiDiscussions master Synced 2mo ago READMEChangelogDependencies (1)Versions (33)Used By (0) Imageshop plugin for Craft CMS 3.x ================================== [](#imageshop-plugin-for-craft-cms-3x) Integrate with an Imageshop account and use Imageshop resources in Craft [![Screenshot](resources/img/plugin-logo.png)](resources/img/plugin-logo.png) Requirements ------------ [](#requirements) This plugin requires Craft CMS 3.0.0-beta.23 or later. To use this plugin you need an account with [Imageshop](https://www.imageshop.org/). Installation ------------ [](#installation) To install the plugin, follow these instructions. 1. Open your terminal and go to your Craft project: ``` cd /path/to/project ``` 2. Then tell Composer to load the plugin: ``` composer require vangenplotz/imageshop ``` 3. In the Control Panel, go to Settings → Plugins and click the “Install” button for Imageshop. Imageshop Overview ------------------ [](#imageshop-overview) [![Imageshop field modal](resources/img/screen-modal.jpg)](resources/img/screen-modal.jpg) The field has been made to mimic the normal Craft asset field. To the left the user can choose to filter the results by the available categories. There is a search field that lets the user search amongst the images. The results are loaded dynamically as the user scrolls the list. [![Rearranging images](resources/img/screen-moving.jpg)](resources/img/screen-moving.jpg) The user can rearrange the order of the images by dragging and dropping. Configuring Imageshop --------------------- [](#configuring-imageshop) ### Plugin settings [](#plugin-settings) Once installed you need to go to the plugin settings and provide a Imageshop token. [![Settings screen](resources/img/screen-settings.jpg)](resources/img/screen-settings.jpg) Chose one of the available languages. Press the "Refresh" button under "Interface name" to get available interfaces for the provided token. Select the interface name to be used as default. Save the changes once you're finished. Note that changing the token will make all the previously selected images inaccessible. ### Field settings [](#field-settings) [![Field settings screen](resources/img/screen-field-settings.jpg)](resources/img/screen-field-settings.jpg) You can add the field type to a standalone field or to a matrix block. Choose the text on the "Add image"-button and the "Maxiumum number of images" the user can choose. A value of `0` means the user kan choose an infinite amount of images. Using the Imageshop image field ------------------------------- [](#using-the-imageshop-image-field) When you access the ImageshopImage field you get an array of ImageShop-models. These are the attributes and methods available on the model: Property/methodDescriptionaltImage alt text from Imageshop document Descriptionbase64pixelImage placeholder base64 encoded transparent 1x1px gifcreditsImage credits from Imageshop document CreditsgetUrl()Get a single image url for an image given a transform, the transform can be a width or a transform objectoriginalHeightFull height of originaloriginalWidthFull width of originalimageDataRaw image data from ImageShopratio() Get the original image width to height ratiorightsImage rights from Imageshop document Rightssrc()Get the image url from a transform with a given width.srcset()Get a srcset string with all the images in a transformtransform()Create one or more transforms for an image. Can receive two parameters, a transform or array of transforms, and a default transform property.transformedAn array containing all the image transforms, each item has three attributes `url`, `width` and `height`titleImage title from Imageshop NameurlUrl to the original imagevalueRaw field value, comma separated list of image strings `{interface}_{language}_{documentId}`### Image transforms [](#image-transforms) When you use the `getUrl` or the `transform` method you can pass an integer which will be used to set the image width, or a transform object with the attributes: - `width` - `height` - `width` and `height` - `width` and `ratio` - `height` and `ratio` If only the width or height is defined with no ratio, the image will keep it's original ratio. Width and height should be integers, ratio should be a float. ``` {% set transform1 = { width: 100, height: 50 } %} {% set transform2 = { width: 100, ratio: 4/3 } %} ``` ### Get single image url [](#get-single-image-url) We can use the `getUrl` method with an integer, or a transform object. Remember that the Imageshop field always returns an array, if you only want one image select it with `.one()`. ``` {% set image = entry.imageshopImage.one() %} {# Get the full original image url #} {{ image.url }} {# Get image with width of 600 px #} {{ image.getUrl(600) }} {# Get image with height of 600 px #} {{ image.getUrl({height: 600}) }} {# Get image with width 600px and height of 400 px #} {{ image.getUrl({width: 600, height: 400}) }} {# Get image with width 600px and 16:9 aspect ratio #} {{ image.getUrl({width: 600, ratio: 16/9}) }} ``` ### Show one image [](#show-one-image) In this example we are creating transforms for image widths of 300 and 400 pixels, keeping the original image aspect ratio. We access the url by using the `src` method and specifying one of the widths. We can also use the `srcset` method to get all the transforms in a valid srcset-format. ``` {% set image = entry.imageshopImage.one().transform([300, 400]) %} ``` ### Show multiple images [](#show-multiple-images) In this example we create two transforms for each image; 300px and 400 px wide. The images keep the original image aspect ratio.: ``` {% set images = entry.imageshopImage.transform([300, 400]) %} {% for image in images %} {% endfor %} ``` If we want to force an aspect ratio on the images we can pass an optional default parameter that is applied to all the transforms for all the images. In this case all the images will get the same widescreen (16:9) aspect ratio. ``` {% set images = entry.imageshopImage.transform([300, 400], {ratio: 16/9}) %} {% for image in images %} {% endfor %} ``` ### Element API [](#element-api) You can access images from the Imageshop field similarly in PHP: ``` if( $image = $entry->imageshopImage->one() ) { $imageUrl = $image->getUrl(['width' => 400, 'ratio' => 16/9]); $imageAlt = $image->alt; } ``` Caching images -------------- [](#caching-images) The Imageshop api doesn't seem to cache the image url it creates, and because of this the methods used in this plugin can be fairly slow. Therefore we cache the Imageshop API-responses for a year so that repeat request are much quicker. Imageshop Roadmap ----------------- [](#imageshop-roadmap) Some things to do, and ideas for potential features: - Let the user upload images to Imageshop from the plugin The transform syntax and logic used in this plugin was inspired by [Fred Carlsen's](https://github.com/sjelfull/) [Imgix plugin for Craft CMS](https://github.com/sjelfull/imgix). Brought to you by [Vangen & Plotz AS](https://vangenplotz.no/) ### Health Score 34 — LowBetter than 77% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity16 Limited adoption so far Community15 Small or concentrated contributor base Maturity72 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~39 days Recently: every ~54 days Total 19 Last Release 2000d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/db6f38582c00d55e76104bdf8f464a0c197e4cee38bc9f8a1f096b5bb6c3f129?d=identicon)[KnutSv](/maintainers/KnutSv) --- Top Contributors [![KnutSv](https://avatars.githubusercontent.com/u/821570?v=4)](https://github.com/KnutSv "KnutSv (6 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (5 commits)")[![andersaloof](https://avatars.githubusercontent.com/u/1235821?v=4)](https://github.com/andersaloof "andersaloof (1 commits)")[![thunder87](https://avatars.githubusercontent.com/u/13064503?v=4)](https://github.com/thunder87 "thunder87 (1 commits)")[![urielbeaupre](https://avatars.githubusercontent.com/u/17004995?v=4)](https://github.com/urielbeaupre "urielbeaupre (1 commits)") --- Tags cmsCraftcraftcmscraft-pluginimageshop ### Embed Badge ![Health badge](/badges/vangenplotz-imageshop/health.svg) ``` [![Health](https://phpackages.com/badges/vangenplotz-imageshop/health.svg)](https://phpackages.com/packages/vangenplotz-imageshop) ``` ### Alternatives [nystudio107/craft-seomatic SEOmatic facilitates modern SEO best practices & implementation for Craft CMS 5. It is a turnkey SEO system that is comprehensive, powerful, and flexible. 1741.4M46](/packages/nystudio107-craft-seomatic)[verbb/image-resizer Resize assets when they are uploaded. 127269.1k7](/packages/verbb-image-resizer)[verbb/tablemaker Create customizable and user-defined table fields. 40168.8k1](/packages/verbb-tablemaker)[verbb/hyper A user-friendly links field for Craft. 24130.9k9](/packages/verbb-hyper)[verbb/social-poster Automatically post entries to social media. 918.5k](/packages/verbb-social-poster)[acclaro/translations Easily launch and manage multilingual Craft websites without having to copy/paste content or manually track updates. 1229.5k](/packages/acclaro-translations) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)