How to embed external web content in Cobalt article?

Before I answer.

What is those content? HTML pages? Diagrams in what form? PNG? Javascript?

Right now for what I've understood, it is best to create a field that will generate content based on generated content. Most simple way for this is to use Boolean field. You set TRUE in the form and then create custom field output template where you include all generated documents.

What happened to my reply? I did a reply including file/folder listing, saw it in the main forum listing, but it is no longer there. I don't imagine anyone would have deleted it... was there a restore done? Do I need to re-create it?

Please read orange notification at the top.

Hi Sergey, The generated content is a combination of png for the process diagrams and css and js for user interactivity. The file/folder listing below shows one instance of generated content, starting from index.html, including 5 related process diagrams (filenames changed). I have many instances of generated content, each having its own index.html and related files/folders. I would like to show each instance on a separate Cobalt article.

With the additional information provided, is the Boolean field and custom template still the best approach?

Also, where is the most appropriate place to store the files for each instance of generated content? I get daily hacking attempts, which are handled by a security component, so I am concerned about adding non-Joomla content.

index.html
key.json.js
files\diagrams\Process1.png
files\diagrams\Process2.png
files\diagrams\Process3.png
files\diagrams\Process4.png
files\diagrams\Process5.png
libs\css\app.css
libs\css\theme.css
libs\css\theme_ie8.css
libs\css\jquery\jquery.ui.css
libs\css\jquery\images\animated-overlay.gif
libs\css\jquery\images\ui-bg_flat_0_aaaaaa_40x100.png
libs\css\jquery\images\ui-bg_flat_75_ffffff_40x100.png
libs\css\jquery\images\ui-bg_glass_55_fbf9ee_1x400.png
libs\css\jquery\images\ui-bg_glass_65_ffffff_1x400.png
libs\css\jquery\images\ui-bg_glass_75_dadada_1x400.png
libs\css\jquery\images\ui-bg_glass_75_e6e6e6_1x400.png
libs\css\jquery\images\ui-bg_glass_95_fef1ec_1x400.png
libs\css\jquery\images\ui-bg_highlight-soft_75_cccccc_1x100.png
libs\css\jquery\images\ui-icons_222222_256x240.png
libs\css\jquery\images\ui-icons_2e83ff_256x240.png
libs\css\jquery\images\ui-icons_454545_256x240.png
libs\css\jquery\images\ui-icons_888888_256x240.png
libs\css\jquery\images\ui-icons_cd0a0a_256x240.png
libs\img\bgn-search.png
libs\img\biz-ex-icon-menu-2x.png
libs\img\biz-ex-icon-menu.png
libs\img\biz-ex-logo-2x.png
libs\img\biz-ex-logo.png
libs\img\biz-ex-sprite-icons-2x.png
libs\img\biz-ex-sprite-icons.png
libs\img\bullets-first-level.png
libs\img\bullets-second-level.png
libs\img\hand-closed.png
libs\img\hand-open.png
libs\img\pattern.png
libs\img\sq-hover.png
libs\img\sq-overlay.png
libs\img\sq.png
libs\img\supported-browsers.png
libs\img\unavailable-image.jpg
libs\js\app\app.bizagi.min.js
libs\js\app\app.ie8detect.js
libs\js\app\jquery.min.js
libs\js\app\kinetic.min.js
libs\js\app\less-1.4.1.min.js
libs\js\app\process-viewer.libraries.min.js
libs\js\app\process-viewer.min.js
libs\js\app\process-viewer.plugins.min.js
libs\js\app\ie8\addEventListener.min.js
libs\js\app\ie8\jquery.min.js
libs\js\app\ie8\kinetic.min.js
libs\js\app\ie8\rem.min.js
libs\js\app\ie8\respond.min.js
libs\js\json\configuration.json.js

(thanks for explaining why some forum posts were lost)

Sergey use Boolean field. You set TRUE in the form and then create custom field output template where you include all generated documents.

Would somebody please point me towards an example showing how to do this? I have looked through the custom template documentation, copied the template and looked through the code but it is not making sense to me. Thanks.

Randall, i believe Sergey did not fully get your scenario. What he decribed would be suitable for an article "embedding" 1 process based on the "true" value of the boolean field, but not specifying the individual process diagram to be embeded.

As i understand your scenario, you have several interactive process diagrams stored on your server, which you would like to embed individually into different Cobalt articles.

Since you have them already on your server, the "iframe" solution would be the most obvious solution to start with.

If you want a "tighter" integration, you might have to analyze the index.html of your process diagramm to better understand how to merge it with a Cobalt article template based on a cobalt field value representing the path to the diagramm folder. If this Cobalt "Path" field (can be an ordinary text field) has a content, then include your process diagram elements into the full article template.

Btw, Bizagi Process Modeler looks like an interesting tool ...

Randall,

i just installed the Bizagi Process Modeler, created a demo process based on the manual and published it for web. The result is quite a complex webpage, where i believe the "iframe" approach is the most practical solution for your scenario. I would just add an empty index.html file into each of the folders of your process export.

Since you are in control of your content on your own website, I don't see a security issue here.

I will play later tonight a little more with the modeler and its integration into Cobalt articles ....

Thank you Sackgesicht. Yes, it is quite complex but I really like Bizagi and the interactive web output. I do not understand the security implications, but if it is as simple as adding an empty index.html to each folder that would be an excellent outcome. I look forward to seeing your assessment after using the tool a little more.

Regards, Randall.

The index.html for the folders is not really a security requirement in this case. Since the path to the files can be seen in the html code, it doesn't matter. It is just for the principle of including it in every folder.

As said earlier, while you are in control of the content, the "iframe" should not be an issue (as long as you trust the Bizagi generated code).

A nice addition to the Cobalt upload field would be a zip extraction feature. An additional parameter "Unzip?" could then unzip the content of a zip file to the "uploads/fieldname/2016-01-01/unique_id" FOLDER and an upload field output template would handle the embedding of the content. Maybe it is worth to open a separate support topic for this request.

While looking at the generated files, i noticed 2 big logo files under the libs/img folder. To increase the page loading speed, i reduced their size from 123 KB to 4 KB and from 103 KB to 3KB... see attached file.

OFFTOPIC QUESTION: If i create a full process with the modeler, can i run the simulation also on the exported web page?

small_logo

Proof of concept solution:

1) Uploaded process to /uploads/process/process_xxx folder

2) Create process.php field output template in /components/com_cobalt/fields/text/tmpl/output see below

3) Used a "Text" field to store access to process --> field value = uploads/process/process_xxx/index.html

4) Set field parameter "Show label:" --> Submission Form and "Template in article full view" to process.php

process.php:

<?php
/**
 * Cobalt by MintJoomla
 * a component for Joomla! 1.7 - 2.5 CMS ( http://www.joomla.org )
 * Author Website:  http://www.mintjoomla.com/ 
 * @copyright Copyright (C) 2012 MintJoomla ( http://www.mintjoomla.com ). All rights reserved.
 * @license GNU/GPL  http://www.gnu.org/copyleft/gpl.html 
 */
defined('_JEXEC') or die();
?>

<?php echo '<iframe src="'.$this->value.'" style="width: 100%; height: 1000px;"></iframe>';?>

Please research on "iframe" parameter for better integration .... I used the height: 1000 px based on the height of the diagram.png plus 80px for header ....

This is just a quick and simple implementation with more room for improvement.

Note: Fullscreen does not work as expected ... it will be within the "iframe" ...

What i was reffering to is something like this

<?php
/**
 * Cobalt by MintJoomla
 * a component for Joomla! 1.7 - 2.5 CMS ( http://www.joomla.org )
 * Author Website:  http://www.mintjoomla.com/ 
 * @copyright Copyright (C) 2012 MintJoomla ( http://www.mintjoomla.com ). All rights reserved.
 * @license GNU/GPL  http://www.gnu.org/copyleft/gpl.html 
 */
defined('_JEXEC') or die();
?>

<?php include $this->value;?>

this would display the same without iframe. But in this case in a report you will have to have full path for images and other CSS and JS files. To solve this you might preprocess HTML like this.

<?php 

$from = array(
    'src="'
);

$to = array(
    'src="/uploads/processes/process_xxx/
);

$html = str_replace($from, $to, $this->value);

include $html;
?>

This is an idea only.

Brilliant. Thank you Sackgesicht and Sergey. I got the iframe example to work but having trouble with the html solution that Sergey suggested.

When I include contents of text field as uploads/path/to/index.html it does display something but it's just unformatted rubbish, like Sergey suggested it would. The preprocessing produced the same result.

Would you please explain how str_replace updates the contents of the html file when the text field just contains the path to the index.html file?

Apologies, I have done some coding in an ERP system but no Production coding on the web.

Thanks, Randall.

There is syntax problem in my example you cam see by color highlights. But this is editor change it. Just strat with

include $this->value;

And then see how you need to modify it before rendring.