Ape-Talk

Summary: Talk page for Ape: Automagical PmWiki Embed.
Maintainer: Petko
Users: +5 (View / Edit)

This space is for User-contributed commentary and notes. Please include your name and a date along with your comment.

Extraneous frame when embedding PDFs?

When embedding PDFs, I sometimes get this sort of thing: https://www.dropbox.com/s/dsssiz6zjb7b8k3/Screenshot%202017-12-13%2013.29.49.png?dl=0

I don’t want that bottom half, obviously; I just want the PDF! I have no idea what’s causing it, or why it only sometimes show up (with some PDFs? on some wikis? I’m not sure; I can try to narrow it down when I have a chance).

Does anyone know what the deal is, or how to get rid of that?

Said Achmiz December 13, 2017, at 12:28 PM

UPDATE: I figured it out! It's caused by UpdateAttachments—the extra link (the "update attachment" a.k.a. "delta" link) is also parsed by Ape, and an extra frame created…

Here is how I modified ape.js to solve this problem. I added after line 130 this line:

           if (lnk.className == 'createlink') continue;

This is a hack, no doubt there's a better way… but it seems to solve my problem!

Said Achmiz December 14, 2017, at 03:34 AM

Good catch, and the hack is not so bad, as this is a very PmWiki-specific recipe. --Petko December 14, 2017, at 09:13 AM

User-defined regular expression rules

FYI, the PDF embed method also works with RTF files; on my install I modified ape.js, adding a line identical to the .pdf one but with 'pdf' changed to 'rtf', and RTF embedding now works perfectly. Said Achmiz December 04, 2017, at 01:08 AM

Oh, also actually the same is true of .xlsx files, the same method works... probably for .docx and .pptx too (though I have not tested this). Petko, would it be possible to add a way for a user of the recipe to customize the rx array (and perhaps the content types as well, etc.), without having to actually modify the ape.js file? (It is not difficult to do, of course, but would get overwritten when updating, so probably not ideal...) Said Achmiz December 04, 2017, at 01:41 AM

It is possible to add the custom entries to a uAPErx ("user APE regular expressions") JavaScript array similar to the rx one, see example. If you have your own they will have priority over the core ones. I'll probably add those that people may use so it is nice to tell me. --Petko December 04, 2017, at 05:02 AM

Thanks, it works! (May be good to document this on the page for others? Or perhaps that it's here is enough...)

Anyway these are the lines I added:

 [/^(.*\.rtf)$/i, "https://docs.google.com/gview?embedded=true&url=$1"]

That does RTF files, through the Google Docs service (same as for PDF).

 [/^(.*[\.=]xlsx?.*)$/i, "https://view.officeapps.live.com/op/view.aspx?src=$1"],
 [/^(.*\.docx?)$/i, "https://view.officeapps.live.com/op/view.aspx?src=$1"],
 [/^(.*\.pptx?)$/i, "https://view.officeapps.live.com/op/view.aspx?src=$1"],

These do XLS/XLSX, PPT/PPTX, and DOC/DOCX files (i.e. the Microsoft Office file formats, old and new — Excel, PowerPoint, Word), through Microsoft's Office Web Apps service (could also do them through Google Docs, but Office Web Apps shows these formats better—see here https://www.labnol.org/internet/google-docs-viewer-alternative/ ).

(btw, you may ask "why the weird regex on the Excel one?" This is because I wanted to catch not only uploaded attachments with that format but also links generated by Google Docs to the XLSX format output of Google Sheets spreadsheets—yes, you can do this!—take such a link and feed it to Microsoft's service for embedded display... which is often better than embedding the actual Google Sheet, performance-wise and in some other ways. Strangely, this does not work for Google Docs output in DOCX or PPTX, only XLSX.)

Said Achmiz December 04, 2017, at 12:54 PM

Excellent work, I'll add these to the recipe, also psd and dwg, and if possible odt/ods/odp. Isn't the Office app better than Google at rendering RTF too (it is a Microsoft format...)? I haven't documented this yet because it is tricky to write a JS regular expression as a PHP string and it will be hard for people to correctly escape slashes and all. This would be better documented with an additional ape-local.js file that doesn't get overwritten on upgrades. --Petko December 04, 2017, at 01:38 PM

Re: RTF via the Office service—I had the same expectation, and maybe it does display RTFs well that are made by Word, I don't know, but it does not work at all with those made by Apple's TextEdit, or those generated by Google Docs! Whereas the Google Docs service works fine with those. I don't know much about the RTF format so I can't say why this is... —Said Achmiz December 04, 2017, at 01:53 PM

Thanks again, I've added the office formats per your suggestion, except for the =xlsx case where you can use a custom rule. --Petko December 08, 2017, at 06:10 AM


Installation: $HTMLFooterFmt or $HTMLHeaderFmt?

Hi. I am just testing this, it works just fine with YouTube videos, includiong adjusting size on small screens. Nice! Still I had a initial difficulty with the installation, as I needed to use $HTMLHeaderFmt instead of $HTMLFooterFmt. Maybe something related to my setup (pmwiki 2.2.92, browser Vivaldi 1.10, webserver Abyss 2.9)? or maybe a typo? or...? - RKzn June 04, 2017, at 02:01 PM

Check if your skin has the required "<!--HTMLFooter-->" line. The recipe uses $HTMLFooterFmt because it is much simpler this way when we don't want to wait for the full page to be loaded, or DOMContentLoaded, or onreadystatechange, it is cross- and older- browser compatible. But placing it in the header may in some cases not work if the page is not be completely loaded within a fraction of a second (high latency, very slow connection or very slow CPU). % Although in any of these cases your visitor may not appreciate an external media auto-loaded. --Petko June 04, 2017, at 03:16 PM

The skin I am trying out - Amber - has that field, and getting back to testing it today, it works both ways. I don't know why... Probably I messed up something while testing on both my local wiki and my to-be public site. Please forgive the 'noise', and thank you. - RKzn June 05, 2017, at 05:36 PM

Just an idea, but I think useful

When you have several videos (e.g. from youtube) in a lot of different pages you can't check often if a particular video is still online, so, this is my idea (if it is possible): a list of alternative (second, third...) url-videos (better if one of them uploaded internally, a safe-copy) if the video in the first/second url will be deleted. Perhaps something similar to IncludeSection

e.g. %player width=100pct height=200px% fist-url second-url internal-safe-copy %%

--Frank October 12, 2016, at 09:46 PM

Sorry, this is out of the scope of the current recipe. --Petko October 13, 2016, at 02:56 AM

Is there a way to provide fullscreen attributes to Vimeo?

Is there a way to allow a user who is watching an embedded Vimeo video to make the video display in full screen mode? Vimeo requires the following attributes: "webkitallowfullscreen mozallowfullscreen allowfullscreen", but I don't know how to supply them when embedding via Ape.

The frame already had the standard "allowfullscreen" parameter, now added the 4 proprietary ones (also o- and ms-), while waiting for the browsers to catch up. Thanks! --Petko May 31, 2016, at 12:24 PM

Embedding any PDF using a URL

I successfully embedded a pdf file that is hosted on another website. I notice the Ape documentation states "You can embed local *.pdf files using the Google Docs service." Since the example shows "Attach:" I had always assumed that meant you can embed files hosted on the local machine. If I misunderstood, and "local" means any URL outside the wiki, that should be clarified. I don't want to make such a change, since I don't know what is supposed to be supported. -- RandyB March 30, 2016, at 01:41 PM

Thank you. --Petko March 30, 2016, at 03:13 PM

How to change size and parameters of a video

Syntax like %embed width=100pct height=400px% http://youtu.be/IDENTIFIER %% seems not working.

And, is there a way to use parameters of a video like start , autoplay... as seen in Flash?

Jvamp February 27, 2016, at 11:51 AM

This precise markup does work for me. No, you cannot set "autoplay", I prefer it this way -- I think it is extremely rude when websites make me download and autoplay external media without my consent -- I may be on an expensive or limited internet connexion, and/or I may need silence. All included widgets come with play/pause/stop interface, I trust my visitors will know how to use those if they want. --Petko February 27, 2016, at 01:05 PM

I renew the pub/ape directory (in binary mode), copied your example but without better improvement. May this instruction be in conflict with?

I'm perfectly agree with excluding autoplay, but

  • start and end permits to focalize the attention on a part of the video
  • loop, playlist and rel permits to propose or not other similar video or loop on one without proposing others off topic.

Jvamp February 27, 2016, at 02:30 PM

Ok, I could indeed use "rel=0" so in the new version any parameters you add will be passed to the embedded Youtube frame. Note that ?t=seconds doesn't work, instead use start=seconds. --Petko February 28, 2016, at 07:00 AM

Thanks a lot, You're great.

I've found the conflict for the problem of size. It's due to the cookbook Svg but I'm unable to correct it.Jvamp February 28, 2016, at 08:41 AM

Indeed, the other recipe hijacks the styles "width" and "height" to allow you to set the size of the embedded SVG. If you enable the SVG recipe, you cannot use width or height for Ape. (Now added to the documentation.) --Petko February 29, 2016, at 10:22 PM

Another conflict exists with swf.php from Flash (but this cookbook seems not maintained). In fact I need to inactivate both swf.php and svg.php to be able to modify the size. I Changed the name of the variable $WikiStyleAttr in $WikiStyleAttrSwf in the cookbook Flash and $WikiStyleAttrSvg in the cookbook Svg and it seems working but I don't know the impact of this change.

SDVA($WikiStyleAttr,array(
  'height' => 'img|object|embed',
  'width' => 'img|object|embed')); 

Do you think It's not a worst solution.

 --Jvamp March 01, 2016, at 06:50 AM

$WikiStyleAttr is a PmWiki variable that defines to which elements the "width" and "height" keywords will apply. That is, if you type %width=100px%...%% PmWiki will search for an element, either 'img', 'object' or 'embed' inside the element (...) and will add these keywords to that element tag. That means height and width can no longer be applied to other elements like the 'span' element that wraps the link to the video (and you cannot add '|span' to the definition because there will be no other 'span' inside the span). If you change that variable to $WikiStyleAttrSwf and $WikiStyleAttrSvg, PmWiki will totally ignore it and then you can set the size of the Ape video frame, but very likely not the one of the Flash element.

I tried to add SVG embedding for Ape but the browsers don't work the same way, especially when setting the size: some resize the picture within the frame, others simply resize the frame so only a part of the picture appears. I don't want to add a broken half-feature that I'd have to support for eternity. :-) So I won't do it, you can already embed SVGs without setting their size with the recipe Cookbook:Svg (remove or replace $WikiStyleAttr like you mentioned). --Petko March 02, 2016, at 02:13 AM

Center a map

Does PmWiki include a CSS class that will center a map? This didn't work: : %list map center width=25pct%

I haven't found yet:

  1. A complete list of what CSS classes are predefined in PmWiki (e.g. is it the list in PmWiki:WikiStyles?)
  2. Instructions for how to create a custom CSS class. Cookbook:Styles seems like a natural page to put that.

-- RandyB October 07, 2015, at 11:35 PM

The following CSS to your pub/css/local.css will make all Ape iframes centered:

  iframe[id^="iframe_ape"] { margin: 0 auto;}

The complete list of predefined "classes" are in the <style>...</style> blocks in the HTML source of your page, in the skin CSS files and in the pub/css/*.css files (eg. classes: frame, lfloat, faqtoc). The WikiStyles function will assume anything that is not specifically predefined as a "WikliStyle" (not "class"), to be a CSS "class", so it is very easy to create a custom CSS "class" like %Py% or %embed% where I simply write it in the page, and I add the rules in a local css file or in $HTMLStylesFmt[] (for "Py") or my JavaScript expects and processes the elements (for "embed"). To see a list of predefined "WikiStyles" like "cframe", "alpha", "red" (not "classes" like "frame"), go to ?action=diag and look for the lines below "[WikiStyle]". Both WikiStyles and CSS classes can be predefined by recipes. --Petko October 08, 2015, at 04:41 AM

Thank you. That was helpful. Unfortunately, since I don't know CSS I'm still unable to center my map. I want to be able to center a map on a page as I would text - not always but sometimes. It would be most intuitive to use markup like this:
: %list map center width=25pct% 51.5728226,-0.3171152 :

Based on what you wrote, I think I should put something like this in my config.php file (since I'd prefer not to modify all my css files):
$HTMLStylesFmt[] = " #center { margin: 0 auto; } ";

But that doesn't work. -- RandyB October 08, 2015, at 06:24 PM

You asked how to create a custom CSS class, maybe learning a little CSS will be very useful to you. :-) The "center" keyword is a WikiStyle (not class) and it applies to the internal text content of the list. A block element like the map frame is (1) external to the list and (2) aligned via "margin", not via "text-align". Anyways, I suspect other users may want to center the map frame so the latest version will compute the frame margins from the alignment of the internal text. No need to add $HTMLStylesFmt. --Petko October 09, 2015, at 01:56 AM

Thanks, Petko! That helps me to understand better how it works.

To other authors: you can now use center, left, and right to position the map, but rfloat will not work because it is a wikistyle, rather than a setting for the CSS margin. To put a map right next to a photo, use a table directive. -- RandyB October 09, 2015, at 11:03 AM

Nesting wikistyles in maps

For all you Ape users who want to put a pin on the Empire State building, which, when clicked, would show a clip of King Kong climbing to the top, I have bad news: the recipe does not currently support frame nesting.

Wikistyles for the pin's text seem to work. For example:

: %list map% 32.7960311,-96.810961 : %width=100px height=100px%\
 [[{*$FullName}| http://pmichaud.com/img/2003/atc-1.gif]]

But using wikistyles defined by Ape will have unpredictable results depending on the browser, because elements for different frames would have the same ID.

Thus, wikistyles such as %embed% defined by Ape should not be used in map definitions beyond the initial %list map%.

One of the obvious uses for a map is to provide insight into what you will see at different locations. Imagine a walking tour. Although the tour's pins can show images when clicked, they can't show audio or video media embedded by Ape.

Is there a workaround? If not, could I extract the map portion of Ape into a separate recipe that uses different element IDs, so that map pins can embed non-map media? I don't know what would be required, or whether it's even feasible to do.

-- RandyB October 03, 2015, at 03:59 PM

Inside a definition list map you can use wikistyles with classnames other than %embed%, %map% or %player%. Frames from media hosting sites load a number of javascripts and attach various events to the loading of a frame. Copying that video frame HTML inside the map frame tooltips will likely mess with the events. Moreover, the definition list is not removed from the page but hidden, that will produce a copied video frame that is not visible and with which a user cannot interact. I cannot recommend to use that or support you if you use it and it does not work. I cannot recommend using a different recipe embedding videos, and place a video frame in the Ape map, as it will have the same problems. As a workaround to embedding videos inside a map, you can have a picture, an animated GIF, and/or a link to the video site hosting the media. The license allows you to fork the recipe if you have to -- but I don't have the time and energy to provide support for this. --Petko October 03, 2015, at 05:23 PM

A hardcoded HTML5 <audio> or <video> element (not <iframe>) in the definition list might work in the map. See the recipes HTML5Audio, HTML5Video, Audio5, Video5. --Petko October 03, 2015, at 05:45 PM

Complex and dynamic maps

Is there a way to combine maps so that subsets can be shown? For example a map of "PmWiki consultants in Europe" could combine the entries defined in maps for each European country without having to create redundant pins. I tried putting the pin coordinates in anchored sections and then for the third map using (:include {$FullName}#pinset1:) (:include {$FullName}#pinset2:), but it didn't work.

Similarly, is there a way to use a pagelist to create a map's pins? Then maps could be created dynamically to show, for example, consultants who speak a specific language and accept jobs of a certain size, etc. -- RandyB October 03, 2015, at 10:13 AM

The recipe is JavaScript only: if your wiki (wikitext; includes; pagelists) produces a definition list in the format recognized by the recipe, the map will appear. Make sure the first item has the %list map% wikistyle. Yes, a pagelist can produce a definition list, in fact the default pagelist and search results are output in a HTML definition list -- you simply need some custom template. --Petko October 03, 2015, at 11:31 AM

Zoom setting for maps created with definition lists

BTW, is there any way to set the initial boundaries of the map? Of course, the user can always adjust the scale, but it would be nice to just show the scale the author thinks is appropriate given the purpose of the map. -- RandyB September 27, 2015, at 02:44 PM

For a single pin, you can set the zoom level in a simple link (see the first example), not with a definition list. For a definition list, the map will be automatically adjusted at the closest possible zoom level, so all pins are visible in the map frame. --Petko September 27, 2015, at 04:50 PM

Added a Center= and Zoom= line, where you can set the level in a definition list map. Please see and improve the documentation in English if you can. --Petko October 03, 2015, at 11:34 AM

Map doesn't appear initially

When I tried this, I saw "embedding..." instead of the map. If I click the plus to zoom in, I see the map. Shouldn't I see it without clicking? -- RandyB September 27, 2015, at 10:32 AM

: %list map height=500px max-height=85wh overflow=auto% \
47.307032,-115.115095 : [[http://www.example.com | Example]] 

Thanks, should be fixed now (it couldn't correctly calculate the boundaries of the map when a single pin was present). --Petko September 27, 2015, at 01:22 PM

Thank you! It seems to work now.

WikiFarm issue

When I try this recipe in my farm's local wiki, it all seems to work properly. However, when I try it in a field of that same farm, most of it works, but the following markup shows "Embedding" with no map. Where might the problem lay?

: %list embed width=100pct% 51.5728226,-0.3171152  :  [[NPH/ | Northwick Park]]
: 51.3771046,-0.5286385  :  [[SPH/ | St Peters]]
: 51.5041414,-0.0867275  :  [[STH/ | Tommies]]

-- RandyB September 02, 2015, at 12:51 AM

I use the recipe both on a single -no-farm- wiki, and in 2 fields of a farm. Make sure $FarmPubDirUrl is correctly defined in the field (it probably is), and that your browser can load the file leaflet.js from the field. Try also reloading/refreshing the browser cache, or test it with a different browser. Is there a public URL where I can test it? --Petko September 02, 2015, at 11:27 AM

Thanks, Petko. I've got it working now. I put Ape in all my field pub directories, and refer to those directories in my configuration file when I load Ape. You suggested in a very helpful email the idea of creating symlinks, and pointed out that I could do that via PHP (http://php.net/symlink). I like your proposed solution better than what I did. I may try it when I understand more of what I'm doing. -- RandyB September 04, 2015, at 12:53 AM

Added a note in the page. --Petko September 05, 2015, at 05:06 AM

Talk page for the Ape: Automagical PmWiki Embed recipe (users).