• View
• Edit
• History
• Attach
• Print
• Backlinks

Ape-Talk-Archive

Archive with older threads, see Ape-Talk for more recent discussions about Ape.

[Solved] MS Windows Defender found threat in Ape.zip

Doing some maintenance on my company PMWiki and was going to update to the latest Ape. Tried downloading from both of the links on the main cookbook page and get notified there's a threat - Trojan:Script/Wacatac.B!ml. Is there a way for someone to check this?

Thank you! Richard? 04/05/2023

Virus Total scan results 0/88. This must be a false positive. --Petko April 05, 2023, at 07:01 PM

Yes, I'd just come to that conclusion also and was going to post my findings. Sorry for the false alarm. Microsoft gets some of the credit however. Thank you! Richard? 04/05/2023

[Solved] Grey map markers not shown

I'm trying out Cookbook.Ape#map-multiple-pages.

The map on destination pages only shows the blue marker (top right in image), the grey ones are missing - but they do have a rectangular outline and a shadow (bottom left)!

The markers seem to exist in the images subdirectory, maybe they are used from the wrong directory? Or maybe there is a layer stacking problem?

Erik? @2023-04-05

Thanks for the report - fixed in 20230405, just released. It was requesting pins from a wrong images/images subdirectory. Not sure when this broke. --Petko April 05, 2023, at 12:17 PM

Updated APE and can confrim it works!

Once more, thank you so much for replying so fast reply and for fixing the problem.

Erik? @2023-04-05

[Solved] Trouble displaying GPX trace

I just installed PmWiki and started exploring APE for displaying maps, using the examples in the docs for the APE recipe:

1. OpenStreetMap.org using embed. This works fine
2. Multiple marker using map. This also works
3. GPX traces. No map shown, renders as a download link for the attached gpx file

So it seems APE is correctly installed, since the first two things I tried do work.

I had to add

$UploadExts['gpx'] = 'application/gpx+xml';
$UploadMaxSize = 1500000;

to config.php before PmWiki accepted GPX uploads. Is there some other configuration I might have overlooked?

Edit to add: The application/gpx+xml was taken from one of the demos linked from the docs. Running file --mime reported text/xml, which also didn't work.

Erik? @2023-04-03

I'm not sure -- not all possible GPX formats are supported, but if unsupported you would see a blank map, not the link. Can you try attaching the GPX file at the Ape-Sandbox page, and I'll look into it. --Petko April 03, 2023, at 10:09 AM

Thank you for looking into this! I uploaded a GPX file that I cut down a lot, because I wondered if the files were too big. It renders just fine in the APE sandbox, but still becomes just a link on my install. There's not even an attempt to pull in OSM scripts or tiles.

Markup looks the same to me, I even copied the one from the APE sandbox.

Erik? @2023-04-03

Sorry, apparently the zip archive attached to the cookbook was an older version; the "alt. download" link to my site was the latest one. I have updated this file just now (check $RecipeInfo in cookbook/ape.php). Note that you need to update cookbook/ape.php and all files in pub/ape/. Even though, the previous version should have worked with GPX. Let me know if the new one does, otherwise if there is a public wiki somewhere I can look at. --Petko April 03, 2023, at 07:36 PM

Brilliant, updating APE worked. Version went from '20220822' to '20230312'. Now on to further experiments...

Thanks a bunch! Erik? @2023-04-04

[Solved] How to remove style: "border: 1px solid black;" from ape.js?

I don't need the borders in <video> tag, how should I correctly redefine this? This is in ape.js here:

    var attrs = {
      iframe: {
        id: (elm.id)?'iframe_'+elm.id:'',
        src: src,
        style: "border: 1px solid black; display: block; width: "+W+"; height: "+H+";"+align,

Finar January 28, 2023, at 07:43 PM

You can add this to pub/css/local.css: -- Petko January 28, 2023, at 08:13 PM

span.embed iframe {
  border: none !important;
}

You probably meant span.embed video { border: none !important; }

Yes, it works, but I suggest remove the border by default, because of this border slightly changes the aspect ratio and looks buggy in Firefox:

Note there is thin white col between the video and border.

Also, if I need to remove (or change) "width:" and "height:" attributes from all <video>'s in my project, is there any way to do it keeping ape.js source code intact?

Finar February 13, 2023, at 11:40 AM

Agreed. 1. Removed all borders, people can re-add them with uApePrefs in ape-local.js, see below. 2. It is now possible to remove width and height either via the WikiStyle %embed noWH%, or via uApePrefs, see below. --Petko February 13, 2023, at 01:34 PM

var uApePrefs = {};
uApePrefs.video = {};
uApePrefs.audio = {};
uApePrefs.iframe = {};
uApePrefs.embed = {};
uApePrefs.svg = {};

// restore border for all tags except audio
uApePrefs.border = '1px solid black';

// add border for specific tag
uApePrefs.iframe.border = '4px dashed green';

// disable width and height for all
uApePrefs.noWH = 1;

// Disable width and height for video and svg tags:
uApePrefs.video.noWH = 1;
uApePrefs.svg.noWH = 1;

Great! Thanx, Petko!

For documentation, there is an example how to disable width and height on the whole project:

var uApePrefs = {};
uApePrefs.video = {}; // note this string must exist if you want no chane <video> tag's properties below
uApePrefs.video.noWH = 1;

Finar February 13, 2023, at 06:08 PM

[Closed] Two Suggestions

Exellent work! Thanks to the developer. I have two suggestions:

1. For HTML5 audio, 'width=...' should apply to the control bar.
2. How about use <figure class="embed"> instead of <span class="embed"> for the outermost element? Text after the filename (or the link) could be the content of the <figcaption>. For example:

%embed% https://youtu.be/XXXXX This is a video about ...%%

    <figure class="embed">
        <video...>
        <figcaption>This is a video about ...</figcaption>
    </figure>

--cakifaliw 2021-06-25 19:00 UTC+8

Thanks, with today's version, setting width and/or height to the wikistyle will also set it for the audio element. Ape doesn't make a span element, PmWiki produces a span element from the wikistyle, and Ape simply embeds itself into it. --Petko June 25, 2021, at 11:50 AM

[Closed] Support for Odyssee please.

Odyssee (https://odysee.com/) supports an embed code for their videos:

    <iframe 
      id="lbry-iframe" 
      width="560" 
      height="315" 
      src="https://odysee.com/$/embed/reiner-fuellmich-2/c4c450309dda14c2d1cbf6f4fbf83b516078accd?r=ACdMF7q2h91Z6x8bRJRM5ZV3HwQQAC9L"
      allowfullscreen>
    </iframe>

This the Odyssee URL for the above embed code which is hardly similar.

    https://odysee.com/@jermwarfare:2/reiner-fuellmich-2:c

-- casperl

uAPErx.push([/^(https:\/\/odysee.com)\/@[^/]+\/([^:]+):.*$/, '$1/$/embed/$2/']);

[Solved] Why I see only a link?

I installed as described, after updating to the latest version.

I pasted in my page https://www.marzocchi.net/Olafsen/Hardware/CurrentKoboLibraH2O the line

https://youtu.be/HfV1povb-BU

as instructed. What I get is only a line with a link, basically the recipe is not active. You can see my configuration on https://pastebin.com/pqCXa59h where I put at the end the snippet listed on the recipe page.

I'm trying to find where is the problem, but I have no ideas.

I tried the same YouTube link in the sandbox at https://galleries.accent.bg/Cookbook/Ape and the link works.

Somehow the recipe is not loaded.

I use the not2simple skin, which is quite old, but changing that one would be quite involved and I would leave it as last resort.

Thanks!

See the first sentence in the Notes section of the documentation. The change is simple, but if you prefer, you can use another skin. --Petko August 08, 2020, at 09:25 PM

Thanks, it was not there. Adding the string before the /body didn't work, but the skin has a <div id="footer"> and by adding the string before said section made the recipe to work.

Adding the string <!--HTMLFooter--> before any HTML elements is not expected, and many recipes that inject JavaScript in $HTMLFooterFmt and even the PmWiki core (pub/pmwiki-utils.js -- TOC, obfuscated email links) may not work well. Changing </body> to <!--HTMLFooter--></body> should work. Note, this is the closing </body> tag with a slash near the bottom of the template file, not the opening <body> tag after the header. --Petko August 10, 2020, at 07:03 AM

[Closed - stale] Midi audio files

Is it possible to add support for .mid audio files? This is to replace the Cookbook:WMPlayer recipe.

Since browsers cannot play midi files, you need to convert those to mp3 (largest browser support), opus, ogg vorbis, or flac. Is there some external service that does this automagically? (Ape can be configured to rewrite the links.) --Petko June 04, 2020, at 07:59 AM

[Closed] Add support for google groups

Would it be possible to add support for google groups, viz [updated 2020]

<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/a/ttc.org.nz/forum/embed/?place=forum/ttc.test'
     + '&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

  var uAPErx = uAPErx || [ ];
  uAPErx.push(  [
      /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)
    ]);

%embed% [[https://groups.google.com/a/ttc.org.nz/forum/?place=forum/ttc.test&showsearch=true&showpopout=true&showtabs=false | visit google group]] %%
and something like
-> [@[/https:\/\/groups\.google\.com\/(.*\/)?forum\/embed\/\?place=(.*?)\&(.*\&\S+)/i,
       'https://groups.google.com/$1forum/embed/?place=$2&$3'
       + '&parenturl=' + encodeURIComponent(window.location.href)
    ]

I suspect there is a communication problem here. Like with all other platforms, you need to place in the wiki page only the link to visit the forum, not the link to the embedded frame. People who have not enabled JavaScript or who have very old browsers, can still open/browse the remote content. Ape, with the regular expressions, will calculate the URL of the embedded frame from the plain link. It appears to work fine here (tested on Firefox both while logged in and with a private/incognito window). --Petko April 13, 2020, at 12:14 PM Also on your page https://ttc.org.nz/pmwiki/pmwiki.php/Webteam/TestEmbed. --Petko April 13, 2020, at 12:23 PM

Ah, I now appreciate the difference. However for the advanced user may still want the ability to specify parameters to alter what is shown and available. I think that there is a use case to support both types of URL. I note that the URL https://groups.google.com/a/ttc.org.nz/forum/embed/?place=forum/ttc.test&showsearch=true&showpopout=true&showtabs=false does still in fact open correctly.

  uAPErx.push([
      /^(https:\/\/groups\.google\.com\/.*\/forum\/embed.*)$/i,
       '$1&parenturl=' + encodeURIComponent(window.location.href)
    ]);

[Closed] URL parameters stripped?

On a webpage I have

 The HTML output appears to be

The URL parameters have been lost.
How do we preserve the URL parameters in the %embed%?

Embedding spreadsheets, presentations and drawings from inside Google Docs were never officially supported. I see that you added them to the documentation, but even partially working is an unexpected coincidence. I've released a new version that hopefully properly embeds the new types of documents. Please test and report. --Petko April 10, 2020, at 06:58 PM

[Closed] Set Initial volume control

When I play an HTML 5 video the volume is always set at maximum
which then blasts the audio very loudly. Can you please add a
volume attribute that would adjust the volume to a preset percent
so I do not have to adjust the volume everytime I start the video?
Code would be something like:

  document.getElementById("myVideo").volume= 0.5 ;

Markup attribute could be like "volume=.5"

I added initial volume setting to recipe HTML5Video

--gnuzoo

$HTMLFooterFmt['volume'] = '<script>setTimeout(function(){
var i, x = document.querySelectorAll("audio,video");
for(i=0; i<x.length; i++) x[i].volume=.5;},999)</script>';

Petko, That works, but the video displays along with the volume button, then the volume button moves.
It is annoying to see things move/jump/reposition after displaying them.

Here is a solution that does not use javascript if you use Firefox

1 Adjust the default value in firefox - enter "about:config" in the browser's address bar
2 Confirm that you will be careful if this is the first time you open the configuration screen
3 Search for the preference "media.default_volume"
4 Double-click on the line and a prompt should appear
5 Adjust the value to something between one and zero. 1.0 is 100% volume, .5 is 50%, .1 is 10 %, ...

Enjoy having your media not blast you!

--gnuzoo January 16, 2024, at 04:45 AM

[Closed] Multiple formats for one video for HTML5

> For both tags, you can link to multiple formats, from which the browser could select the first one it can
> perform (Audio: ogg, flac, mp3, wav, oga, opus; Video: mp4, ogv, webm).

Can you please document how this is done for HTML5 videos? Can the 2 video formats use the same poster?
--gnuzoo

It is documented at Ape#html5. Place the links to the different formats in the same %embed%...%% wikistyle, and if you want a poster, add it to the first video link. The demo page has an example with 3 video formats and one poster. --Petko January 29, 2020, at 07:23 AM

Please look near the top of

https://galleries.accent.bg/Cookbook/Ape-Sandbox

It shows that the HTML5-like stuff appears to play the other video when one finishes.
I am thinking it is supposed to only play one of the 2 videos
and use the same poster for both.
BTW, I am using FireFox on Ubuntu
--gnuzoo

There are 2 problems with that. The first is the poster URL was typed http://gnuzoo.org/guitarstuff/images/images:paul_mccartney.jpg which does not exist, when I removed the red part it works. The second problem is the OGV video file is corrupted and the error console shows it cannot decode 49 frames, about 2 seconds before the end, so then Firefox loads the second video. When I switched these in the %embed%, first MP4, then OGV, with no errors in the mp4 file it only plays it once. It is possible that your OGV file was not fully uploaded, check this. The poster is only shown before the video starts playing; when it pauses or finishes, the last played frame stays on, not the poster. (As the Ape-Sandbox page is on a HTTPS protocol and your files are not, some browsers may refuse to load the picture and/or the videos -- this isn't related to Ape.) --Petko January 30, 2020, at 05:16 AM

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

   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

 
>>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
@]

 
.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;
}

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

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

  $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>'));

Thanks for the pointers!

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

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

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

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

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.