1 Topic by vern (edited by vern 2016-03-19 11:28:39)

  • vern
  • Member
  • Offline
  • Registered: 2016-03-18
  • Posts: 9

Topic: Juiceboxbuilder remote sourcepath - customized embed code

I think I know the answer but figure it can't hurt to ask.

First off, Juicebox is AMAZING! If I was the only person who had to manage the galleries I am producing it would be absolutely perfect.

Having said that, one of the issues is ease of use. If someone who is not as tech savvy has to edit or create a new gallery, things get a little tricky.

A few issues I am trying to simplify:

Embed Code
The Juiceboxbuilder application has no options to modify the default embed code in the publish step. I have a set of modifications I am doing over and over and over that requires hand editing the embed code. Much of this could be fixed if I could modify the embed code content in the application.

Is there some way to edit the "source" of the embed code used in the application?

config.xml remote sourcepath
This is a stretch I am sure, but is it possible to use an http or ftp source path to the original images?
I was playing around with this on a local webserver and it "seemed" to work but when placing online and changing the source path in the XML it wasn't able to locate the images. I think my "local test" gave inaccurate results based on the local directory structure of the server configuration. It seemed to work, I even have my local test server set up to use standard http protocols and paths.

This would be a huge benefit. I could have clients purchase the pro builder and they could open a gallery with "external" sources in the xml that would point to the location on the server.

If none of this is possible will probably go with Flickr or some other similar option as it has so many more options and features, and all these "young interns" know how to use those sites. :)

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Juiceboxbuilder remote sourcepath - customized embed code

Embed Code:
If you edit the template file that JuiceboxBuilder-Pro uses to generate the 'index.html' files, then your modifications will be included in all gallery 'index.html' files.
On a Windows system, the file you would need to edit is: C:\Program Files (x86)\JuiceboxBuilder-Pro\template\index.html
For Mac, check your Applications folder for 'JuiceboxBuilder-Pro' and look inside the 'template' folder.

'config.xml' remote sourcepath:
It is not possible to use ftp://, http:// or https:// protocols for the sourcePath attributes in the gallery's XML file.
The source image files have to be on a local drive.

3 Reply by vern (edited by vern 2016-03-21 20:14:37)

  • vern
  • Member
  • Offline
  • Registered: 2016-03-18
  • Posts: 9

Re: Juiceboxbuilder remote sourcepath - customized embed code

Okay I found what I thought is the html template and modified it, but the embed code in the application does not change.

It's the same as it was before, with the default settings on the Publish screen of Juicebox builder.
I want to add and change options to the embed code "template" so I don't have to edit it every time after saving.

I want to add the base url option to the embed code using %%TITLE%% and also change the location of the jbcore.

"sidmiller" is the title or name of the gallery:

baseUrl: 'galleries/sidmiller/'

On the Publish screen there is a text box to copy the embed code.
Modifying the index.html template in the application does not change the embed code when creating a new gallery.

This is what I want the embed code to look like

<!--START JUICEBOX EMBED-->
<script src="galleries/jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container",
baseUrl: 'galleries/sidmiller/',
galleryWidth: "100%",
galleryHeight: "80%",
backgroundColor: "rgba(255,255,255,0)"
});
</script>

Another thing I am looking for if possible, is to edit the config.xml "template".
Is there a file in the application that controls any of the output for the config.xml?
I am changing elements in this file as well.

I need the XML on the live site. As has been mentioned before, this file contains paths of the local system. I edit config.xml sourcePath to point to a local folder using a relative URL instead of the full path with all of my computer folder information.

I don't want a file on the website with that type of information of my work computer. I would like to remove it by default instead of having to edit files.

It seems there's a lot more "hands on" editing of embed and config in a text editor. Just curious why these changes can't be implemented in the Juicebox builder application to avoid extra work and eliminate "user error" mistakes, like... twice I uploaded galleries but forgot to edit the embed I pasted in.

I would really like that embed code to be "done" on save rather than having to edit it.

  • Registered: 2016-03-20
  • Posts: 2

Re: Juiceboxbuilder remote sourcepath - customized embed code

Just following up on the editing of the template index.html file.... this has worked brilliantly for me, with a lot of identical embedded galleries to create. I created a single gallery page from a complex Dreamweaver template, placed the juicebox code in the header and body regions, saved it to the juicebox template folder and voila...every gallery page is fully embedded out of the box and headers and footers even updated when I update the Dreamweaver master template.

So I now have a stock of index.html files, linked to a stock of custom juicebox presets and swap them around according to the gallery style that I want.

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Juiceboxbuilder remote sourcepath - customized embed code

@vern

Modifying the index.html template in the application does not change the embed code when creating a new gallery.

Modifying the JuiceboxBuilder-Pro 'index.html' template file will affect all output 'index.html' gallery files but it will not change the embedding code presented on the 'Publish' tab. There is no way to change this. (The code that generates the embedding code on the 'Pubish' tab is compiled within the program and cannot be modified.)

Is there a file in the application that controls any of the output for the config.xml?

No. The 'config.xml' files are generated from scratch from within the application. There is no template file for the output 'config.xml' gallery files.

I don't want a file on the website with that type of information of my work computer. I would like to remove it by default instead of having to edit files.

You would need to edit the XML files manually (after the galleries have been created) to remove the sourcePath (or any other) entries. However a single global regular expression search and replace action in a text editor such as Notepad++ should remove them quickly (and you would be able to do this across many files at once). Choose 'Search -> Replace...' from the drop-down menu at the top, choose 'Regular Expression' as the search mode, search for sourcePath=".*?" and replace with nothing (blank).
(JuiceboxBuilder needs to know the source paths of the images in order to allow a gallery to be edited and have a watermark removed, for example.)

Just curious why these changes can't be implemented in the Juicebox builder application to avoid extra work...

If you like, please feel free to post suggestions for future versions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked. Thank you.

@gor555

Just following up on the editing of the template index.html file.... this has worked brilliantly for me...

I'm glad the information in this thread was useful to you. Thank you for letting me now.

  • vern
  • Member
  • Offline
  • Registered: 2016-03-18
  • Posts: 9

Re: Juiceboxbuilder remote sourcepath - customized embed code

Thanks so much for the information. Even if the info isn't what I was hoping to hear, it clears up my confusion so I don't waste time. Obviously having to edit the config.xml "by hand" is not a deal breaker by any means, but if it WAS possible to do more easily with a template or editing the application, I didn't want to be wasting time unnecessarily.

It would be very very VERY VERY incredibly useful to be able to edit the config.xml embed code using a template. I will DEFINITELY post a feature request for this!!!!!

gor555 wrote:

... editing of the template index.html file.... this has worked brilliantly for me...

Thanks for that info! Yes it does work, but only on the index.html. Creating that type of template is useless with my specific situation. This is a Joomla site with dynamically created content so it must be embedded. I could simply copy from the custom HTML generated file but the goal is fast and easy "copy/paste" from the application.

Steven wrote:

However a single global regular expression search and replace action in a text editor such as Notepad++ should remove them quickly

Haha! Regex is my addiction. I love it and can do the most complex and amazing feats of text wrangling to thousands of files in a split second. Trying to explain this magical power causes eyes to droop and glaze over, some simply pass out from sheer boredom. ;)

The Problem is I can't possibly expect an untrained, unpaid intern or a secretary asked to update a gallery at one of our clients locations to know how to "fix" or change the config.xml files or modify the embed code. For many years we have tried different ways to educate and train "technically challenged" individuals, using pdf with screen captures and detailed instructions, screen captured videos, hands on in person step by step in house training, etc etc.

5 minutes later all that knowledge seems to simply vanish or is forgotten. Or possibly they weren't nodding their heads when asked if they understood something, their heads bobbing up and down as they fought off sleepiness from technology overload. :)

(what amazes me is that everyone of these individuals has a Facebook or Twitter account and is capable of remembering how to do complex tasks on those sites).

==========

We have solved 99% of this issue by switching to Flickr. This seems to be the best way to use Juicebox for us in this situation. They have a solid functional feature rich image manager and the Juicebox galleries just magically load in those images without any editing required. Some of these galleries are updated daily.

The only drawback using Flickr is page load time. The regular way of creating galleries with images loaded from the server, page load times are SCREAMING fast. Using Flickr with Juicebox can sometimes have quite a long delay before it loads. I have tried every available option to test speed, PAGE preloading, fewer images "per page", NEXT preloading, "medium" image sizes etc. It seems that the "lag" or "delay" in page load is not related to the image sizes or the preloading at all, it's simply the time it takes to access the Flickr site and retrieve the images, something which Juicebox can't control. We switched over from SSP, I suppose I could use the scripted php solutions on the forum to repurpose SSP with juicebox... but the security risks with unsupported dead end server software is hardly worth it (SSP admin passwords in the database are NOT encrypted/hashed... yikes!).

Using Flickr anyone with half a brain can easily add new images to any of the dozen or so galleries. The config.xml simply loads the flickr set/album (you guys need to update the app. Flickr changed the word "set" to "album" and it took me AGES to figure out what the freaking heck a "set ID" was).

I am currently testing ONE SINGLE config.xml file with configUrl, and have the tags or "set IDs" in the embed code to change the image source from Flickr. Probably won't work but worth a try. I don't think flickrTags or flickrSetId are embed code options, but will try it anyway... another feature request. The purpose of this is to have a single file with settings for a whole pile of galleries in one site. They all have the same settings and should look and behave the same. If you want to tweak something, you only need to modify a single file. This would be a huge time saver. Will only work if the tags or IDs can be set in the embed code. If it doesn't work this way, there appears to be parameters that can be passed via the URL to the page that contains the embed code but that's a last resort.

On a side note, I am curious how much the <noscript> is really needed in the embed code? That embed code can become enormous with every single image in a large gallery. Even if not displayed it has to load. I have been removing it because if someone else is changing the galleries in Flickr, the juicebox galleries work fine but the <noscript> image lists won't be updated and having to do that with the app or by hand completely negates any benefits of using Flickr.

  • vern
  • Member
  • Offline
  • Registered: 2016-03-18
  • Posts: 9

Re: Juiceboxbuilder remote sourcepath - customized embed code

Woooohooooo! It works!!!
All of the embed options can be used in either the embed code or config.xml. I should have realized this, a bit short sighted of me, but still new with JB pro.

One config.xml file. I don't even need separate gallery folders, just embed code in gallery pages (joomla articles). One folder for jbcore, one config.xml, all the unique data in the embed code. This is awesome. Even with some of the rough edges and features I would like to have, this is better than any of the other Joomla gallery components we looked at to replace Slideshow Pro. I think I might even create a Joomla Juicebox component. It's very straight forward.

Next I am going to use gor555's trick to create embed code using the html template. I am not using the standalone html template, and won't ever use it within our workflow, but I can simply modify it so it produces JUST the embed code for each gallery. I have to modify each chunk of embed code anyway, I can truncate the html so it's only a "code snippet" to be copied and pasted.

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Juiceboxbuilder remote sourcepath - customized embed code

All of the embed options can be used in either the embed code or config.xml.

That is correct. Configuration options can be set in the gallery's XML file (as attributes to the opening <juiceboxgallery> tag), in the JavaScript embedding code and in the web page's URL (via a query string). This is noted in the Setting Config Options support section.