Replacement for simpl_gallery2 soon to be released.

The current and earlier version of simpl_gallery use a javascript framework called “gallerffic”. It was written by Trent Foley in 2009.

Sadly Trent no longer appears to be maintaining the code, so it is now becoming limited in its usefulness. In particular I have had requests recently for simpl_gallery to display PDFs, and to allow for image collections on external storage sites, which is not easily achieved with the current code.

So I made the decision to look for an alternative framework. It looks like “Galleria” from galleria.io is going to be the most powerful alternative. It can include images from Picasa web, and Flickr, as well as PDFs.

I currently have a demo gallery of what will probably be known as “simpl_gallery3” now running on the kiwitrees demo site . Please take a look and let me know here if you see any issues, or improvements.  I aim to release it around the same time the next upgrade of webtrees happens (w1.4.2)

phpMyFAQ 2.8.0 released

If you have been following our articles here on using phpMyFAQ in webtrees, then you should now upgrade your pMF installation with the latest stable release of version 2.8.0 as soon as possible.

Update instructions are available at the phpMyFAQ documents page.

No changes to the instructions already given for incorporating into webtrees.

Simpl_menu2 modifed

A slight modification to simpl_menu2 has just been released. It adds an option to “open in a new tab or window” to each menu item you create.

This is not often required, but during the development of the articles about “An alternative to webtrees’ standard FAQ”  it was clear that would be a useful option for the menu link to the FAQ administration pages.

If you find yourself needing to frequently use the [right-mouse click and select “open in a new tab”] trick regularly, then this should make life a little easier.  😎

To upgrade just download the new version, then copy it’s contents to your server replacing all the files in the existing module.

An alternative to webtrees’ FAQ module – optional extras

Since “finalising” the method of incorporating phpMyFAQ into webtrees I have been giving more thought to some of the components of pMF that I removed as part of the style and layout changes.

A couple of them could possibly be more useful than I had thought, so here I will explain how to put them back.

Also, I will use this post to list and discuss any ideas you or I might have for other improvements. Just add a quick comment here describing how you think the integration of pMF into webtrees could be improved, and I’ll see if it can be accommodated.

Languages

This is in fact a topic already discussed under comments to the 4th article, but I thought I would add it here as well, in case it gets lost among other comments there.

Because we are displaying pMF in an iframe inside the webtrees page, we need to somehow transfer the language selected in webtrees across to the pMF code. I discovered it is in fact quite easy.

If you have followed all the previous articles, you will have created a file called phpmyfaq.php or similar in the root of your webtrees folder. This is the file you link the simpl_menu module to. In that file the last two lines will be similar to:

?>
<iframe id="myFrame" src="phpmyfaq/index.php" width="98%" scrolling="no" frameborder="0" style="width:100%;"></iframe>

Just replace those two with these three:

$lang=substr(WT_LOCALE, 0, 2);
echo '<iframe id="myFrame" src="phpmyfaq/index.php?lang='. $lang .'" width="98%" scrolling="no" frameborder="0" style="width:100%;"></iframe>';
?>

That takes the language from webtrees, reduces it to the 2-character form pMF uses, and then translates the pMF page to the same language. There are two issues to consider though:

  • It is possible that not all the same languages are available in both products. If the webtrees language does not exist in pMF it will default to English.
  • You will need to create your own language versions of each FAQ in pMF. Refer to the pMF documentation for how to do that.

pMF menu options

By removing the header section of pMF, necessary (in my opinion) to avoid too many menu structures, we lost the following options: Instant Response; Add a new FAQ, Add question, Open questions, Administration, Login.

Of these, Administration was covered, by using a second menu item in simpl_ menu, covered in the 3rd article in this series; Login cannot be used without a complex single-authority sign on system across webtrees and pMF which is beyond the scope of this project (and my abilities); and Instant Response is a variant of the Search option so not, in my opinion, an essential component.

The remaining three, might however be of use to some of you. Putting these back is easily done in just two steps:

  1. Create a copy/new version of the root file “phpmyfaq.php” (as created in part two of this series). Call this one something like phpmyfaq_ask.php, or phpmyfaq_add.php or phpmyfaq_open.php. You might even decide to add all three.
  2. Create a new menu item in simpl_menu for each of these new files, and set it’s permissions appropriately. I recommend you set these to “show to members” or higher. Allowing public access to these is likely to result in considerable spam, even if you use pMF’s “captcha” option.

For myself, I think I will only need the “Add question” option, so will explain the changes to the new phpmyfaq_ask.php file for that one. The others will be similar, but with slightly different “action” code, as you will see. If you created the new file from a copy of phpmyfaq.php, then near the end you will have something like this line:

echo '<iframe id="myFrame" src="faq2.8/index.php?lang='. $lang .'" width="98%" scrolling="no" frameborder="0" style="width:100%;"></iframe>';

To this just add “&action=ask” inside, like this:

echo '<iframe id="myFrame" src="faq2.8/index.php?lang='. $lang .'&action=ask" width="98%" scrolling="no" frameborder="0" style="width:100%;"></iframe>';

That is the main change, but to be correct you should also change these (highlighted) lines at the top of the file to this (or similar for other variants):

<?php
define('WT_SCRIPT_NAME', 'phpmyfaq_ask.php');
require './includes/session.php';
$controller=new WT_Controller_Page();
$controller
	->setPageTitle(WT_I18N::translate('Add question'))

That all there is to it. I did however also go to pMF’s configuration (under “spam protection”) and disabled “captcha” as I don’t feel it is necessary for registered members who are already logged in. If you want to add “Add a new FAQ” use instead “&action=add”, and for the list of open questions use “&action=open”.

Now your site members can add their own questions to the FAQ pages, which you can review, answer, and publish if you wish.

Final part of “An alternative to webtrees’ FAQ module”

In this final part I want to address the more detailed changes necessary to make phpMyFaq (“pMF”) appear to be a fully integrated part of webtrees. This will entail creating a complete webtrees template to replace pMF’s default one, therefore I only intend making this for the webtrees “standard” theme. But I will annotate the changes so that anyone else can fairly easily create versions of any other theme. The completed pMF template will be added to the simpl-add-ons pages here for download. I will gladly included anyone else’s templates in the package if they are sent to me. I also fully expect to miss some layout styles in this first attempt, so don’t hesitate to let me know so they can be included in later releases.

A pMF template consists of layout files (html), style sheets (css) and images.

Layouts

The layouts will only need changing once (unless you want a different one to mine) for any webtrees theme.

  1. index.tpl is the main structure of pMF. 
    1. All changes discussed in part 3 of this article are kept.
    2. I have removed a series of IE version checks, and meta tags from here, as they are not required due to the page only being displayed within a webtrees iframe.
    3. Move Sticky FAQs to the top of the right-column.
    4. The rest of this can remain as standard pMF.
  2. main.tpl provides the layout for pMF’s “home page”. I’ve chosen to leave this alone, including retaining their “News” articles. In my view, within webtrees, this is likely to only contain one article, perhaps describing the purpose and how to use the FAQ pages. Other’s may prefer to make greater use of it.
  3. startpage.tpl is the page used to display each individual FAQ. No major changes here except to remove a section used to display social media icons. These are inconsistent with webtrees, unless you have added your own, and then these would simply duplicate those.
  4. catandtag.tpl is used to display category pages. Social media links are also removed from here.

Style sheet

The main file, style.css, is where the bulk of the remaining changes need to be made. If you use RTL language son your site, you may also need to review the file style_rtl.css. I have not touched this file.

  1. First, change the overall font to match webtrees standard, by replacing two instances of “font-family:”Trebuchet MS”,”Helvetica Neue”,Helvetica,Arial,sans-serif” with “font-family:tahoma, arial, helvetica, sans-serif”; reduce the font-size to 12px; and change the base color to #555 in the same places.
  2. Change header font sizes (h2, h3, h4) to 18, 16, 12px respectively, and the line-height for h1, h2, h3 to 24px.
  3. Change the styling of the various “blocks”, which use the class “.well” in pMF to use:
    #content .well{background-color: #edf7fd; border: solid #81a9cb 1px; margin-top: 10px; padding: 3px; vertical-align: top;}
  4. Add webtrees styling for tabs:
    .nav-tabs {margin:0; padding:.2em .2em 0; border-radius:3px; border: 1px solid #b2c7d7;background: #e7eef3 url(../images/ui-bg_highlight-soft_100_e7eef3_1x100.png) 50% 50% repeat-x;color: #222222;font-weight: bold;}
    .nav-tabs>li{border: 1px solid #cccccc;background: #e6e6e6 url(../images/ui-bg_glass_80_e6e6e6_1x400.png) 50% 50% repeat-x;color: #444444;font-weight: normal;margin: 1px .2em 0 0;border-bottom: 0;border-top-right-radius: 3px;border-top-left-radius: 3px;}
    .nav-tabs>li a{padding: .5em 1em;}
    .nav-tabs>li.active{border: 1px solid #2694e8;border-bottom: 0;background: #99c2ff url(../images/ui-bg_glass_50_99c2ff_1x400.png) 50% 50% repeat-x;}
  5. Add the following new or over-writing styles to the bottom of the style sheet:
    p.copyright {font-size:80%;margin:0 30px;} /*adjust size and position of copyright link in footer */
    header h3 a img, #newsRSS, #rssCategoryLink a img{display:none;} /* hide rss icons */
    .btn-primary, .btn-primary:focus,.btn-primary:active{color:#555;background-color:#fff;*background-color:#fff;background-image:none;margin:5px 5px 0 5px;text-shadow:none;margin:5px 5px 0 5px;}/*remove orange background from button */
    .btn-primary:hover{color:#f00;background-color:#fff;*background-color:#fff;background-image:none;text-shadow:none;}/*remove orange background from button */
    .form-search .input-append .search-query {border-radius:0;margin:5px 0 5px 5px;} /* remove rounded corners from search box */
    #content .categories {font-size:inherit;} /* change font size in "categories" block */
    #content .breadcrumb{background:none;padding: 8px 0} /* remove background from breadcumb element */
    .label-info[href], .badge-info[href] {text-shadow: none;font-weight: normal;padding: 3px 5px;background-color: #edf7fd;border: solid #81a9cb 1px;} /* change format of article links */
    .label-info[href] a, .badge-info[href] a {color: #555!important;}/* change format of article links */
    .label-info[href] a:hover, .badge-info[href] a:hover {color: #f00!important;}/* change format of article links */
    li a:empty{display:none;} /* hide emty list elements */

That covers all the style changes, until someone reminds me of the ones I have missed. 😛

Images

For the webtrees standard theme we just need to add three images, the ones used in the style sheet changes above for backgrounds to the tabs.

Other things to consider

As a final part to the set up I recomend the following

  1. As mentioned above, add a “News” article to help your users understand the FAQ pages, and how to navigate them (see sample image below)
  2. The default setting for number of items in the “Most popular FAQs” and “Latest FAQs” is 10 items. I find this too long, so changed it to 5. The control for that is in faq/config/constants.php. Look for define(‘PMF_NUMBER_RECORDS_TOPTEN’, 10); and define(‘PMF_NUMBER_RECORDS_LATEST’, 10);

Here are some images from my test site, using pMF in the webtrees theme.

faq3 faq4 faq5