CVW Web Design Blog https://www.cvwdesign.com/blog/ Articles about web design and development from the perspective of a UK-based freelancer Adding site styles to Redactor editor in Perch https://www.cvwdesign.com/blog/adding-site-styles-to-redactor-editor-in-perch https://www.cvwdesign.com/blog/adding-site-styles-to-redactor-editor-in-perch With many of my Perch CMS sites, I use Redactor editor which is installed as a Perch core file. I like the editor (although it has a few quirks on occasion). 

Redactor doesn't have any kind of preview mode although drafts can be previewed in Perch itself. So, on some of my personal sites, I find it's nice to have another "preview" option, between page preview and a full editor live preview mode. I do this by adding some of my site styles to the Redactor editor text area. I realise that there are some caveats with this approach (what if the styles change from page to page?) and that this isn't for everyone or for every site. However, it's relatively simple to do and here's how.

Firstly, you will need a custom style sheet for the Perch UI. Now, you can add styles for the <div> that wraps the editor's text area. This normally has a class called redactor-styles.

Here are two that I've used on another site:

.redactor-styles .highlighted { 
   background-color: #efefef;
   padding: 1em;
}
.redactor-styles blockquote { 
   background-color: #e0e0f4; 
   border-left: 5px solid #66c; 
   padding: 1em;
}

In the first case, my site has a highlighted class on some paragraphs. I can add this by editing the source (source button) in Redactor. Then, my custom style sheet rule means I can see this in the editor.

In the second case, I've added my <blockquote> site styles.

I like to have more padding on both these elements in the editor as well :-)

There are other things you can do. Perhaps it would be useful to have the heading styles more like the site? Or, you may want to increase the text size for SimpleMDE editor. Anyway, I hope this post has given you a few ideas.

]]> Wed, 31 Oct 2018 09:29:00 +0000 Working with Perch https://www.cvwdesign.com/blog/working-with-perch https://www.cvwdesign.com/blog/working-with-perch I love working with Perch CMS and it's a very flexible and powerful system. Here's my Perch workflow and a few of my favourite things about working with it.

Layouts and pages

On a new site build, I build a static page(s) first. Once I have 2-3 pages (or sometimes only a single page), I add Perch layouts for common elements, for example <head>, <footer>, navigation menus etc. I might have .html files at the start of the process but I change to .php when adding Perch layouts. The .html pages are kept if I think I need them as a reference.

The Perch layouts are just static HTML at the start. I'm really just using Perch layouts like PHP includes at this point. For example, for site navigation, I have a static menu and I change to a Perch-driven menu later depending on the site requirements.

I might have a couple of Perch layouts for the <head> element because I like having a separate blog/news layout. I don't use layout variables much. Note to self: Maybe I should use them more.

Blocks

For site content, I use Perch Blocks as much as I can. For instance, on CVW Web Design, each page has a single "Page Content" region and this is assigned to a "Content - Blocks" template that has six items, for example "Text in Columns", "Heading and Strapline", "Content Row" etc. When adding content, I just choose different items for each page.

I want my pages to be a series of instructions

Each Block has all the mark-up needed to display that section of the page. I want my pages to be a series of instructions for PHP/Perch and this modular approach enables that.

Of course, for some clients, a page full of editable fields in Perch admin isn't the best approach and in these cases, I would separate out page content into separate regions.

Editors

I use Redactor most of the time because I've never been very keen to give clients an editor with Markdown. I'm not saying that clients won't/cannot learn Markdown but I just think this is another unknown for clients at the start of their CMS experience. And that's something I want to avoid.

I've used SimpleMDE editor on personal sites. I like it for my own use.

Perch admin

For Perch admin, I add a few custom styles similar to what Graham Street describes. I think this differentiates some areas of the admin better.

Apps

I use Blog and Forms apps the most. For the blog post page, I get the post data at the start of the page and add it into a $post variable that I can use anywhere on the page. This is different to the example post page that comes with the Perch blog add-on but it works better in many cases.

For third party apps, I like Chirp SEO and the Runway Backup Status Dashboard Widget

... and Perch Dashboard Links widget :-)

This is a short description of my Perch workflow. However, I hope it highlights a few things that will be useful for anyone working with Perch CMS.

]]> Tue, 17 Jul 2018 08:15:00 +0000 Perch Dashboard Links Widget https://www.cvwdesign.com/blog/perch-dashboard-links-widget https://www.cvwdesign.com/blog/perch-dashboard-links-widget I've been working on a Perch Dashboard Links widget. I wrote a Google Analytics widget a while back but haven't followed that up. So, I thought it was time to relearn a few things about Perch widgets.

The Dashboard widget is pretty simple. It enables a Perch admin user (or someone with access to Perch CMS admin Settings page) to add up to three links which are displayed as a widget on the Perch dashboard. The user can change the widget heading as well. Exciting, I know ;-)

I'm a big fan of this type of "side project" even if it's a simple example (like this). I learned things from doing it. During the development, a few issues came up that I hadn't thought of at the start so they had to be fixed. And I realised that there are probably a few smarter ways of doing things if I take the widget further. All part of the learning process.

I encourage everyone to do something like this. And to write about it. Even if you side project is not a full-blown app/add-on or you don't get very far with it, I still think it's worth posting a few words about it.

]]> Thu, 17 May 2018 09:54:00 +0000 A custom Help page for Perch CMS https://www.cvwdesign.com/blog/a-custom-help-page-for-perch-cms https://www.cvwdesign.com/blog/a-custom-help-page-for-perch-cms There are several ways to add Help text to Perch CMS page templates and regions. But, did you know, it's also possible to add a custom Help page for your users? Yes, there's a Setting for that!

A link to the default Perch Help page is on the top menu bar next to the Log Out button. The URL for this link can be changed to your own Help page. This would be useful to showcase Help tips that are important or especially relevant to your site's users, for example screencast videos.

In Perch -> Settings, there's a Help button URL field. Just add your own Help page link here, for example /help.php perhaps. This page could also be part of the Perch pages for your site so that users could add their own tips. 

]]> Thu, 26 Oct 2017 12:20:00 +0000 A list of Perch CMS add-ons by third party developers https://www.cvwdesign.com/blog/a-list-of-perch-cms-add-ons-by-third-party-developers https://www.cvwdesign.com/blog/a-list-of-perch-cms-add-ons-by-third-party-developers Update August 2018: I've created a new list of third party apps and add-ons that I will be updating regularly. Anyone can fork the repository and send in a pull request as well.

I have been including Perch CMS add-ons by third party developers in the Perchology newsletter since it started. Yet, there's no list or "marketplace" for add-ons. For my own benefits, I've started keeping a list and I thought it would be useful to publish this. Here it is.

I've tried to only include apps/add-ons that have been updated in the last year. However, please check each link to see when they were updated and/or contact the authors for compatibility information with Perch 2 or 3.

  • Chirp SEO gives Perch content editors the ability to analyse their content, and improve their on-site SEO. Add a keyword search phrase and check your content. Works with pages, collections Perch Blog add-on, Perch Shop.
  • Perch Image Optimiser reduces the size of uploaded images.
  • Event Logger tracks the activity of users. Useful for helping clients or for auditing your content editors.
  • Perch Locator for managing locations. Addresses are Geocoded and can be searched using coordinates or by a valid address to allow users to find places of interest near to them.
  • Member Tags gives administrators the ability to view and edit all tags used by the Perch Members app
  • Member Profiles for displaying profiles of members created with Perch Members.
  • Pipit Catalog provides an alternative listing page for Perch Shop products with image thumbnails and filtering options. It also highlights sale and stock states.
  • Pipit Sharing for sharing links to sites like Twitter and Facebook.
  • Pixelfix Shortcodes is an app to build support for Perch shortcodes.
  • YB Forum is a forum add-on. Users can add/edit posts to new or existing topics. Posts need to be moderated before they appear on the forum.

If you know other add-ons, let me know in the Comments, and I'll update the list. Thanks!

]]> Wed, 27 Sep 2017 09:47:00 +0000 How to customise Redactor editor in Perch https://www.cvwdesign.com/blog/how-to-customise-redactor-editor-in-perch https://www.cvwdesign.com/blog/how-to-customise-redactor-editor-in-perch Update: 5-3-18. This article was written for Redactor 2017. The Source plugin no longer exists on the Redactor site. I'll find out more and write another post when Perch update their version of the editor.

Summary: Adding a View Source button to Redactor editor in Perch. Customising the editor using other Redactor plugins.

Perch 3.0 comes with several textarea editors (Redactor, Simple MDE, Markitup) installed by default. It's easy to create a Perch template to use your preferred editor (Redactor in my case). However, you might want to customise the editor, perhaps expanding what it can do by adding more buttons. So, this is what I did to add a View Source button (Redactor Source plugin) to the default Redactor editor in Perch. This can be used with other Redactor plugins too.

I followed the section "Custom configurations for default editors" on this page. Only this section. It's at the end of the page. That's different to the section before it where you are creating a new editor.

The "Custom configurations" section is how to configure the default editor.

  1. Add define('PERCH_CUSTOM_EDITOR_CONFIGS', true); to your overall Perch config file.
  2. Create a config.js file like the example on this page (amend as necessary) and put it in addons/plugins/editors/
  3. Download plugins you need from Redactor site, e.g https://imperavi.com/redactor/plugins/source/, and put these in /addons/plugins/editors/redactor-plugins
  4. Test on local dev site. Upload new files to live site.

That should be it.

Login to Perch and admire your new editor functionality :-)

]]> Tue, 06 Jun 2017 08:54:00 +0000 How to display tags in each blog post with Perch https://www.cvwdesign.com/blog/how-to-display-tags-in-each-blog-post-with-perch https://www.cvwdesign.com/blog/how-to-display-tags-in-each-blog-post-with-perch I saw this post about showing post tags in the post.html template on the Perch forum recently. The post explains how to display tags for a blog post in the post's body rather than, for example, in a sidebar.

I've used this method on my Clive Walker site where I display tags at the top of each post (here for example). So, I thought it might be useful to summarise the code:

At the top of my post.php page (or in a Perch layout), I create a variable called tags_html containing my post's tags (using the perch_blog_post_tags function, described here). 

<?php PerchSystem::set_var('tags_html', perch_blog_post_tags(perch_get('s'), [], true)); ?>

In my post.html template, I have this code which displays the tags: 

<perch:blog id="tags_html" encode="false" type="hidden" />

It may not be immediately obvious but this uses a modified version of the Perch post_tag_link.html template to display the tags in an unordered list. The modifications are a class on the <ul> (so that I can use a tag icon background SVG image on the list items in my CSS) and a cleaner post tag URL. Relatively minor changes.

The hidden value means that this tags field is not shown on the post editing screen (there's already a tags field as part of the default Perch functionality).

That's it. I think it's useful to display tags with the post's content so I'm sure I'll be using this again.

]]> Tue, 09 May 2017 10:16:00 +0000 Did you know you can customise the Perch Admin user interface? https://www.cvwdesign.com/blog/did-you-know-you-can-customise-the-perch-admin-user-interface https://www.cvwdesign.com/blog/did-you-know-you-can-customise-the-perch-admin-user-interface This is a guest post by Graham Street from Streets Ahead.

Perch CMS provides the ability for you to make simple changes to the Admin interface (Admin UI). I've used it in the past to make the 'help' lines a little bigger, under input fields, for a specific customer. The additional CSS is added via instructions in a well-documented page in the Perch documentation and doesn't impact Perch core code.

The Perch Team have just released version 3 of Perch and Runway. The Admin UI has had a major change - a completely revised user interface that works much better on mobile devices. I like the new interface, it has some great improvements but only a few of my customers have seen it so far. Those that have like the simpler interface that's great for long pages, because you can 'fold up' (toggle/hide) parts of the region that you're not editing. But both they and I have found it's a little more difficult to visually see the different sections and fields, especially inside more complex regions.

I've concluded it is because some of the header backgrounds are very light and perhaps on some screens it's difficult to differentiate between them and the white background. Luckily this is easy to change by simple customisations of the CSS used in the Admin UI.

Using this page as a guide, this is what I did ...

1) Edit /perch/addons/plugins/ui/_config.inc and add this line:

<link rel="stylesheet" href="/perch/addons/plugins/ui/override_ui.css" />

2) Edit /perch/addons/plugins/ui/override_ui.css and add these CSS lines: 

form h2.divider {
    background-color: #eeeeee;
    border-top: 1px solid #aaaaaa;
    font-style: italic;
}
form h3.repeater-heading {
    background-color: #efefef;
    font-style: italic;
    font-size: 90%;
    margin-right: 25px;
}

The first change darkens the clickable fields headers, adds a line above them and adjusts the font. The second change does a similar thing for the repeaters header. Here are a couple of images showing the Perch Admin UI, before and after, on one of our customer's sites.

[Click to view larger versions]

screenshot

screenshot

At this point I should say that I am NOT a designer. There might be better ways to do this that provide a better user experience, but this has worked for me and my customers. What it does show is how flexible the Perch system is, and how easy it is to make minor changes to it.

Graham Street - Streets Ahead

]]> Thu, 06 Apr 2017 13:33:00 +0000 Learning about CSS Grid Layout https://www.cvwdesign.com/blog/learning-about-css-grid-layout https://www.cvwdesign.com/blog/learning-about-css-grid-layout There's an exciting new CSS layout method in the latest versions of Google Chrome, Firefox and Opera (see browser support). That's CSS Grid Layout which promises to revolutionise how we create page layouts. Here are a few links I've collected.

Update

Update 2

I'll update this post when I come across more great links about Grid Layout.

]]> Thu, 23 Mar 2017 12:51:00 +0000 How to edit forms in Perch CMS https://www.cvwdesign.com/blog/how-to-edit-forms-in-perch-cms https://www.cvwdesign.com/blog/how-to-edit-forms-in-perch-cms How can I enable a client to edit form fields via the admin area of Perch CMS? This cannot be achieved dynamically (where you pull in some content from another area of the site) but you can add some editability to a form's select input element using the following code. Here, I want the client to be able to edit the Subject input of their Contact form. 

<perch:label for="subject">Subject</perch:label>
<perch:input type="select" id="subject" options="<perch:content id="subjectoptions" type="text" label="Subject" help="Add subjects separated by commas" />" />
]]> Wed, 07 Dec 2016 09:07:00 +0000