GithubHelp home page GithubHelp logo

justb3a / processwire-imageextra Goto Github PK

View Code? Open in Web Editor NEW
20.0 10.0 8.0 952 KB

This module allows you to add additional informations to an image (for example: title, description, link, orientation and any field you may need).

Home Page: http://www.kf-interactive.com/blog/adding-custom-fields-for-images-in-processwire/

License: MIT License

processwire image metadata

processwire-imageextra's Introduction

WARNING: This repository is no longer maintained ⚠️

This repository will not be updated. The repository will be kept available in read-only mode.

ProcessWire ImageExtra

Designed for use with ProcessWire 3.x

About

This module allows you to add additional informations to an image (for example: title, description, link, orientation and any field you may need).

Usage

For each instance of an image field the field settings will be extended. Navigate to Admin > Setup > Fields and edit the desired field. Click on the Input Tab and click on the "Image Extra Fields ..." area. It extends downwards and reveals a form to set up additional custom fields.

The following fields are available by default:

  • description - image description (core)
  • disable multi language description
  • orientation - image orientation
  • orientation values - values to use as class names or identifiers for different image orientations
  • link - image link to internal pages
  • other fields - here you can add any other field by writing it (separated by comma)

For each of the activated custom fields an own column in the specific table will be created.
As soon as you added any custom field(s), a table containing all fields appears below. You can set here a textformatter (e.g. Markdown, Paragraph Stripper, ..) as well as a label text (multi-language) for each field - if you want to. The textformatters have to be installed before.

Caution: Just removing a custom field will not erase it, due to data persistence. If you really don't need it anymore you have to delete the column manually.

After having added some custom fields to an image field, edit a page which has a template containing this field. Below each image you get some additional config fields - and for sure it provides multi language support.

Accessing the values

This is no different than accessing the value of any other field.

$image = $page->image->getRandom();
echo $image->caption;
echo $image->location;
echo $pages->get($image->link)->url;
echo $image->getExtraLabel('location') . ': ' . $image->location;

Get extra field label

// outputs something like: "Location: Munich"
echo $image->getExtraLabel('location') . ': ' . $image->location;

// outputs something like: "Ort: München"
echo $image->getExtraLabel('location', 'de') . ': ' . $image->location;

Setting the values

From the API side you can set the values like this:

$page->setOutputFormatting(false);
$page->images->trackChange('title');
$image = $page->images->getRandom(); // or whatever image you want
$image->title = 'Title in default language';
$image->title($languages->get('fi'), 'Title in Finish');
$image->title($languages->get('de'), 'Title in German');
$page->save();
$page->setOutputFormatting(true);

processwire-imageextra's People

Contributors

adrianbj avatar justb3a avatar processwired avatar tiefenb avatar weberhofer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.