Giter Site home page Giter Site logo

clivebeckett / grav-plugin-admin-addon-media-metadata Goto Github PK

View Code? Open in Web Editor NEW
8.0 3.0 6.0 162 KB

This plugin is an addon for the Grav CMS Admin plugin and lets you add and edit metadata for media files

License: MIT License

CSS 1.46% JavaScript 20.67% PHP 71.72% Twig 6.15%

grav-plugin-admin-addon-media-metadata's Introduction

Admin Addon Media Metadata Plugin

The Admin Addon Media Metadata Plugin is an extension for the Grav CMS Admin plugin. It lets you add and edit metadata for media files in the Page Media browser.

The Admin plugin has not been offering a feature like this yet. In order to add/edit metadata e.g. for an image you had to create a [image.filename].meta.yaml for the image in your file browser and edit it in a text editor.

Usage and Features

  • the plugin will create and edit [mediafile].meta.yaml files in your page folder via a simple form in the Admin plugin
  • by default you can add/edit a title, alt text, and a caption – see Configuration section below on how to adapt this for your Grav installation
  • multiline text can be added (e.g. for caption)
  • in case you are storing additional, manually added data in your [mediafile].meta.yaml file, it will not be overwritten even if the form does not let you change it

How to use it

(see also screenshots below)

  1. hover any file in your Page Media section
  2. hit the small «i» button to open the metadata form (the regular «i» button which just showed the metadata will be overwritten by the plugin)

NOTE on setting “Auto metadata from Exif”

If your system is set to automatically write EXIF metadata
(system.yaml → media.auto_metadata_exif: true)

  • On Admin Plugin 1.10:
    Please save the page after uploading an image and before you write additional metadata using this plugin. On saving the page, the Admin Plugin will create the meta.yaml file including the EXIF data – but it won’t do so if a meta.yaml file already exists.
  • On Admin Plugin 1.9 and admin-addon-media-metadata >= 1.1.0:
    There’s no problem here: the EXIF data will be written immediately upon upload whereas this plugin now only writes or edits meta.yaml files when needed.

Installation

Grav Package Manager (GPM)

If you can access your Grav installation via the command line, install the plugin by typing the following from your Grav root:

bin/gpm install admin-addon-media-metadata

Admin Tool Web Interface

In the Plugins section, hit the [+ Add] button, search for Admin Addon Media Metadata and install.

Manual Installation

To install the plugin manually, download the ZIP version of the latest release of this repository and unzip it under /your/site/grav/user/plugins. Then rename the folder to admin-addon-media-metadata. You can find these files on GitHub.

Configuration

The default fields in the metadata form are alt, title, and caption. If you want to add more data to your meta.yaml files, please copy
user/plugins/admin-addon-media-metadata/admin-addon-media-metadata.yaml to
user/config/plugins/admin-addon-media-metadata.yaml
and add more form fields to the form by updating the copy. E.g. if you want to add a field for a web link, you might add the following lines:

  - type: text
    label: Web link
    name: weblink
    placeholder: https://domain.tld/

The URL field will be available in your metadata form and you’ll be able edit the information.

Do not touch base_fields in config as the plugin requires them to run properly. You can delete this field fromt your custom configuration though (which makes future upgrades more safe).

Also nesting (multi level arrays) like name: misc.tip or name: misc[tip] is not supported.

Additional Page Specific Metadata Fields (v1.1 and later)

You may also add page specific fields to a page’s frontmatter. Note: The fields will be added to the form, not override the ones from the above mentioned config files:

admin-addon-media-metadata:
  metadata_form:
    fields:
      -
        type: text
        label: 'Yet another field'
        name: yetAnotherField
        placeholder: 'yet yet yet'

Having added this example code to the frontmatter of your page, it will add the new field 'Yet another field' to the metadata modal, but only for this specific page.

Credits

I have based the plugin on Dávid Szabó’s Admin Addon Media Rename plugin. Much of the code would not have been possible for me without Dávid’s work.

@renards helped a lot in replacing my original self-written Yaml parsing and writing code with Grav core technology and thus made version 1.0.0 possible.

Screenshots

grav-plugin-admin-addon-media-metadata's People

Contributors

bitstarr avatar clivebeckett avatar hughbris avatar paulmassen avatar renards avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

grav-plugin-admin-addon-media-metadata's Issues

This plugin messes up metadata generated by Grav Core

Hi,

This is a great plugin except it doesn't work along core Grav media management...

If I don't activate the plugin, the metadata file is generated by Grav :

aperture: f/2.2
camera: 'iPhone 6s'
Orientation: 1
horizontalResolution: 72
verticalResolution: 72
software: 13.4.1
exposure: 1/17
iso: 250
creationdate: 2020-04-26T16:44:29+02:00
focalLength: 4.15
ColorSpace: 1
gps: '46.086472222222,1.4754138888889'

But if your plugin is activated, these metadata are not written in this file, only the title, alt and caption fields...

Metadata not updated when click on save

When I add some new content to an image and I click save and then also save the site, the whole new content is gone. Also it says "xyz.meta.yaml doesn't exist" when I uploaded a new image and click on the "i" icon.

Running GRAV 1.7.44

feature request: translatable metadata

It seems like the plugin only works with single language.
Localization would be quite useful.
So the file imagename.jpg.langcode.meta.yaml would be created for each language.

Limited functionality in Admin Plugin v1.10.0-rc.8

The Admin Plugin v1.10.0 writes newly uploaded media files to a temporary folder first and moves them to the page folder only on saving the page. The [mediafile].meta.yaml will only be written for files already moved to the page folder, thus after the next page save.

Also I am not sure whether the event hook onAdminAfterAddMedia is still being fired. It seems like it isn’t.

I can solve the problem partly by removing the condition that checks whether the media file exists before writing the YAML file. But I’m not sure this is a good idea. And even then no empty [mediafile].meta.yaml will be created on upload (which is what happened before, triggered by the event hook onAdminAfterAddMedia.

Display fields appear in metafile

Sorry for spamming you with issues lately. Realised I was checking the wrong metafiles (another folder) when I logged #20 and #21 but the issues hold.

Now I am looking at the right metafiles, I notice my display type fields are being rendered as undefined values like:

alt-tips: undefined

I can live with this bug, not causing any user facing issues.

If/when you fix this, it might help to know that some 'special' field types in the form plugin have a property that shows they are not proper input fields. I am not entirely sure how to use this though.

feature request: radio and checkbox fields

Hi,
if I add toggle, radio or checkbox field in my custom admin-addon-media-metadata.yaml, when I save metadata with this plugin, for these fields it saves always an empty value. Can you verify please?

feature request: field nesting/multi level fields

Really nice plugin! Thanks for putting energy into this.

Would you think that a hierarchy of fields is possible? To explain, I have a multi-language site, and title and stuff changes with the language.

My current media yaml looks like this:

sku: sku
tags: tag1, tag2, tag3

title:
  en: english title
  fr: titre français
  de: deutscher titel

alt:
  en: english alt
  fr: alt français
  de: düsseldorfer alt

Any hope ? Thanks a ton!

Limit functionality to embeddable media files?

Currently the plugin creates a mediafile.meta.yaml for every file upload in the Page Media file browser – no matter what file type. Maybe this should only be available for images or media files that can be embedded in the page?

Don't understand Additional Page Specific Metadata Fields instructions

In the README in the section "Additional Page Specific Metadata Fields (v1.1 and later)", it looks like something useful but I don't quite follow:

You may also add page specific fields to a page’s frontmatter. Note: The fields will be added to the form, not override the ones from the above mentioned config files:

Could you please explain this another way or more fully so I can grok it? Where (page blueprints or individual pages) and why would I use this? I'm happy to suggest a clearer wording in a PR if it occurs to me.

Also, thank you for this invaluable plugin! ❤️ It should be integrated into Admin plugin IMHO.

Automated EXIF data and this plugin in Admin 1.10

ISSUE: In Admin 1.10 with system.yaml → media.auto_metadata_exif set to true you need to save the page after uploading an image and before writing metadata using my plugin, otherwise the EXIF data will not be written.

THE REASON is that the meta.yaml with the EXIF data will only be written upon saving the page. If you write metadata using the form provided by my plugin before the page is saved, a meta.yaml will be created by my plugin and the EXIF data will not be written anymore.

AN IDEA for solving this issue could be to add the automated EXIF data functionality to the plugin in case system.yaml → media.auto_metadata_exif is set to true and the meta.yaml does not exist yet.

Very minor bug: plugin's contextual icon is not themed

I just happened to change Admin theme colours to try it out and noticed the contextual icon in Page Media for this plugin is not following the theme's colours:

image

I don't really care enough to find out where that can be fixed, but figured you might want to know about it and it might be an easy fix. I doubt my clients (the real users of Admin) care either :)

CORS Error when updating fields

When clicking on "save" in the modal filed, I get an endless loading state. The console contains errors due to CORS problems. The update file is loaded via http, not https.

admin-addon-media-rename.js?f14683cc7e:177 Mixed Content: The page at 'https://staging.feg-krems.at/de/admin/pages/aktivitaeten/kleingruppen/_gebetstreffen' was loaded over HTTPS, but requested an insecure resource 'http://staging.feg-krems.at/admin/update.json/task:AdminAddonMediaMetadataEdit'. This request has been blocked; the content must be served over HTTPS.
window.fetch @ admin-addon-media-rename.js?f14683cc7e:177
(anonymous) @ admin-addon-media-metadata.js?f14683cc7e:85
dispatch @ jquery-3.x.min.js?f14683cc7e:2
v.handle @ jquery-3.x.min.js?f14683cc7e:2
admin-addon-media-rename.js?f14683cc7e:177 
        
        
       Uncaught (in promise) TypeError: Failed to fetch
    at window.fetch (admin-addon-media-rename.js?f14683cc7e:177:18)
    at HTMLButtonElement.<anonymous> (admin-addon-media-metadata.js?f14683cc7e:85:9)
    at HTMLDocument.dispatch (jquery-3.x.min.js?f14683cc7e:2:43090)
    at v.handle (jquery-3.x.min.js?f14683cc7e:2:41074)
admin-addon-media-rename.js?f14683cc7e:177 
       Uncaught (in promise) TypeError: Failed to fetch
    at window.fetch (admin-addon-media-rename.js?f14683cc7e:177:18)
    at HTMLButtonElement.<anonymous> (admin-addon-media-metadata.js?f14683cc7e:85:9)
    at HTMLDocument.dispatch (jquery-3.x.min.js?f14683cc7e:2:43090)
    at v.handle (jquery-3.x.min.js?f14683cc7e:2:41074)
window.fetch @ admin-addon-media-rename.js?f14683cc7e:177
(anonymous) @ admin-addon-media-metadata.js?f14683cc7e:85
dispatch @ jquery-3.x.min.js?f14683cc7e:2
v.handle @ jquery-3.x.min.js?f14683cc7e:2
Promise.then (async)
(anonymous) @ admin-addon-media-metadata.js?f14683cc7e:87
dispatch @ jquery-3.x.min.js?f14683cc7e:2
v.handle @ jquery-3.x.min.js?f14683cc7e:2

I tried to figure out, what went wrong. I found in the php file on line 177:

'PATH' => $this->getAdminBase() . '/update.json/task:' . self::TASK_METADATA,

Here the function $this->getAdminBase() is used to get the root. I guess this should normally handle the protocol?!
I'm stuck. Is someone experiencing a similar error?

Improve UI closing behavior

Current behavior for Admin Addon Media Metadata v1.1.0 with Admin Panel v1.10.0-rc.14

When a user releases the mouse button outside the 'Edit metadata for media file' modal, it closes itself automatically and the added content is gone.
This happens for example, if someone marks the content of a text field for copy-paste and releases the button outside the modal.

One possible solution would be, if the modal only closes on mousedown instead mouseup events outside the modal.

Add option of page specific metadata forms

Currently the metadata form will show and edit data to the *.meta.yaml files according to the form definition in admin-addon-media-metadata.yaml, currently containing title, alt, and caption. This definition can be overwritten for the whole Grav installation by editing a copy of that file in /user/config/plugins/

I would like to be able to add page specific definitions of that metadata form which overwrite both of the above definitions.

Why would I want this?
In some of my Grav websites I use the *.meta.yaml files to store much more information for pages showing a collection of all added images.

A hint could be in Grav’s plugin tutorial: Merging Plugin and Page Configuration

No [mediafile].meta.yaml in page folder

If I understand well, the plugin should create a [mediafile].meta.yaml in the page folder of a blog post. So, for instance, if my image file is cat.jpg I should find these 3 files in the folder:
-cat.md
-cat.jpg
-[cat.jpg] meta.yaml and this file should contain something like this:

title: Cat playing with his toy
description: The other day, the cat got a new toy.
caption : Our cat playing with na new toy

But instead there is nothing like this. I saved both the media metadata window and the page and also cleaned the cache for images. Any other idea?

Values in the YAML file are missing single quotes

Hello,

first of all thanks for this plugin, which makes my life a bit easier. 😀

I tried to use a string like 'Photo: test' for an alternative text, but the YAML linter does not like colons in a value.
So I modified your code a bit to use single quotes for the values. If you are interested, I can submit a PR but I think it's better to checkout a develop branch first to merge modifications into it.

Cheers

Does not work with flex-objects

I have a flex-object config which uses folderStorage. When adding medatadata the plugin creates a folder in /user/pages with the name of the flex-object identifier and puts the meta json file there.

Any idea how to fix this?

here an excerpt of my blueprint

config:
  data:
    object: 'Grav\Common\Flex\Types\Generic\GenericObject'
    collection: 'Grav\Common\Flex\Types\Generic\GenericCollection'
    index: 'Grav\Common\Flex\Types\Generic\GenericIndex'
    storage:
      class: 'Grav\Framework\Flex\Storage\FolderStorage'

form:
  validation: loose

  fields:
    media:
      type: section
      title: Medien
      underline: true
      fields:
        images:
          type: file
          label: Bilder
          limit: 0
          accept:
          - image/*

No data

I've got this installed on Grav v1.6.26 with Admin v1.9.15 and the hover works fine for entering data, but nothing shows up in the code.

CleanShot 2020-06-18 at 19 35 11

CleanShot 2020-06-18 at 19 57 11

Flex-Objects broken when this Plugin is Enabled

When this Plugin is Enabled, Flex-Objects can't be edited via Admin-Panel.
Following Error ist presented when trying to access Flex-Object Page:

TypeError
Grav\Framework\Flex\Flex::getDirectory(): Argument #1 ($type) must be of type string, null given, called in /XXXX/user/plugins/admin-addon-media-metadata/admin-addon-media-metadata.php on line 385

Admin Addon Media Metadata v1.2.3
Flex Objects v1.3.6
Grav v1.7.45 - Admin v1.10.45

Disabling the Media-Metadata Plugin solves the issue

JS error with custom field names containing dots

I added a couple of display fields with a dot in their name to my metadata modal and they prevented the form saving.

When I investigated in the browser console, there's this jQuery error: Uncaught Error: Syntax error, unrecognized expression: [name=tip.alt].

If I was to guess the problem here, I'd say the dots needs to be escaped because they are being used as jQuery selectors.

This is easy enough to work around, but perhaps something to look at or at least a caution not to use field names with dots.

404 fetch error in JS console, seems not to break anything

When I worked around #20, I noticed a 404 error comes up in the browser JS console, trying to POST to https://<sitename>/admin/admin-addon-media-metadata//<page-path>/task:AdminAddonMediaMetadataEdit. This is in line 82 of the plugin's Javascript file, where a fetch happens.

Apart from the console message, it doesn't seem to break anything though. My metadata file saves fine and the UI seems to work smoothly.

The weird thing is that I can't see where the value of adminAddonMediaMetadata.PATH is set anywhere. The rename media plugin you sourced this from has the same code block, so possibly this code has just been copied and is not even needed??

Not a big deal, just FYI.

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.