Test Drive & A Few Little Questions

[OneManLaptop]

It's a pleasure and I'm happy for our little studio to be recognised as a supporter.

I'll do my best to spread the word. I think WCMS holds real appeal for bespoke designers who want a CMS system which is basically invisible to the design process. I've already previewed the CMS to two of my clients and they're thrilled. Right now they're having to use Cushy CMS which abstracts the content away from the design, but when I showed them that they can now edit the text on the website itself, it's just so much more straight forward for them and they don't need any long explanations, they instantly get it and start editing straight away.

Anyhoo, as you say onward and upward, happy to be along for the journey.

[wiz]

Honored to have such supporters along the way.

Hoping the upcoming versions will be even more seamless (such as the Summernote editor/or other editors ability to not enable users to do too much of a mess with uploading files).

Really appreciate your feedback - cheers to slow and steady growth and awesome partnerships.

[OneManLaptop]

Hey Wiz, just a quick question. I'm afraid I'm going to betray my lack of PHP experience here, but I can't figure out why these bits of code don't work:

Code: Select all

<?php if ($Wcms->loggedIn === true) { $Wcms->js(); } ?>

Code: Select all

<?php if ($Wcms->loggedIn === true) { echo("<link rel='stylesheet' rel='preload' as='style' href='$Wcms->asset('css/style.css') '>"); } ?>

You can see what I'm trying to do, would you mind showing me how I should be writing that out... thank you kindly.

[wiz]

Hey OneManLaptop, hope you're doing amazing!

Absolutely, this should work:

Code: Select all

<?php
    if ($Wcms->loggedIn === true) {
        echo $Wcms->js();
    }
?>

and for your second example

Code: Select all

<?php
    if ($Wcms->loggedIn === true) {
        echo "<link rel='stylesheet' rel='preload' as='style' href='$Wcms->asset('css/style.css') '>";
    }
?>

Note: when echoing the above, you don't need the "()" after echo.
Here's an example of the incorrect usage (formatted)

Code: Select all

<?php
    // Non working example
    if ($Wcms->loggedIn === true) {
        echo ("<link rel='stylesheet' rel='preload' as='style' href='$Wcms->asset('css/style.css') '>");
    }
?>

Hope this helps, let me know how it works out for you

[OneManLaptop]

Brilliant, thanks a lot bud. Slight change to the CSS one and it all worked a treat:

Code: Select all

<?php echo "<link rel='stylesheet' rel='preload' as='style' href='".$Wcms->asset('css/style.css')." '>"; ?>

Thankfully my other projects have been rubber stamped so I'm really optimistic about having my first Wonder CMS project finished before the end of the month.

[wiz]

No worries at all, glad to help if time permits.
If you run into any other hiccups, feel free to post back and we can make your deadline a reality.

[OneManLaptop]

Brilliant, thanks.

As you can tell, this is my main project right now so sorry to keep bothering you, I really don't take your time or help for granted so thanks for whatever time you can spare, there's absolutely no obligation on your part as I'm probably going to be a bit of edge case in some of my uses of WCMS, so when there's no easy answer, just let me know and I'll either work around the problem or find another way of doing things.

So today's problem, haha. The site I'm working on isn't really multi-lingual, but it does have two language specific pages and it would be really handy if I could just set the language of these files. So here's what I thought would work:

I've added this to each page in the database:

Code: Select all

"lang": "en",

Then I've tried to call it in the theme page with this:

Code: Select all

<?= $Wcms->page('lang') ?>

Alas, nothing is being written. I've had a peek in the index file to see if there's anything there I need to edit, but that's obviously a risky strategy as it will get overwritten with the next update. I tried:

Code: Select all

<?= $Wcms->get('config', 'lang') ?>

That works, but swapping config for page doesn't, which is obviously the functionality I need.

So that's one down!

The next problem. I'm trying to check what the page id is, so that I can write an extra little bit of functionality. It's nothing more than adding a "current" class to the custom nav I've written. So I tried this on one of the links:

Code: Select all

<?= if ($Wcms->page('title') === "events") print "current" ?>

Which causes the site to crawl away screaming at the unhealthy shapes I'm trying to bend it into... and so here I am... again.

Once I get on top of those two I'm really on the verge of tying this all up. The final step will be to get the pages to recognise my custom language files. I originally had a config.php file with this in it:

I'm basically converting a website which uses PHP switch to load pages, so my setup looked something like this:

Code: Select all

$id = isset($_GET['id']) ? $_GET['id'] : '';
$id=str_replace("/","",$id);

switch($id) {
		
	default://only added to default page
	case "English":
	$thisPage = "English";
	$title = "English Website";
	$desc = "Our English Website.";
	$lang_file = 'lang.en.php';
  	$langName = 'en';
	$page = "pages/en/$thisPage.php";
	break;
	
	case "Dutch":
	$thisPage = "Dutch";
	$title = "Dutch Website";
	$desc = "Our Dutch Website.";
	$lang_file = 'lang.nl.php';
  	$langName = 'nl';
	$page = "pages/nl/$thisPage.php";
	break;
	
	case "French":
	$thisPage = "French";
	$title = "French Website";
	$desc = "Our French Website.";
	$lang_file = 'lang.fr.php';
  	$langName = 'fr';
	$page = "pages/fr/$thisPage.php";
	break;

}

include_once 'languages/'.$lang_file;

?>

Then I would call the correct languages loaded from the language files like this:

Code: Select all

<?php echo $lang['PAGETITLE']; ?>

Right now, I'm unsure how to convert this method to something WCMS friendly, so any pointers you can offer would be much appreciated.

As I say, I hope I'm not becoming a nuisance. As and when you have the time to help, then it's much appreciated but only when you have the time available. I really do plan to build a kick ass template for WCMS when I'm done though. Thanks again and as far as I can tell, I'm nearly, nearly done!

[wiz]

Glad to help out, no nuisance here

There's a little hackier/easier way of setting different languages for the html in the beginning of your document.

Code: Select all

<!-- Custom html lang for specific pages -->
<?php
    if ($Wcms->currentPage == 'yourPage1' || $Wcms->currentPage == 'yourPage12 ) {
        echo "<html lang="en">";
    } else {
        echo "<html lang="en">";
    }
?>
 

With your example, please note that when using

Code: Select all

<?= $Wcms->get('config', 'lang') ?>

This calls the lang parameters from the config part of the database (where we also save the password), not inside the pages.

If you save the "lang" parameter in each one of your pages (database), then this should call it correctly

Code: Select all

<?= $Wcms->page('lang') ?>

In regards to adding "current" for active pages, note that WonderCMS should already add the class "active" in the page you're already visiting.
If you'd like to hardcode your menu, something like this works:

Code: Select all

<nav>
    <ul>
        <li class="<?php if ( $Wcms->currentPage == '/' || $Wcms->currentPage == 'home') : ?> active<?php endif ?>">
            <a href="/" title="Home">
            Home
            </a>
        </li>
        <li class="<?php if ( $Wcms->currentPage == 'about') : ?> active<?php endif ?>">
            <a href="/about" title="About">
            About
            </a>
        </li>
    </ul>
</nav>

In regards to the last part, I don't fully understand what you're trying to do, and creating a plugin for this might be easier, if I understand it correctly. But first, let's make the above work, as you expect it to, and then move onwards.

How has your project been progressing?

[OneManLaptop]

Thanks a lot Wiz, that's really helpful. Yeah, the end is in sight for my project now, got the languages and everything working great. The only strange thing I've encountered is every now and again, a pages content will perfectly duplicate and sit itself underneath the original content. Is this something you've ever come across before?

It could be because I've got my editing tools open and sometimes the database file is open? I don't know? I can't recreate it reliably and I've tested it a lot but every now and again I'll notice everything has randomly repeated itself! As I say, I'm editing so it's possible wires are getting crossed but I'm just wondering if this is something you've ever come across? I'll keep an eye on it.

Hoping to be done by the end of the week and I'll share what I've done.

Oh and just an additional question. When there is an update found, what happens? Does the page refresh, does the user get a notice, is the update performed automatically on a new screen or is the user prompted to download the updated files themselves? Thanks, just writing some documentation for the client and I like to let them know what to expect.

One last thing, I went to make a backup yesterday and got this error:

Code: Select all

Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 90958304 bytes) in /Applications/MAMP/htdocs/WebDev/Development/wonderTest/index.php on line 2144

Not sure what to do about that?

[OneManLaptop]

Soooooo... today was the big day! My first Wonder CMS project is live and I'm delighted to share it with you at:

https://irishmarys.be/

So as you'll have seen from the screenshots you'll have quickly scrolled through ( ) I made a few tweaks and modifications to WCMS, which I'd like to explain my thinking on and get your feedback.

Firstly, I was careful not to do anything which would break native behaviour. I've used a mix of CSS overrides, JS MutationObserver and clone to mask default behaviour and implement my own spin on top. Very little has changed with the base editing experience, the modifications I made were mostly around user experience and presentation.

Custom Login:




As you can see I went with a custom login solution, both for practical and aesthetic reasons. I do think a purpose designed login window helps to let the client know they're in safe hands. If the first thing they see when they login looks good and functions as expected, it puts them at ease that everything which follows will be of a similar standard. First bite is with the eye kind of thinking.

When I first installed WCMS, I actually missed the original login, as it embeds itself where the content starts and as my editable content was a little way down the page, it wan't immediately apparent that I'd successfully logged in, haha, so I think it solves that problem too.

When people click on login, the white notice bar slides down and just explains about the update system. What has been causing me to sweat a bit, is that I am of course unfamiliar with how WCMS behaves when it does detect an actual update! I've had to force hide the save id overlay, but I've left the cache one alone, I hope that means users will receive the relevant notifications!


Wonder Bar:

The next big change I made was to build a central feature when the user was editing, I like to call it, the....






This is the biggest change I made, so let me explain my thinking.

One of the first things I noticed about the CMS which I wasn't a fan of, was that the notifications would re-appear whenever you flipped between pages. When editing multiple pages, constantly closing these became a bit of a chore, so whilst I didn't want to hide them, I thought I would put them a little more out of the way and so the Wonder Bar was born.

To prevent the bar from sitting in the way of people's designs, I made it resizable and draggable but it remains fixed to the bottom of the website as I didn't want people hiding the admin buttons by mistake and then wondering how to exit the CMS. The admin buttons themselves made the journey via clone and append to my Wonder Bar. I wanted to decouple them from the nav bar, because (as you can see with this website) it's not always easy or even possible to place them next to the set navigation and anything which separates CMS elements from website design, I'm all for.

Wonder Bar contains the notifications, editing instructions and the admin buttons. You'll also notice I built in a realtime 10 minute countdown, which resets every time the CMS detects a save. If ten minutes pass with no recorded save, this pops up:



This is a little hacky right now and something I'll need to return to, but it works as a simple fallback for now.

Anyway, speaking of saves... the other major function of Wonder Bar is to give the save notification somewhere new to live. A nice home, a warm home, somewhere away from the wilds of a modal box. He now sits with his fellow notifications, pushing them down slightly whenever a save is detected and hiding again when completed. I did a number of stress tests on this, to ensure that the overlay wasn't necessary to prevent people making continued edits during a save. In my tests the process of saving is so quick that I couldn't artificially create any instances of corrupted content. If it does prove a problem, I can always install a fully transparent overlay, but I'd be very reluctant to do so. The original overlay actually interfered with editing when people would try and use the Summernote toolbar and this solution resolves that.



Summernote:

So... Summernote. There were a few bugs I noticed with Summernote. The first was that the icons for images and file were missing, so as my website used Font Awesome anyway, I added the relevant classes to the missing buttons and re-added the icons through that method. I had wanted to use Summernote Air, but there were several problems with it:

• All options required a double click to register in Safari. (Chrome was fine)

• Image / Document uploader functionality is missing ("select from files" option just wasn't there).

• Summernote air editor doesn't trigger any save notification, I checked this with a clean install to verify.

This left me needing to use the static Summernote editor, which is far more stable... but static. The biggest problem with this was that for long blocks of text, people would have to highlight the text they wanted to style, then scroll back up to the top of the page, select the styling, assume it worked and then scroll back down to the highlighted text to resume editing. Not the handiest of systems so I fiddled around with the CSS a bit and made the static Summernote toolbar a sticky one. So now each toolbar for each editable section scrolls along with the text. I also styled it a little to make it look more like an independent element.



News Editor:



This is a nice little bonus, but I needed an easy way for the client to add / remove news items, so I built an easy to use little news editor. Clicking the green button will generate a template article with today's date automatically added, the red cross deletes articles.

Anyhoo, I think that's it! It's very much a "version 1" in terms of my own modifications and I'll doubtless need to revisit them to tighten them up and make them more compatible with future updates. If you like any of the modifications I've made, then I'd be happy to work with you in implementing them in the core software, if not then that's absolutely fine too, I'll continue to use these for my own projects.

To wrap up I just want to say again, what a pleasure this software was to work with and I commend yourself, StephanStanisic and all the other contributors who have got the software to where it is and for your vision and stewardship of it. WCMS has been the missing piece in my workflow for years now, so I look forward to working with you all in helping to make it the best it can be and putting it under the nose of as many devs as possible.

Thanks for answering my support questions along the way. The previous backup bug seemed to be unique to my MAMP setup, so that's good. Speak later bud.