Symphony.

A new extension, “Subsection Manager” is now available for download. Comments and feedback can be left here but if you discover any issues, please post it on the issue tracker.

What’s this?

Subsection Manager will be the successor of Mediathek featuring a new interface. Hopefully the new name will make more clear what this extension is about.

Please be aware: This is a beta release for testing purpose only. Do not use it in live environments!

Installation

This extension consists of three components:

• Subsection Manager
• Stage
• Draggable

You can either download all components from GitHub manually. In this case you need to add Stage and Draggable to /extensions/subsectionmanager/lib/. Or you can grab the Subsection Manager repository via Git directly which implements Stage and Draggable as submodules.

Features

Subsection Manager more or less offers the same features as Mediathek but with an interface tailored for Symphony 2.0.7. It will not work in Symphony versions lower than 2.0.7.

• Inline subsection management
• Image and file preview
• Inline editing of subsection items
• Inline creation of subsection items
• Sorting of subsection items
• Dragging of subsection items into textareas (using either Markdown, Textile or HTML syntax)
• Custom subsection item captions
• Custom subsection item filtering

Help testing

It would be great, if you could test this extension. Try to break it. Find bugs. Do crazy stuff with it. And please report back here in this thread.

Screenshots

Search:

Inline item editing:

Inline item creation:

Drag and drop:

I found another wee little bug. If you specify an HTML element in the caption and then drag it into a text box it will add all of the caption except that which is in the HTML element.

An example would be if you made your caption <strong>{$title}</strong> — {$description} only — {$description} would show up when you dropped it into a text area.

I should also mention that aside from this everything else seems 100% stable in everything I’ve checked. I’ll do a browser run-through later tonight.

I found another wee little bug.

Well, consider this as a feature ;)

The default caption is {$firstfieldthatisnotanuploadfield}<br /><em>{$firstuploadfield}</em>. I currently remove all elements in the caption as otherwise this default caption will result in this drop text which does not look nice:
My first title/images/my-first-image.jpg.

Any ideas how to handle the indefinite markup options in the caption?

I should also mention that aside from this everything else seems 100% stable in everything I’ve checked.

That sounds great :)

I’ll do a browser run-through later tonight.

Thanks a lot!

By the way: The final version will feature an updater which will import Mediathek items.

It would be great if someone with a large image section could test the performance of the manager.

Well, consider this as a feature ;)

All the best bugs are!

I’m not really clear why it is you’re removing anything inside the HTML markup?

Would it not be easier to add the default be the first non-upload field only? That way if someone doesn’t specify they just get a basic text string but if they do specify they can have whatever they want without you having to worry about it.

Would it not be easier to add the default be the first non-upload field only?

It just looks better with a longer, two line caption ;)

Maybe adding a space after the br tag in the default caption will help and then just use item.text() in the JavaScript without removing any elements. Your caption would then become {$title} — {$description} after dropping.

I’m not really clear why it is you’re removing anything inside the HTML markup?

Check out the latest commits for Draggable and Subsection Manager.

I seem to still occasionally be getting the JS error for the offset being null:

Error: item.offset() is null
Source File: http://symphonytest.designbyadmiral.com/extensions/subsectionmanager/lib/draggable/symphony.draggable.js
Line: 83

It appears to happen when an entry refuses to drag. I’ve been able to do it consistently by clicking on the background element, so not on the image or the text. It helps if you do it in the area below the text, near the edge.

The drop functionality now works as expected.

This looks amazing, thank you so much Nils for taking the time for this. Having a stable subsection extension is going to be a massive benefit.

I’ve got a current project that I really want to try this on, but I’ve yet to update Symphony to 2.0.7 because of the bugs. But once 2.0.8 is out, I will upgrade and give this a whirl. The site isn’t due for launch for a few months, so I’m hoping I can give it a good test.

This is boooootfifull work! Congrats

I only really have one thing to say about this: These are some hot tamales, Nils!

Do I read this right and imagine that this could be used to create a portfolio style page with categories based on subsection manager options? Or am I dreaming?

Nils, do you prefer bug reports on the Symphony extension issue tracker or on GitHub?

As long as this site does not support notifications I’d prefer GitHub bug reports. Thanks!

Do I read this right and imagine that this could be used to create a portfolio style page with categories based on subsection manager options?

Uh? Not sure what you mean …

This is only a feature request.

If you use a file upload field and edit an existing file using the inline editor, there will a blue link to the file (which normally allows to see the file in the browser). If you click on this link in Subsection Manager’s inline editor, the image will be loaded as well — but at the same time the “drawer” will be closed. Anyway it wouldn’t make too much sense to display the image (or PDF file, maybe) in the small inline editor.

So what about adding a “target=_blank” to those file links using JavaScript?

That’s a good idea - I have to think about a working implementation though.

Instead of opening it in a new window why not a lightbox? That implementation would be better as it doesn’t open new windows or move you off of the current page. Bonus is since this plugin relies on JS to work adding another feature that uses JS wouldn’t add any further issue in terms of accessibility.

First of all a big thank you to Michael who has reported a lot of bugs or misbehaviours on GitHub. I’ll go through these issues over the next days. This extension is quite complex so there will definitely be more issues so please keep me posted if you’re running into trouble.

There are a few things it would be great to have some helping hands for:

• Subsection Manager has to modify the styles of all fields that are shown inside the inline editor. While there are a few styles for the main fields, most fields will not be styles properly yet. One important field that’s styles are missing is the Subsection Manager itself — or to be more precise Stage which is used to build the framework of this field and which will be used for the Date and Time field soon, too. If someone likes to contribute some styling this would be more than welcome.
• Some fields — like the above mentioned upload field — need special JavaScript treatment when used inside a Subsection Manager field. If someone could provide a list of other affected fields this would be great.
• Some JavaScript functions are not in their apropriate place yet (e. g. the drop interactions should not be part of Draggable but of Subsection Manager itself). So there is need for code clean up (consistent variable and function naming is a part of this as well). If someone likes to help with this task, please contact me.
• The field lacks documentation (user documentation and code documentation). I someone like to help writing documentation please contact me as well.

Thanks!
Nils

Some fields — like the above mentioned upload field — need special JavaScript treatment when used inside a Subsection Manager field. If someone could provide a list of other affected fields this would be great.

What exactly are you referring to? Opening links outside of the iframe? I am not sure if it such a behavior should be depending on the field type (or name). It should probably be rule-based. Couldn’t we find some rules like “Links within fields will be changed to open in a new window resp. lightbox”?