Advice on Dynamic XML File for HTML5 Multimedia Gallery

[wjkaluza]

I am building my first website with processwire, but of course I am starting with a relatively complex site for an entertainment booking agency.

Before I spin my wheels for several days or weeks, I am seeking advice on the best approach to create a dynamic xml file that will contain file paths for different sized jpg files for images, mp3 and ogg files for audio, and mp4, webm and ogv files for video to play natively in various browsers within responsive pages that will adapt to the device on which they are displayed.

Most of my experience is with Dreamweaver, and I know how to do this with static pages because there would be a unique xml file for each static page.  However, creating a static page for each artist on a roster of 200 that is growing monthly is not practical.  I've looked at several content management systems and have concluded that I want to invest my time in the one I consider the best--processwire.  So here I am asking for help.

I note that something similar has been done with the module Local Audio Files-MP3-DB by horst, but I'm not sure that is the best approach here because I will likely have an average of only 20 jpg files and 5 of each of the other file formats for each performing artist on this website.   The key is that I must create a unique xml file for each of at least 200 artists that will reference their unique works.

I would appreciate any suggestions either on what to try or what not to try so that I can avoid wasting time on "blind paths".  If it helps to visualize my objective, you can view a template of an artist's page at http://www.book-entertainer.com/rob-garrett/.

I know all of your time is valuable, but I am just not sure where to start.

Thank you.

Bill

[diogo]

Hi wjkaluza. It's certainly possible to build the XML files in PW, but I'm wondering why you want them. You can build your pages normaly in PW and get all the raw data that you want from them, including raw files. Unless there is some hidden reason, I really don't see why you would build these XML files for one site that you will build yourself (not as an API to serve other sites).

As an example: each group of files (mp3/ogg) (mp4/webm/ogv) could be a page (or repeater field) with two or three file fields under a common parent:

- audio files

-- audio 1 (mp3 and ogg files)

-- audio 2 (mp3 and ogg files)

-- audio 3 (mp3 and ogg files)

- video files

-- video 1 (mp4, webm and ogv files)

-- video 1 (mp4, webm and ogv files)

-- video 1 (mp4, webm and ogv files)

You can then, reach them directly with the API or by using page fields on other pages.

$myAudio = $pages->get(123) // reach the audio directly with the ID of the page

$myAudio = $page->audio // or via a pageField on any other page
 

To put a song on your page, you could do this, for example:

<audio>
    <source src="<?php echo $myAudio->mp3->url; ?>" type='audio/mpeg; codecs="mp3"'>
    <source src="<?php echo $myAudio->ogg->url; ?>" type='audio/ogg; codecs="vorbis"'>
    Get a new browser, will you?
</audio>
 

This is just an example, there are many other ways to do this in PW.

Edit: Another way would be to create a new fieldType that would allow the editor to upload one file in one of the formats, and convert it automatically to the other using something like FFmpeg https://github.com/alchemy-fr/PHP-FFmpeg

[wjkaluza]

diogo,

I very much appreciate your assistance and your excellent ideas.  In this case, the reason I want to build an xml file is because the display engine I am using to present the image, audio and video files is fed by an XML file. 

As you might note from my artist template at  http://www.book-ente...om/rob-garrett/ , this is a multimedia gallery in which the form of presentation is as important as the content.  The display engine incorporates a responsive design with touch-screen support, filters that allow visitors to browse thorugh a large number of artists by music genre and two modes of presentation.

I don't want to rebuild that engine so I would like to feed it with the xml file it is expecting.

I thought that I could create a child page for each artist in which page I would have a field for each format of each image, a field for each format of each audio file, and a field for each format of each video file.  Unfortunately, I have not yet figured out how to create an xml file within processwire with a fixed path from the parent artist page.

I am continuing my research, but I am looking for direction from those who understand processwire's options much better than I do at this point.

Again, I wish to express my deep appreciation for your assistance.

Bill

[diogo]

Makes sense to me. In that case you can create those child pages with the formats, and on that page template create the xml file as you would create an html file just making sure that you tell the browser that this is an xml file. You can do it like this:

<?php
header ("Content-Type:text/xml");
?>

<?xml version="1.0" encoding="UTF-8" ?>

<xml_content>

</xml_content>
 

And inside the xml content, just use processwire tags normaly:

<audio>
    <ogg_file><?php echo $page->ogg->url ?></ogg_file>
    <mp3_file><?php echo $page->mp3->url ?></mp3_file>
</audio>
 

[wjkaluza]

diogo,

You have been a great help and have saved me a considerable amount of time.  Thank you.

I'm almost there because I have the xml file created, and it is properly displaying the path names.  After considerable effort today, I am left with three questions, probably because of my lack of experience with processwire. 

1. The following line displayed a syntax error in Dreamweaver: <?xml version="1.0" encoding="UTF-8" ?>  When I attempted to view the page in processwire, I received the following error: Parse error: syntax error, unexpected T_STRING.  I can not find a syntax error in the line.  When I searched online for a solution, I discovered that xml version 1.0 and UTF-8 encoding are the default settings so I reluctantly deleted the line and the errors disappeared. Please advise if you notice a syntax error; otherwise, I will leave the line out until I get my media engine working.

2. The line <thumb><?php echo $page->image1_source->url  ?><thumb> returns the url to the file on the server, but I need the full path.  When I substituted "filename" for "url", I expected to return the full path, but it returns nothing.  Is it interpreting <thumb> (which is required by the display engine) as a second file so it cannot process filename and return the full path?  Is there a workaround?

3. The javascript file called by the parent's template needs the relative path to the child xml file, and I don't know how to designate a relative path in a php environment because I have only worked with static files.  Is there a way to do this in processwire?

I very much appreciate your assistance, and I hope these will be my final questions.

Bill

[diogo]

1. oh, makes sense... the line starts with <? so php must be trying to parse that. I don't know how to escape it, and don't have time to look for it now, so try simply this:

<?php echo '<?xml version="1.0" encoding="UTF-8" ?>'; ?>
 

2. you need the path of the file on the server, or the absolute url?

3. See on the default site that comes with your PW install how this is done. Open the file head.inc, and see how javascript and css files are called there.

edit: thanks kongondo

[kongondo]

Small typo head.php should be head.inc

[wjkaluza]

I thank you both for directing me to head.inc because I like to figure out as much as possible for myself.  However, I had already figured out how to correctly call the javascript and css files which are working fine.  My challenge is different.

The path to the child xml file is not specified in the parent html file.  Rather, it is specified in a javascript file that is called by the parent html file.  The path to the javascript file is static, but the path to the child xml file is dynamic so the relative paths between these files is dynamic.

I could solve the problem by creating a static location for all of the image, audio and video files for the site that I could hard-code into the javascript file, but that would mean that I would have thousands of very large files in one folder which seems less than ideal.  This was the reason that I wanted to create a child xml file for each of the several hundred parent html files I will create for individual artists.

The other thought I had was to edit the javascript file when it is called by the parent html file by specifying the path to the child xml file at the time of the call, but I don't know if that is possible.

I would appreciate any suggestions or advice.

Bill

[diogo]

You can provide a javascript variable to the javascript file by setting it in a <script> tag before including it. Like this:

<style>
     var myXmlPage ='<?php echo $xmlPage->url; ?>';
<style>

<script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/main.js"></script>
 

If you plan to provide more variables, you can create an object, so you don't overpopulate your global scope.

<script>
    var myVariables = {
        xmlPage: '<?php echo $xmlPage->url; ?>',
        xmlPageTitle: '<?php echo $xmlPage->title; ?>'
    };
</script>
 

[wjkaluza]

Thank you, again.  I am making progress, but I'm not quite there.  I worry that my logic or syntax is off.  I tried to insert a write function in the php file to write the contents of the global variable ccgalleryXMLpath to see if I had the correct path in the global variable before passing it to the javascript file, but I am seeing no result.  Not sure if the variable definition is wrong or if the write function is wrong because I'm not that familiar with javascript.

In artistlandingpage.php, I included:

<script>

     var ccgalleryXMLpath ='<?php echo $page->child->path?>';

     document.write(ccgalleryXMLpath + "<br>"); </script>    

    <script type="text/javascript" src="<?php echo $config->urls->templates?>artistlandingpage/js/jquery.ccgallery.js"></script>

 

In jquery.ccgallery.js, I included:

     xmlFile           = $('#ccgalleryXMLpath'),

 

I realize that without reviewing entire files it is difficult to provide an opinion, but do you see a problem with the logic or syntax?

 

Thank you.

 

Bill

[diogo]

xmlFile           = $('#ccgalleryXMLpath'),

You can't do this. jQuery's $() lets you select elements from your html tags. I'm not sure what you are trying to do here, but what you wrote above will look for an element with the id 'cgalleryXMLpath'

<div id='cgalleryXMLpath'/>

Not what you want, I presume.

I also see that you are using document.write() above. Not ideal, but I'll try to ignore that, since you have all the code written already. That tells me that you are putting this script element somewhere inside the body, but you have to make sure that the variable 'cgalleryXMLpath' is set before the external javascript file is incuded.

[wjkaluza]

Diageo,

 

Thank you again for all of your help.  I will likely be using this page more than 200 times in my website so it is definitely important that I get this to work.  However, I don't want to wear out your patience because I know you have much other work to do so I am researching for several hours each time before I post.

 

In line 10 below, I have addressed the first issue you mentioned.  I must have been tired and just followed the format from the previous lines because I was not attempting to refer to an element with the the id 'cgalleryXMLpath' --as you presumed.

1. jQuery(function($){
2.     var $ccgallery        = $('#ccgallery'),
3.         $thumbGallery     = $('#thumbGallery'),
4.         $thumbList        = $('#thumbGallery').find('ul'),
5.         $coverList        = $('#itemList'),
6.         $coverflowGallery = $('#coverflowGallery'),
7.         $coverContainer   = $('#coverContainer'),
8.         msie              = navigator.appName.toLowerCase().indexOf('microsoft') != -1,
9.         ie9js             = msie && parseFloat(navigator.appVersion.split('MSIE')[1], 10) < 9 && IE7.recalc ? true : false,
10.         xmlFile           = ccgalleryXMLpath,
11.         ccAutoplay        = $ccgallery.data('autoplay') === true ? true : false,
12.         ccLoop            = $ccgallery.data('loop') === true ? true : false,
13.         storeVolume       = $ccgallery.data('storeVolume') === true ? true : false,
14.         newWindowLinks    = $ccgallery.data('newWindowLinks') === true ? true : false;

 

With respect to your second concern about the use of document.write(), please understand that was a quick insert into the code so that I could check the contents of the global variable ccgalleryXMLpath while I am coding only.  Line 4 below will be deleted before I publish.

 

1. <!-- start ccgalleryXMLpath definition -->
2.     <script>
3.         var ccgalleryXMLpath ='<?php echo $page->child->path?>';
4.         document.write(ccgalleryXMLpath + "<br>"); </script>
5.      <!-- end ccgalleryXMLpath definition -->

Unfortunately, I still am not getting the information I want into the global variable, ccgalleryXMLpath, because it does not include the filename with .xml extension.  I have studied the Cheatsheets and read through many posts on the forums regarding using rtrim to remove the trailing slash, but how do I add the extension to the filename?

Bill

 

[diogo]

Hi Bill, You can simply add the .xml part in the name of the page. PW will accept it gladly.

What I still don't understand is why you use $page->path instead of $page->url. javascript can't access your computer folders, it only works with urls... or am I missing something?