Symphony.

Hi Nils, this was on the latest github pull of Symphony, Mediathek and Reference Link. It was using Safari 3.2.1, Firefox 3.1b2 and WebKit from yesterday.

I did not think that jQuery and Mootools interfered with each other either, but I don't have time right now to sift through it.

Regardless of my problems, this is a great extension - I was really, really, really looking forward to the features in the original Symphony 2.0 (now 3.0) and the replicating fields was the only one I find myself unable to live without. Your extension goes some way toward placating this need :) Well done!

You have to set jQuery to compatibility mode. Read the docs, I'm a MooTools user.

Just installed, and it looks super. One cosmetic problem though: When I click create new, the window that opens up contain a "full" Symphony backend user interface, with menu, sitename etc. In the screenshot in the first post in this thread, there is a stripped down version.

I'm on Symphony 2.0.1.

The way I intend to use this is just adding the images to the entry, but not inserting them into the content. Instead, add them to the rendered HTML by XSLT. I do this cause I want to create thumbnails that expand when clicking on them, with the help of Lightbox.

I have this working, but what would be a nice extra feature to Mediathek is a sort order setting on the entry level. As it is now, the images are sorted by system id, as it seems.

I have no idea on how this could be implemented, though...

Another idea: Would it be possible to add a tag field in the section that Mediathek links to, and make it an option to filter the Mediathek "widget" in the parent section by those tags? Would be helpful as the number of images grow.

I haven't found the time to upgrade to 2.0.1. I'll have a look at the styling problems and your suggestions over the weekend.

Just installed, and it looks super. One cosmetic problem though: When I click create new, the window that opens up contain a "full" Symphony backend user interface, with menu, sitename etc. In the screenshot in the first post in this thread, there is a stripped down version.

thoresson, I have upgraded to 2.0.1 and checked the Mediathek field. It seems to work fine for me. Is your website installed on a subdomain or in a subfolder?

Could you please check the following:

• Go to any entry in your backend.
• Append ?mediathek=true to the URL, e. g. /symphony/publish/article/edit/2/?mediathek=true
• Does the backend change appearance or does it look the same as before?
• If it looks the same as before, could you please check the source code if /extensions/mediathek/assets/mediathek.css has been added as stylesheet and if the URL matches the correct destination?

The way I intend to use this is just adding the images to the entry, but not inserting them into the content. Instead, add them to the rendered HTML by XSLT. I do this cause I want to create thumbnails that expand when clicking on them, with the help of Lightbox.

While creating the Mediathek field I had this in mind and my idea was to drag all images into the the main textfield and use <xsl:apply-template select="img" /> to change all images to thumbnails and add the needed extra markup for Lightbox. This way images could easily be reordered.

I have this working, but what would be a nice extra feature to Mediathek is a sort order setting on the entry level. As it is now, the images are sorted by system id, as it seems.

Well this is a good idea, but I don't see how this could work with the current behaviour of the Mediathek. The field shows only the selected items but these items are still part of an alphabetical list that can be expanded to show all available entries.

When talking about reordering items, you surely think of dragging items when the Mediathek is closed and only shows the selected entries. I like that part but how should the Mediathek behave, when the user reordered his selection and then opens the Mediathek to show all items (which should be in alphabetical order again). I'm open for ideas but at the moment I can't imagine a good workflow.

Another idea: Would it be possible to add a tag field in the section that Mediathek links to, and make it an option to filter the Mediathek "widget" in the parent section by those tags? Would be helpful as the number of images grow.

I was thinking about implementing a quicksilver-like search.

Nils, adding ?mediathek=true to the url doens't do any difference. The whole UI is still shown within the Mediathek "dropdown". The CSS is loaded as it should be. And yes, Symphony is installed in a subdirectory.

Could you elaborate on how you would use <xsl:apply-template select="img" /> to create thumbnails instead of showing the images inline?

My idead is to have a "Inline images" checkbox in by blog section. If not checked, the default, images are added in a div of their own, as thumbnails with links to Lightbox fullsize. If checked, images are shown where put in the textarea.

For ordering, it would for sure be nice with drag'n'drop. Perhaps the to different panes could switch between images already attached to the post and images not attached. Is there are good reason to have one pane with attached images, and one with all? Anyway, what I had in mind was just a numberfield or similar, with a sort priority. But that wouldn't be as smooth as a drag'n'drop of course.

Quicksilver as in the OS X utility?

> Nils, adding ?mediathek=true to the url doens't do any difference. The whole UI is still shown within the Mediathek "dropdown". The CSS is loaded as it should be. And yes, Symphony is installed in a subdirectory.

I'm sorry, I asked you to look for the wrong stylesheet. If you add ?mediathek=true, do you have /extensions/mediathek/assets/mediasection.css in the head of your admin page? And does it use the right root and subfolder before the /extension part?

> Is there are good reason to have one pane with attached images, and one with all?

Well, that's the way you select items with Mediathek. And technically speaking it's just one pane where some items are hidden or shown depending on the Mediathek status (open/closed).

> Could you elaborate on how you would use <xsl:apply-template select="img" /> to create thumbnails instead of showing the images inline?

Sure. First of all you need a textarea that uses a formatter that generates XHTML. If you drag your images to your body textarea you will get something like this in the XML:

<data>
    <events />
    <articles>
        <section id="2" handle="artikel">Artikel</section>
        <entry id="6" kommentare="0">
            <title handle="images-inside-the-body">Images Inside the Body</title>
            <body>
                <p>This is a normal paragraph.</p>
                <p><img src="my-image.jpg" alt="title of your image" /></p>
                <p>Another paragraph.</p>
            </body>
        </entry>
    </articles>
</data>

If you like to use your text in a template you normally would call it this way:

<xsl:copy-of select="data/articles/entry/body/*" />

Using advanced XSLT like Allen describes in this article, you could also use apply-templates:

<xsl:apply-templates select="data/articles/entry/body" />

Now you have to add a few templates to get things working as expected. First of all you want to keep your markup like p, h1 or other tags:

<xsl:template match="body//*">
    <xsl:element name="{name()}">
        <xsl:apply-templates select="* | @* | text()"/>
        </xsl:element>
</xsl:template>

This template matches any tag inside of body and return it with all its content. Of course you'd like to all the attributes like class names, too:

<xsl:template match="body//@*">
    <xsl:attribute name="{name(.)}">
        <xsl:value-of select="."/>
    </xsl:attribute>
</xsl:template>

This matches all attributes and adds them again to your elements. Until now, nothing special happend the two templates simply mimic the behaviour of copy-of. But with these setup you can manipulate any element you'd like to match, e. g. all your images. As we'd like to have a thumbnail linking to the full size image, we have to match all images:

<xsl:template match="img" priority="1">

</xsl:template>

Because <xsl:template match="body//*"> also matches all images, we have to set priority=1 to manipulate images in a different way. Now we have to return a manipulated image inside a link:

<xsl:template match="img" priority="1">
    <a href="{@src}">
        <img src="{$root}/image/2/50/50/5/{substring-after(@src, $root)}" width="50" height="50" rel="lightbox" alt="{@alt}">
    </a>
</xsl:template>

In the end this should return:

<p>This is a normal paragraph.</p>
<p><a href="my-image.jpg"><img src="/image/2/50/50/5/my-image.jpg" width="50" height="50" rel="lightbox" alt="title of your image" /></a></p>
<p>Another paragraph.</p>

I haven't tested the code above, but theoretically it should work.

Nils, I had saved that css-file with a .php extension. Thanks for helping me.

OK, this is probably a stupid question but for those of us who don't know, how do I reference the images?Right now my XML looks like this:

<gallery-images count="2" related-section-handle="media" related-section-id="14">
     <item id="118">118</item>
     <item id="119">119</item>
</gallery-images>

There's an image title, description, and the image itself. However, none of this shows up in my XML and because of this I have no idea how to reference it.

(For the life of me I have no idea how you wrap XML in code tags on this forum...)

(For the life of me I have no idea how you wrap XML in code tags on this forum...)

It's all Markdown! So you may simply indent any code examples by one tab or four spaces.

To answer your question in short: you need to add a second data source containing all your media entries that you can match with the XML above using the ids. I first was thinking of integrating the title and path of the connected media but dropped that as I this resulted in long loading times of the data source. But I'll have a look at it and try to come up with a more comfortable solution.

Thanks. Any help with my XSLT issue?

(edit) Ah, I'd completely forgotten you can use multiple data-sources. It'll take some fancy coding but I think I can make it work now. Thanks!

Version 1.1, 16th February 2009

I just updated the code on github: Download version 1.1

Change Log

- [fixed]   Data sources will return file information instead of IDs
- [fixed]   Allow multiple Mediathek fields in the same section
- [added]   Option to toggle between single or multiple select mode
- [added]   Allow data source sorting for single select Mediathek fields
- [added]   Search functionality
- [added]   Tag and category filter
- [added]   Option to toggle entry overview information (file name or file count)
- [added]   German translation
- [removed] File count for opened and closed Mediathek

Update (version 1.0 to 1.1)

1. Deleted the old "mediathek" folder in your Symphony "extensions" folder and replace it with the new one in this archive.

2. Update your database by enabling the "Field: Mediathek" under "Extensions" in your Symphony backend (see installation, section 2).

3. IMPORTANT: Go to each section that uses a "Mediathek" field and resave it. Otherwise the extension will stop working!

4. PLEASE NOTE: Be aware that due to some changes in the data source output (see change log) your XSL templates will need some tender love and care.

As there have been a few changes that affect the database, I advise everyone to first try this update on localhost and not on a live site!

Nils, this looks great! Will take a close at it later this week.

Version 1.1.1, 20th February 2009

Small improvement: It is now possible to exclude certain tags or categories from the field settings (Filter by Tags or Categories).

Example 1

people, friend, -family

This will force Mediathek to only show entries belonging to the tags/categories people or friends but not to family.

Example 2

-family

This will force Mediathek to show all entries except those tagged with family

Example 3

people, friends

This will force Mediathek to show all entries tagged with people or friends.
Leaving the input field blank will return all entries of the related section.

Download version 1.1.1 at GitHub.

Nils, found a small typo: "Choise" instead of "Choice" in the Mediathek field when editing entries.

The search function, would it be possible to have that work on tags added to the images?

Thanks for making this extension.

Nils, found a small typo: "Choise" instead of "Choice" in the Mediathek field when editing entries.

I thought I corrected this ealier. I'll have a look at it the next days.

The search function, would it be possible to have that work on tags added to the images?

At the moment this is not possible as the search relies on the values of a hidden select box which does not contain any tag information. It might be possible with some ajax magic but I do not have any plan to implement this soon.