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.

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.

  '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).