Integrating photos with wrapper folders and JS/XML dependencies

[Peter Knight]

I'm redeveloping my photography site in PW.

Most of the "photos" are 360 degree views so they're not single JPGs as such which I can manage traditionally in PW and add to a page.

Each photo gets generated by a separate application which then outputs a wrapper folder for each photo.

So I might have a photo called Beach01 and the corresponding Output folder contains

-images (folder)
-index.html
- pano.xml
- pano-player.js
- skin.js
- tiles (directory containing multi-resolution images)

It's early days but I've uploaded a few of these wrapper folders onto my server.

I've then created a PW page called Beach01 and I can embed the 360 image onto the page using an iframe called from a HannaCode.

It works well but I know it's not very scalable.

I don't really know what I'd like but I'd love to have some kind of PageSelect field that could I could point at a server directory (Beaches01 etc) instead of  using HannaCodes and iFrames.

Any high level thoughts on a good approach? At the same time, I don't want to complicate it too much either

 

 

 

[Craig]

Would this module be any good?

http://modules.processwire.com/modules/fieldtype-select-file/

[Robin S]

A couple of few thoughts...

1. Compare a couple of output folders to work out which files are unique and which are identical. No point in linking multiple copies of the same file. I suspect that files like pano-player.js are the same for every export so you can hardcode the path to such files in your template.

2. You want a field in your template that stores a reference to a folder. For each page you select the parent folder that contains the unique files for that photo. You could use the module suggested by @Craig A Rodway which would be fine if you are the only person selecting folders. But if you wanted to lock it down a bit more so only the child folders of a particular folder may be selected you could make your own fieldtype module. Have a look at this module by @Martijn Geerts as a guide. The part you would change out would be the bit where the selectable options are defined...

foreach($this->forms as $formName) {
    $inputfield->addOption($formName, $formName);
}

Instead of an array of FormBuilder forms you want an array of folder names, which you can get using PHP's glob() function with the GLOB_ONLYDIR flag.

$directories = glob($somePath . '/*' , GLOB_ONLYDIR);

3. Instead of an iframe to index.html you can look at the contents of index.html and work out how you can generate the necessary code inside your template. It will probably involve getting the image file names from the 'images' folder and iterating over them. The glob() function will come in handy again here.

[Peter Knight]

Cheers guys. Both good suggestions.

1 hour ago, Robin S said:

 

1. Compare a couple of output folders to work out which files are unique and which are identical. No point in linking multiple copies of the same file. I suspect that files like pano-player.js are the same for every export so you can hardcode the path to such files in your template.

Yep  thats part of the plan. And thinking about it, I can probably further break down the common files and make my own directory. 

Output folder is just the default from the 360 app. I don't need to stick with that as long as everything hooks up.

[Peter Knight]

Just popping in on some updates.

I tried the SelectFile module and I'm glad I discovered it but it may not be applicable here. 

My actual folder structure is as follows

/gallery/ 
  /Location 1/
       / Location 1 Pano 01/
          -  index.html
       / Location 1 Pano 02/
          -  index.html

  /Location 2/
       / Location 2 Pano 01/
          -  index.html
       / Location 2 Pano 02/
          -  index.html

 

So essentially even if I set ../../gallery as my source folder, I get a list of sub folders (great) but need to be able to then  drill down into each to cherry pick a sub-folder or file within.

I could of course create a free text field and manually enter the paths but I'm trying to future proof this a bit and make is scalable.

 

 

 

[Robin S]

More thoughts...

1. Could you reproduce the path to the PW page as a folder structure inside /site/templates? If your page is at mydomain.com/gallery/location-1/pano-1/ then you put the dependent files in /site/templates/gallery/location-1/pano-1/ and build the path to the files with:

$config->paths->templates . $page->path()

Then you don't need to select a folder in the PW admin (you just have to remember to upload your files to the right folder).

2. I reckon that by inspecting the code in the dependent files you'll be able to work out how to output it directly from your template file. Then you don't need to deal with these folders of dependent files at all - just upload the images to an image field on your page. Could you share an example of one of these pano folders so we can see what's in the code?

[Peter Knight]

14 hours ago, Robin S said:

More thoughts...

1. Could you reproduce the path to the PW page as a folder structure inside /site/templates? If your page is at mydomain.com/gallery/location-1/pano-1/ then you put the dependent files in /site/templates/gallery/location-1/pano-1/ and build the path to the files with:

$config->paths->templates . $page->path()

Then you don't need to select a folder in the PW admin (you just have to remember to upload your files to the right folder).

2. I reckon that by inspecting the code in the dependent files you'll be able to work out how to output it directly from your template file. Then you don't need to deal with these folders of dependent files at all - just upload the images to an image field on your page. Could you share an example of one of these pano folders so we can see what's in the code?

Hey Robin

I don't want to move the dependent files around as each client also calls those files in an iFrame. They're not using PW so I need to keep 'em alone.

I'm pretty sure I could hook up all the dependent files if I only had a field type that allowed me to freely browse through my public_html directory.

 

[Robin S]

9 hours ago, Peter Knight said:

I don't want to move the dependent files around as each client also calls those files in an iFrame. They're not using PW so I need to keep 'em alone.

If you mean they display content from your web server in an iframe then it doesn't matter what server technology is involved (PW or otherwise) because the iframe content loads on your server not theirs. You could use a URL segment such as /embed/ so that pages loaded with this segment do not include header, footer, etc but only the panorama content. Might not be something you want to tackle but just wanted to point out that it's possible.

9 hours ago, Peter Knight said:

I'm pretty sure I could hook up all the dependent files if I only had a field type that allowed me to freely browse through my public_html directory.

I'm not aware of any existing module that does this, but as I mentioned in an earlier post above wouldn't be difficult to create your own module that lists directories as options in a select field. The trick is getting the names of the valid directories you want to include as options into an $options array.