Work Package #45003

Media Browser

Added by Sebastian Kurfuerst over 2 years ago. Updated almost 2 years ago.

Status:Accepted Start date:
Priority:Should have Due date:
Assigned To:Christian Müller % Done:

90%

Category:Content Editing Spent time: 101.17 hours
Target version:1.0 beta 1

Description

Media Browser for Images and Files

  • Target Audience: users who deal with files and images
  • Responsible: Christian Müller <christian (dot) mueller (at) typo3 (dot) org>
  • Implemented by: Christian Müller, Karsten Dambekalns, Markus Goldbeck
  • Amount: 25 work days
  • Version: must have for 1.0
  • Planned Implementation Timeframe: March - April 2013

Motivation

Neos users need a way to organize images and files to have them reusable in content as content images or downloads. They want to preview the images they need and probably want to search in their available files.

Goal

Create a basic solution for organizing files in Neos which has a simple way to upload new files and browse already uploaded files.
The solution should be usable in Neos content view as well as in Neos Backend modules and other places of the system. That means we need to extend the TYPO3.Media package and do not create dependencies on Neos in order to have this media browser usable in Flow applications as well. Images should be visible as a thumbnail gallery. Users should be able to categorize files (tagging) and search by those categories.

Deliverables

  • MUST: AbstractMediaFile Model -> Image and (to be created) Document model extend that
  • MUST: MediaFile Repository to find existing files and images
  • MUST: Media browser (UI) to see existing files and images in the system as independent Flow application
  • MUST: Uploads in media browser
  • MUST: Image preview in media browser
  • MUST: Tag Modelling and relations to files
  • MUST: documentation for users of the media browser and developers that want to use the media browser in Neos modules or Flow applications.
  • MUST: Integration to Neos content view
  • COULD: hierarchical tags
  • COULD: search
  • COULD: endless scrolling
  • MAYBE: Metadata Model and relations

typo3neos-distribution-base-45003.pdf (4.7 kB) Sebastian Kurfuerst, 2013-02-16 15:12

Mediabrowser.pdf (136 kB) Christian Müller, 2013-03-25 11:02


Related issues

related to TYPO3.Neos - Task #45972: Improve error handling occurring during image upload Closed 2013-03-02
related to TYPO3.Media - Feature #47262: Easily extending the Image Model Resolved 2013-04-15
related to TYPO3.Media - Feature #47428: Provide Asset base class Resolved 2013-04-22
related to Base Distribution - Task #48072: Remove image from image property Closed 2013-05-08
related to TYPO3.Media - Feature #49137: Filesize and last modification date should be available f... Under Review 2013-06-14
related to TYPO3.Flow - Task #36800: Streamline Resource object API Accepted 2012-01-26

Associated revisions

Revision 4a62c910
Added by Karsten Dambekalns about 2 years ago

[TASK] Remove version and add license to composer manifest

Change-Id: I2b5dc852919945e92de66cafbe762202f639db65
Related: #45003

Revision 6a69ac3f
Added by Karsten Dambekalns about 2 years ago

[FEATURE] Add Asset classes and adjust Image

Adds a base class and an interface for assets. The Image is adjusted
to use this and classes for Document, Video and Audio are added.

A new AssetRepository allows retrieval of assets.

Change-Id: I53af34412768f2e51e952d212218299ac124487f
Resolves: #47428
Resolves: #47262
Related: #45003

Revision 2f782da5
Added by Karsten Dambekalns about 2 years ago

[TASK] Update to Bootstrap 2.3.2 (from 2.2.2)

This updates the default bootstrap version from 2.2.2 to 2.3.2.

Change-Id: I67e3d7a87154e1aceded45c197c3d9f2eb69e26a
Related: #45003

Revision b3aec076
Added by Karsten Dambekalns about 2 years ago

[FEATURE] Add jQuery 1.10.1 and 2.0.2, allow version choice

This adds versions 1.10.1 and 2.0.2 of jQuery in addition to the
existing version 1.8.2.

A new option "jQueryVersion" to the IncludeViewHelper allows to choose
a version, the default is 1.8.2 to keep behaviour.

Change-Id: I56a53911685aeaefe8f8ca4d45d17ad510d4f6cb
Related: #45003

Revision b11640d3
Added by Karsten Dambekalns about 2 years ago

[FEATURE] Add Tags for Assets

This provides basic tagging for assets.

Change-Id: I31cfd84f5c1a874fe3699f5b59431fd03bef4360
Related: #45003

Revision 030b8986
Added by Karsten Dambekalns about 2 years ago

[FEATURE] Asset admin UI

A rather basic UI to upload and edit assets.

Change-Id: Ic4ec1e85708ba02437bb95b885d458fb010fbd57
Related: #45003

Revision 4d47ee95
Added by Karsten Dambekalns about 2 years ago

[FEATURE] Upload assets using drag and drop

In the asset list view assets can be uploaded by dragging them to a
upload drop zone.

Change-Id: Idcf39aace12a2217e495b8a3c814ecd314932a1f
Related: #45003

Revision 775d4016
Added by Karsten Dambekalns about 2 years ago

[TASK] Enable multi-file upload via drag and drop

Enables upload of multiple files by dragging them into the browser.

The drop zone is moved and styled to be more prominent.

Change-Id: I502b5258d4a17cd693fd5612aa3e21003d62202b
Related: #45003

Revision 42d1920b
Added by Karsten Dambekalns about 2 years ago

[TASK] Add caption and lastModified to Asset class

Asset instances now have getCaption() and getLastModified() methods.

Change-Id: I42689229335d58ff455defbc9f81231fa49e19f0
Related: #45003

Revision c90e8f34
Added by Karsten Dambekalns about 2 years ago

[FEATURE] Admin UI improvements (tag handling, thumbnail view, …)

Tags can now be assigned to assets and assets can be viewed by tag.

Also adds some missing fields to the asset upload form (when not using
the drag-and-drop upload), provides a thumbnail view, tweaks the list
view and makes assets and tags sorted by title/label by default.

Change-Id: I13de3764b30ee38aff7cdf87d70d61a50e015015
Related: #45003

Revision cafe8cb3
Added by Christian Müller about 2 years ago

[FEATURE] Integrate Mediabrowser into Neos, get rid of popovers

Make sure to add the corresponding change to TYPO3.Media as well.

Instead of popovers, we now use sliders for HTML editor, the media
browser and the cropping.

The secondary inspector is not yet fully styled, but already works
functionality-wise.

Furthermore, this change removes all popover styles from CSS.

Change-Id: Idc89d47cb2e55098efd151d848fd0b8972f30f5c
Related: #45003
Reviewed-on: https://review.typo3.org/21848
Reviewed-by: Sebastian Kurfuerst
Tested-by: Sebastian Kurfuerst

Revision f6bc30d6
Added by Sebastian Kurfuerst about 2 years ago

[FEATURE] Integration of Media Browser

Change-Id: I5e94204c80133d6fe45ad73b92dc091f402bf469
Related: #45003
Reviewed-on: https://review.typo3.org/21849
Reviewed-by: Sebastian Kurfuerst
Tested-by: Sebastian Kurfuerst

Revision a38abd53
Added by Karsten Dambekalns over 1 year ago

[FEATURE] Configurable tags and tag assignment

Adds creation and deletion of tags as well as the allowing dragging and
dropping an asset onto a tag on the left side tags to that an asset.

Change-Id: I285aed5ccec47be1700d3bb0cd8c186f8e9e844a
Related: #45003
Releases: master, 1.0
Reviewed-on: https://review.typo3.org/21445
Reviewed-by: Aske Ertmann
Tested-by: Aske Ertmann

Revision cd9baf72
Added by Karsten Dambekalns over 1 year ago

[FEATURE] Configurable tags and tag assignment

Adds creation and deletion of tags as well as the allowing dragging and
dropping an asset onto a tag on the left side tags to that an asset.

Change-Id: I285aed5ccec47be1700d3bb0cd8c186f8e9e844a
Related: #45003
Releases: master, 1.0
Reviewed-on: https://review.typo3.org/26143
Reviewed-by: Karsten Dambekalns
Tested-by: Karsten Dambekalns

History

#1 Updated by Sebastian Kurfuerst over 2 years ago

  • Subject changed from Media Browser to [WIP] Media Browser

#2 Updated by Sebastian Kurfuerst over 2 years ago

  • Target version changed from 1.1 to 1.0 beta 1

#3 Updated by Christian Müller over 2 years ago

  • Subject changed from [WIP] Media Browser to Media Browser

#4 Updated by Christopher Hlubek over 2 years ago

Do we want hierarchical tags or a folder structure for assets? IMHO a folder structure should be the base organization since it is a very well known principle for most users. Tags or categories could then add another dimension.

We certainly need some kind of mockup sketching (e.g. Balsamiq) before implementing the UI or model to get a feeling how users should interact with assets.

#5 Updated by Christian Müller over 2 years ago

@Christopher we discussed that during the codesprint and came to the conclusion that tags (with hierarchy) can fill the role of folders (besides the possibility to have a file in multiple tags). As I suggested folders too I am not against it, but we would have to convince Robert and Sebastian that they are needed. I see the same point of "well known principle" but I think these days people are used to seeing web apps that work with assets in a different way (like Flickr).

#6 Updated by Sebastian Kurfuerst over 2 years ago

for me, nested tags are simply some kind of "folder", so I think that'd be more general than folders. But we can of course have an option to prevent adding more than one (folder-)-Tag to a node, effectively creating a folder structure :)

#7 Updated by Sebastian Kurfuerst over 2 years ago

  • Status changed from New to Accepted

#8 Updated by Sebastian Kurfuerst over 2 years ago

Has been discussed with Jan-Hendrik from the EAB on 12.02.2013; and has been accepted on 15.02.2013 by the EAB.
(The attached PDF is a snapshot of this work package at the time of acceptance.)

So, Christian, you can schedule this work package in your day-to-day calendar and implement it then -- can't wait to see it in Neos 1.0 :-)

Another side-note: Please do not forget to add comments to this work package and update "% done" while you are working on this package.

Greets, Sebastian

#9 Updated by Sebastian Kurfuerst over 2 years ago

  • Estimated time set to 150.00

#10 Updated by Christian Müller over 2 years ago

What we show in the mockup and want to do:

- Media files model (need a common base model, images are one example for more specialized models), base behavior include tagging, name, date?
- Tags are hierarchical categories to sort media files into, basically they have just a name. For easier recognition color and icon could be added. Files can be added to multiple tags. Later "smart tags" like smart folder could be implemented that offer files based on preselected criteria. Tags can also be favorited by users for faster access.

There will be two views in the mediabrowser, both share the sidebar and topbar.
Sidebar includes tag hierarchy, favorite tags and common/global actions and links, additionally we need a untagged/unsorted meta-"tag"
Topbar includes actions directly related to files, so a search/filter, operations for selections (like delete selected) and upload
Main view is a more image centric view with thumbnails and alternatively a plain file list (both offer infinite scrolling)

Media files can be added to multiple tags, the "delete" action will remove the file from the currently selected tag! Implement soft delete and implement real deletion later (Only if a file is removed from all tags it can be deleted from the untagged list of files (later on this removal from tags and unconnecting from content could be offered)). To add a file to a tag you drag the file from the list to the tag.
Multiselection of files should be possible together with batch actions on the files.

The scetched application should work standalone and in other application context. To improve interoperability I suggest working only with (RESTful) services so another UI could access functionality as well (think mobile app)

Search for now will be a simple string based filter on the file list, later some more sophisticated filtering can be added.

Files can have actions attached which should be extensible if someone later wants to add more actions.

Questions / Implementation details not yet discussed

Tag sorting/order
Can the application be used in the same way for selecting files and giving selection back to parent application (Neos image content eg.) or do we need a subset as file selector for that?
Sorting in "image view"?

#11 Updated by Christian Müller over 2 years ago

  • % Done changed from 0 to 10

#12 Updated by Christian Müller over 2 years ago

  • Due date changed from 2013-04-30 to 2013-05-20
  • % Done changed from 10 to 20

Setting the Due date a bit later as we are behind schedule currently and want to use the Neos sprint for integrating the solution together.

#13 Updated by Sebastian Kurfuerst about 2 years ago

At the beginning, there were some coordination issues (people waiting for each other, deadlock), but that is solved now.

Current state as discussed with the team:

  • Concept is done (see attached wireframes)
  • TODO: discuss the concept wireframes with Rasmus
  • Domain Model is developed inside a fork at https://github.com/mgoldbeck/TYPO3.Media
  • DONE: standalone Upload, List View, Tagging
  • TODO: standalone image preview
  • TODO: integrate this module into backend (based on Views.yaml change)
  • TODO: write Content Module inspector editor (biggest chunk)
  • TODO: the changes from the fork will be pushed to review until 24th of May
  • next update-meeting will happen on 07. June 2013 08:30 until 09:00. Goal is to have the Content Module Inspector in the review by then, effectively having the whole thing in the review.

#14 Updated by Sebastian Kurfuerst about 2 years ago

  • Due date changed from 2013-05-20 to 2013-06-07

#15 Updated by Christian Müller about 2 years ago

  • % Done changed from 20 to 30

#16 Updated by Sebastian Kurfuerst about 2 years ago

Meeting with Christian, Sebastian on 10. June 2013, 12:30

Current state as discussed with the team:

  • TODO: standalone image preview (Karsten)
  • TODO: integrate this module into backend (based on Views.yaml change) (Karsten)
  • TODO: write Content Module inspector editor (biggest chunk) (Karsten + Christian; in the week until 14. June)

Summary: we are a little later than expected, but still make progress here.

next update-meeting will happen in a week on 17. June 2013 12:30 until 13:00. Goal is to have the Content Module Inspector in the review by then, effectively having the whole thing in the review.

#17 Updated by Robert Lemke about 2 years ago

  • % Done changed from 50 to 70

#18 Updated by Christian Müller almost 2 years ago

  • % Done changed from 70 to 90

Also available in: Atom PDF