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.

Please post new sections below this line.


Text on top of APE video

On some of my webs pages I display a bunch of text and an APE video floats to the right.
Sometimes when the browser window is smaller the video squishes the
text. I was able to display the text over the top of the video.
This worked great! I made the black text with a white shadow so no matter what the background,
it was easy to read. The older method I used to put text over video stopped
working (I blame YouTube).

Can we set the APE video window with z-index (or something
like that) so my text will float over the top of video when
the screen gets smaller?
--gnuzoo

Setting z-index on the Ape frame will not help you, you need to set position:absolute to the preformatted text block. To do so, add to config.php: $WikiStyleCSS[] = 'position'; and see this edit. Alternatively, just don't use "rfloat". --Petko November 27, 2019, at 12:04 PM

It is awesome that this works! I thought I had my website password protected. Can you please explain how it is that you can make edits on my website? --gnuzoo

I went to ?action=edit -- no password was needed. See Passwords to protect per-page or per-group and PasswordsAdmin to set a site-wide edit password. --Petko November 27, 2019, at 05:21 PM

Oh! I I am sorry, I thought I had that done. It asked me for a password for Site pages, and that made me think I had it set. Foolish of me to think such a thought. --gnuzoo

Petko, the tablature content was not meant to be wrapped. Prefer it static. --gnuzoo




Petko,

Using "%block position=absolute%" messes things up a bit. Text underneath the top text section displays from top again. I tried to make an example here - https://galleries.accent.bg/Cookbook/Ape-Sandbox but that will not allow the "position" attribute.

Example1: text not over top:
   http://gnuzoo.org/guitarstuff/America/LonelyPeople

Example 2: text over top, but text all messed up:

   http://gnuzoo.org/guitarstuff/America/LonelyPeople2

When the window size got smaller I used to be able to put the text over the top of videos horizontally formatted like example 1. Example 2 shows how messed up text can get. --gnuzoo

Note that this is unrelated to Ape, the same would happen with any (floating elements next to absolutely positioned elements) repeated more than once.

This doesn't work when you have several sections one after another, each one with a floating frame and a preformatted block. We can do it differently, even simplify how you write in your pages.

See the page Ape-Sandbox-Underfloat (source) and my local css.

Basically, an absolutely positioned element is placed relatively to its parent element with the "position:relative" style. Moreover, the text block is usually taller than the video block, so we will flip these.

In my page, I start every section with an >>underfloat<< division block, then an %embed% line (or in your case %videobox%) without the rfloat class. Then the preformatted block [@...text...@] without even the position=absolute wikistyle:

 
>>underfloat<< This starts a new section
%embed width=320px height=240px% https://youtu.be/123456 %%
[@
Text and chords of the song
@]

>>underfloat<< This starts another new section
%embed width=320px height=240px% https://youtu.be/987654 %%
[@
Text and chords of the song
@]

And in my local.css I have defined that both the "underfloat" section and any preformatted blocks in it will be relatively positioned. An embed block in the underfloat element will be absolutely positioned (relative to the position of the parent underfloat), and placed to the far right of the screen. Here is the CSS:

 
.underfloat {
  position: relative;
}
 .underfloat pre {
   position: relative;
   text-shadow: 1px 1px 0px white;
   width: min-content;
   max-width: calc( 100% - 2em );
 }
.underfloat .embed {
  position: absolute;
  right: 0;
}

Note that you can only have one single %embed% frame in every >>underfloat<< section, you have to open a new >>underfloat<< section for every video, and the song text needs to be taller than the video frame. Also note that the text you use as a caption will not display well under the preformatted text -- it is better to not use captions in this case.

Again, this is a CSS support request, not something that Ape does or does not do, you would have the same problem if you had a right floating frame without a video. This is only because you want to have the frame floating right on large screens and under the text on small screens. Also, the solution is specific to the case you showed me, it may not work in other cases. This is a choice you make. To keep my sanity, I would probably have the frame not float right and under, but simply display before the text. --Petko December 02, 2019, at 08:43 PM

Petko, Awesome solution! I recall it being much simpler before, but do not recall exactly how. The page is designed to work on a 12 inch ipad or a monitor which is bigger, but not necessarily on a small phone. On the ipad 12 inch some screens needed the overlay a little to fit, but most fit OK. I think at the time I did not want the video to change position vertically. I also wanted to have it all print on standard 8.5 x 11 inch paper. Using the @media directives in CSS, the videos do not print and the HR will turn into a page eject. I tried different strategies to make every page print, but never got it all polished. It was mostly working too. Then I got a full time job and did not make time to maintain it all. I have some more time now, so I wanna fix this up again. Things fell apart over time with upgrades to PMWIKI and PHP.

Petko, New CSS support request for this: the text overlays video, but the video is not clickable so you cannot start the video. It looks like the text block is covering the video to the right side of the browser and not just the text. See https://galleries.accent.bg/Site/LocalCSS?action=source and try to click to start the videos. Can this be adjusted to just using the right margin of the text and not the entire video? --gnuzoo

Indeed. Adding this to the .underfloat pre CSS does the trick and should leave at least a small slice of the video not covered by the text block. --Petko December 03, 2019, at 11:00 PM

OH!! - here is a much simpler way! On the 'pre.escaped' text use

  pre.escaped {
    text-shadow :  1px  1px 0px white ;
    pointer-events : none ;
  }

The clicks go right through the text to the video! --gnuzoo


[Closed] Adjust caption text for audio to behave like caption text for video

See samples at Ape-Sandbox --gnuzoo

This should be possible with version 20191127, but note that the <audio> element is inline by default, if you want to have line breaks before and after it, you can define in pub/css/local.css something like: .embed audio {display:block;} or create a specific classname for this, like .audio-display-block audio {display:block;} then in the wiki page %embed audio-display-block% Attach:song.ogg %% like I did in the sandbox. --Petko November 27, 2019, at 11:43 AM

This works! Thanks! --gnuzoo


[Closed] Video Resize with poster, Video Float Right

Noticed that setting height and width have no effect when using poster. Can the poster be resized to the height and width attributes like the video is?

I am able to float right a youtube video, but cannot do this with an HTML5 video. Can this be done? If so can you please show me how?

I put examples of this in https://galleries.accent.bg/Cookbook/Ape

Thanks, this was fixed in version 20191126 -- it should have worked the way you expected it to work. --Petko November 26, 2019, at 08:42 AM

Resizing does not work when you have a poster. The image needs to be resized along with the video. Examples of this in https://galleries.accent.bg/Cookbook/Ape --gnuzoo

Thanks, this was fixed in version 20191126a. --Petko November 26, 2019, at 03:55 PM

Now the YouTube video wont play at top of https://galleries.accent.bg/Cookbook/Ape When you click it , it just says "Video unavailable". --gnuzoo

Hard to believe, but at the moment there is a misconfiguration on the Google servers, the connection should be strictly secure (HSTS) and it is not. In both Firefox and Chromium the dev console lists these as failed connections to a number of scripts on the domain googletagmanager.com -- could be this, hopefully temporarily. Alternatively, this video may have been recently restricted by the copyright holders, sometimes this happens out of the blue. In both cases, unless another video recipe is actually able to embed these videos, this is out of the scope of Ape. --Petko November 26, 2019, at 08:46 PM

Hmmm - the video plays on the youtube website but not embeded.

This appears to be working on my website now. I see you deleted the samples I put up on https://galleries.accent.bg/Cookbook/Ape though. Is there a better page to test things on?

--gnuzoo

Let's move the sandbox to Ape-Sandbox. --Petko November 26, 2019, at 10:45 PM


[Closed] Other HTML5 Video & Audio Attributes

Can you please add other optional attributes for HTML5 video and
audio such as preload, controls, autoplay, loop, and muted?

   https://www.w3schools.com/TAgs/tag_video.asp
   https://www.w3schools.com/TAgs/tag_audio.asp

--gnuzoo

Sorry, No. This was intended to be a simple markup without people having to learn complex configurations, and should work with the default settings in their browsers. If you require more choice, please look into the other audio/video recipes or into the EnableHTML recipe, which allows you to type any HTML. --Petko November 25, 2019, at 08:31 PM


[Closed] Video poster

Can you please add support for a HTML5 Poster - like in recipe HTML5Video
or like in HTML <video> poster Attribute ?
--gnuzoo

Thanks, added for 20191124 -- see usage. --Petko November 24, 2019, at 11:49 AM

This is not working for me. I tried

%embed% [[Attach:http://gnuzoo.org/guitarstuff/videos/imagine.ogv|Attach:http://gnuzoo.org/guitarstuff/images/johnlennon.jpg]] %%

Please review MarkupMasterIndex#ImagesAsLinks, PmWiki:Images and PmWiki:Uploads if you want to learn about various ways to embed images. In your case, either write Attach:johnlennon.jpg then click the link to upload the picture, or type the full URL of the image starting with http: (or Path: or other intermap, not Attach:) and PmWiki will embed it. --Petko November 25, 2019, at 08:59 PM

I still do not understand. I am trying to use the URL for the image as a poster for the embeded video. Using those 2 urls to reference the files, what would be the proper way to do that? (At https://www.pmwiki.org/wiki/Cookbook/Ape#HTML5_audio_and_video it says "The files do not need to be attached to the wiki, you can link to external files.") --gnuzoo

Okay, We'll do this step by step. Ape only uses standard PmWiki links and the wikistyle %embed%.

  • How do you create a regular PmWiki link to the video file?
    • Attached to the wiki: [[ Attach:File.ogv | text ]] -- NOT http:...
    • External: [[ http://URL.ogv | text ]] -- NOT Attach:http://URL.ogv
  • How do you embed a picture?
    • Attached to the wiki: Attach:Picture.jpg -- NOT http:...
    • External: http://URL.jpg -- NOT Attach:http://URL.jpg
  • What if I want the picture to become a link? Mix and match:
    • [[ http://URL.ogv | http://URL.jpg ]] External+External.
    • [[ Attach:File.ogv | http://URL.jpg ]] Attached+External.
    • [[ http://URL.ogv | Attach:Picture.jpg ]] External+Attached.
    • [[ Attach:File.ogv | Attach:Picture.jpg ]] Attached+Attached.
  • The previous lines embed a picture in the page, and the picture is actually a link to the video file.
    • This is standard PmWiki markup producing standard HTML.
  • Ape is a progressive enhancement overlay: for people with JavaScript enabled and recent browsers, it will find the links inside the %embed%...%% wikistyle, will analyze them, and if it recognizes one of the known patterns, will hide the link and insert the frame to the provider, or the audio/video object.
    • If the visitor cannot load Ape because they disabled JavaScript or have an older browser, they still see the link and may choose to open it or not.
  • Your case is the first one from the mix-and-match examples:
    • %embed% [[http://gnuzoo.org/guitarstuff/videos/imagine.ogv|http://gnuzoo.org/guitarstuff/images/johnlennon.jpg]] %%
    • or shorter: %embed% [[Path:/guitarstuff/videos/imagine.ogv|Path:/guitarstuff/images/johnlennon.jpg]] %%
    • see functional demo at https://galleries.accent.bg/Cookbook/Ape

Does this make it clearer? --Petko November 25, 2019, at 10:53 PM

No. I see only the video which lays on top of the poster. The poster is supposed to be on top the video. AFAIK - this not how the HTML5 video tag attribute 'poster' works. I put the one line into
http://gnuzoo.org/guitarstuff/Test
and the picture and video load, but it does not work. The video appears on top the poster.

"The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead." - https://www.w3schools.com/TAgs/att_video_poster.asp

Looking at the browser source code, I see no poster attribute at all. --gnuzoo

You seem to use an older version, please get version 20191124 -- you may want to clear your browser cache first, or get it with wget or curl. --Petko November 25, 2019, at 11:52 PM

You are correct. This is the 2nd time I downloaded and re-installed this today. I have been playing with this for a few days. It appears to be working now. Interesting is that you appear to not be using the HTML5 video tag to play HTML5 video. --gnuzoo

Initially the HTML source output by PmWiki contains regular links and CSS. Then the browser runs Ape which inject the HTML5 <video> tag into the DOM. --Petko November 26, 2019, at 08:42 AM


[Suspended] Add support for google groups

Would it be possible to add support for google groups, viz

<iframe id="forum_embed"
  src="javascript:void(0)"
  scrolling="no"
  frameborder="0"
  width="900"
  height="700">
</iframe>
<script type="text/javascript">
  document.getElementById('forum_embed').src =
     'https://groups.google.com/forum/embed/?place=forum/yourgroupname'
     + '&showsearch=true&showpopout=true&showtabs=false'
     + '&parenturl=' + encodeURIComponent(window.location.href);
</script>

tia simon September 02, 2018, at 04:35 AM

I need a rule to convert a link to some remote resource into an embedded frame. What in the wiki page would be a link to a remote page, and what would be the URL of the embedded frame? You can post one or more actual link=url examples here. --Petko September 02, 2018, at 11:55 AM

I could not find documentation about embedding private groups, or public groups on private domains -- both appear to fail. (Also, I am unable to open and test your private group, but I tested others.) Do you know "what would be the URL of the embedded frame" for your group? --Petko January 10, 2019, at 03:31 PM

You never replied, but I did some research and I was able to embed publicly readable groups. Even if I cannot test those on private domains, it might work. Place this code in pub/ape/ape-local.js:
  var uAPErx = [
    [
      /https:\/\/groups\.google\.com\/(.*\/)?forum\/.*?\#\!(forum\/\S+)/i,
       'https://groups.google.com/$1forum/embed/?place=$2'
       + '&showsearch=true&showtabs=false'
       + '&parenturl=' + encodeURIComponent(window.location.href)
    ]
  ];

Then in your wiki add the link with %embed https://groups.google.com/a/ttc.org.nz/forum/?hl=en-GB#!forum/ttc.test %% and please report if it works. --Petko March 27, 2019, at 09:57 AM


[Closed] Not compatible with HTML caching

If the page HTML is cached via $PageCacheDir then APE doesn't get invoked and therefore doesn't insert its JavaScript. As a workaround, you can ensure it's always loaded by adding this after the ape.php include:

   $HTMLFooterFmt['ape.js'] = "<script type='text/javascript' src='{$FarmPubDirUrl}/ape/ape.js'></script>";

Maxim? March 26, 2019, at 09:27 PM

Thanks for reporting, I've released version 20190327 which loads the scripts if page caching is enabled. --Petko March 27, 2019, at 09:05 AM


[Closed] Cross-origin scripts, wikifarms, etc.?

The config instructions for Ape note that “Browsers do not allow scripts from one domain to read the content of pages on other domains, and Ape needs to read the current page to get the link(s).” (and the suggested solution [in the case of wikis on the same farm but different domains] is copying the ape directory to the pub/ for the individual other-domain wiki(s).

However… I think there might be some confusion here (possibly on my part w.r.t. the instructions?). Here is why I say that:

  1. I have a wikifarm with wikis across several domains; Ape is installed (only in $FarmD/pub, not in pub/ of individual wikis); all wikis can use it (no browser errors or anything, and embedding works fine, etc.)
  2. This StackOverflow answer says this:
    All URL based security restrictions in client side JavaScript are based on the URL of the webpage containing the <script> element which loads the JS.
    
    The URL the JS itself is hosted at is irrelevant.
    
    
  3. There are recipes (such as Sage Cell) which load scripts not just from other domains in a wikifarm, but from all sorts of places (third-party websites, CDNs, etc.), and they also work (at least, in every browser I have tested them in)

Am I misunderstanding the instructions, or the use case to which they are meant to apply?

Said Achmiz January 06, 2018, at 02:20 PM

It is the multiple-pin map frame that doesn't work from a different domain, see the comment at the very bottom of this page. I'll update the docs. --Petko January 06, 2018, at 06:41 PM

Ahh, I see! Thank you, that makes sense. —Said Achmiz January 06, 2018, at 08:24 PM

[Closed] Load Ape only when needed?

Similarly to the recent change to B3 (20180105), I’d like to have ape.js load only when it is needed. Here is my tentative solution. In place of the code the instructions currently say to add to config.php, I instead add this:

if ($action == "browse" || $_REQUEST['preview']) {
	Markup('ape', 'inline', "/(%embed%|%map%)/", function ($m) {
		global $HTMLFooterFmt;
		SDVA($HTMLFooterFmt, array('ape' => '<script type="text/javascript" src="$FarmPubDirUrl/ape/ape.js"></script>'));
		## For local config:
		# SDVA($HTMLFooterFmt, array('ape-local' => '<script type="text/javascript" src="$FarmPubDirUrl/ape/ape-local.js"></script>'));
		return $m[0];
	});
}

This seems to work for me. I am not sure whether I’ve missed some kinds of markup that normally trigger Ape, though? I only use it to embed documents, so I can’t be sure I haven’t missed some fancier case…

Said Achmiz January 05, 2018, at 01:03 PM

Sometimes you might need to set the dimensions of the frame with a more complex WikiStyle like %embed width=100pct height=auto%, and the multi-pin map uses %list map%. Unless you have other fancier markups that output HTML like <span class='embed'><a ...></a></span> only the classes "embed", "map" and "player" on the the elements "<span>", "<div>", "<p>" and "<dl>" trigger Ape, ie >>embed<< or %apply=p embed% or (:div class=embed:) and others are possible in theory. This can be so complex it isn't worth the effort to do it all.

I wouldn't worry that much for people with slow connections: even if you have a single page that downloads these files, their browsers will cache them. You can add some expiration headers for these resources so the browser doesn't even try to get them with if-modified-since. Then embed the timestamp of each file in the headers:

  $lastmod = filemtime("$FarmD/pub/ape/ape.js"); # or your path
  SDVA($HTMLFooterFmt, array('ape' => '<script type="text/javascript" src="$FarmPubDirUrl/ape/ape.js?'.$lastmod.'"></script>'));

Something like that. --Petko January 05, 2018, at 02:27 PM

Thanks for the pointers!

Re: expiration headers: I certainly do have those configured, and everything is properly cached, indeed. (Hence my recipe Versioned Assets; though that does not currently work on linked resources like CSS / JS, and I will probably modify it in some way similar to your suggestion here—thanks!)

BUT, the big issue here is: caching is very good if a site has a large percentage of repeat visitors (and has immediately obvious value, or otherwise a low rate of "bounce-off"). This is, indeed, likely to be true for a traditional “wiki” or similar collaborative-content-creation platform. However, PmWiki can also be used as a CMS, or even simply as a (basically static) website-construction platform (for an example of the latter, take a look at this site I made). In a use case like that, many visitors to the site may be first-time visitors; they may be directed to a specific page via an external link; they may be viewing the site on a different device, or on a device that clears caches regularly like a shared (school, work, etc.) computer; and so on. (Many of these things are in fact true for, e.g., my site that I just linked.)

(Another scenario might be a large wiki, different sections of which are used by different people or groups of people. For example, Pm describes (somewhere here on pmwiki.org, I forget on which page) running a large wiki in a college, where every student had their own wikigroup, etc. Some people/groups might use some recipes and not others… and might use the wiki from e.g. a school lab where the computers clear cache regularly… should they have to load every linked resource from every recipe used anywhere on the wiki?)

In such cases, it may be wise to try and prevent the “dump every resource on the client at once, on their first visit to any page” effect. First impressions are important…

(BTW, another reason to try to minimize the number of linked resources is to reduce the amount of JS that a browser has to run with each page load. Each script may have a negligible execution time, but these things add up…)

Anyway, I will play with this some more, see if I can get all the possibilities (or at least all the reasonable ones), and report back with results!

Said Achmiz January 05, 2018, at 04:17 PM

Added for version 20180106. --Petko January 06, 2018, at 05:18 AM

Thank you!! It works perfectly. :) —Said Achmiz January 06, 2018, at 02:09 PM


[Closed] 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

Done for 20180106, testing the ?action=upload part in the url as people may use custom skins and classnames, but are less likely to use custom actions. --Petko January 06, 2018, at 05:18 AM

[Closed] 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


[Closed] 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

[Closed] 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

[Closed] 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

[Closed] 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

[Closed] 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

[Closed] 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

[Closed] 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

[Closed] 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

[Closed] 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

[Closed] 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.

[Closed] 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


Please add new sections at the top of the page. --Petko

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