Searching and collecting Mura CMS content by Extended Attribute Value with feed.addParam()

The Extended Attributes functionality in Mura CMS is remarkably powerful, allowing developers to extend their content objects to include custom fields and attributes of almost any type.

However, it isn't always clear how to collect or search on the values of the custom attributes you have added, since Mura's default 'feed' object does not contain the extended attributes you have added.

Continued...

Bootstrap 3 Examples and Demos

With the first Release Candidate of Bootstrap 3 available, I've been looking for templates, examples, sample code, or any other source from which I can absorb information and visual ideas for creating website projects based on this new version of the Bootstrap framework. 

It makes sense that there aren't any full-blown commercial templates out there yet, but I'm surprised by how few sites have grabbed onto the chance to at least show off what they know about the new version.

So far, here are a few I've found to be useful:

Continued...

Bootstrap 3.0

This is an exciting time to be a Bootstrap developer. Finally, a css layout framework that makes sense! With the new release of Bootstrap 3 there are a number of important and timely changes in the works. 

First and foremost is the new "Mobile First!" approach, which means the core principle of the Bootstrap grid has been adjusted. There are no longer separate files for bootstrap and bootstrap-responsive styles, instead the responsive grid is baked into the core. 

A few other notes from my first foray into BS3: 

_ variable names have moved from camelCase to hyphenated-lower-case syntax. This means some good ol' find and replace exercises if you're planning to upgrade a previous bootstrap project

_ the grid system no longer uses 'span' classes, bringing in 'col' instead. This means more f&r within your markup, and perhaps an overall change to the way your pages are set up, as there are also new patterns for definining columns based on device size. Good examples here: http://getbootstrap.com/css/ 

_ there are not very many Bootstrap 3 templates available yet (as of this writing, BS3 is still in Release Candidate stage). While there are still bugs being worked out and some adjustments being made by the dev team, we can expect the file structure to stay the same. This would be a great opportunity to create new Bootstrap 3 templates.

_ the documentation has been moved outside the project, which makes sense and keeps things cleaner for developers.

_ the basic download includes minified css and jss files, while the full source code includes directories "assets", "less" and "js", dropping the former "images" folder with the glyphicons .png files.

See the comments in this pull request at https://github.com/twbs/bootstrap/pull/6342 for a walk-through of all that has been added or changed in Bootstrap 3. 

I have a few new projects in the works using Mura CMS , which has a very nice starter template based on Boostrap 2. I'm currently exploring my options for updating the default Mura bundle, or diving right into Bootstrap 3 using basic BS example pages.

This article http://bootply.com/bootstrap-3-migration-guide has a good explanation and comprehensive lists of find and replace commands for bringing a BS2 site into BS3. Considering all of the changes involved, upgrading Bootstrap 2 sites may become a source for new projects!

CFML debugging: cfdump shown to specific site visitor

Here's a quick little snippet to show CFDUMP content only to your IP, without interrupting the flow of traffic for anyone else who may be using the same site:

view plain print about
1<cfif cgi.REMOTE_ADDR is 'My.IP.Address.Here'>
2<cfdump var="#form#">
3<cfabort>
4</cfif>

If you aren't sure of your outward-facing IP address, visit www.whatismyip.com

In this example we are dumping out the #form# scope, but you can dump out whatever you like (by changing the "var" attribute of the cfdump tag) or put any code at all inside the and it will only be executed for views from your specific location.

I wouldn't leave this in a live site but for a quick view of what's going on, without interrupting the experience of others, I find it quite useful.

Importing Events Calendar Data into Mura CMS

I needed a quick 'n dirty way to import an existing spreadsheet of events data into a Mura calendar. After a little trial and error, and much cobbling together of snippets from the Mura forums, here's my result.

Events from XLS data are imported into a table "temp_data" then gathered using the query below. This could be the base for a mura plugin, with an upload option and cfspreadsheet.

Before I ran the import, I created a custom extended attribute set and a page subtype of 'event listing', so we could import this client's custom data attributes.

I also made a parent page called 'events' and got the ID from the mura admin, which is used as the parent ID for all the new entries.

The page subtype is also hard coded below, you'll want to change that to match your own subtype (if not called 'event listing'), and remove the custom attributes stuff, or change those to match your own extended attributes for your events.

This is a crude-but-working example of adding custom attributes, categories, and the main content data all in a single pass, along with the 'start and stop' dates for each event, which I'll use on the front end to group and display the coming events (rather than using those dates to actually show or hide the content directly).

Ideally, the parent ID, site ID and other things would be set by the plugin or site you were working on. But for a one-time import this worked great.

view plain print about
1<!--- IMPORT FROM TEMP TABLE --->
2<cfquery name="dataQ" datasource="#application.configBean.getDatasource()#">
3SELECT *
4FROM temp_data
5</cfquery>    
6
7<!--- loop data, save content for each --->
8<cfoutput>
9    <cfloop query="dataQ">
10        <cfset contentBean = application.contentManager.getBean() />
11        <cfset contentBean.setSiteID('calendarsite')>
12        <cfset contentBean.setType('Page')>
13        <cfset contentBean.setSubtype('Event Listing')>
14        <!--- data --->
15        <cfset contentBean.setBody('#dataQ.eventName#') />
16        <cfset contentBean.setTitle('#dataQ.eventName#') />
17        <!--- to use display per start/stop dates, set to type '2' --->
18        <cfset contentBean.setDisplay(2)>
19        <cfset contentBean.setDisplayStart('#dateFormat(dataQ.datestart,'yyyy-mm-dd')#') />
20        <cfset contentBean.setDisplayStop('#dateFormat(dataQ.dateend,'yyyy-mm-dd')#') />
21        <!--- import categories from our data 'type' (this data only uses one category or 'type' per entry)--->
22        <cfset c = trim(dataQ.type)>
23        <cfset category = application.categorymanager.getBean("category").loadBy(name="#c#",siteid='calendarsite')>
24        <!--- save category if not already available for this site --->
25        <cfif category.getIsNew() eq 1>
26            <cfset category.setName(c)>
27            <cfset category.setSiteID('calendarsite')>
28            <cfset category.save()>    
29        </cfif>
30        <!--- add category ID --->
31        <cfset contentBean.setCategories(category.getCategoryID())>
32        <!--- events custom attributes --->
33        <cfset contentBean.setLocation('#dataQ.location#') />
34        <cfset contentBean.setChannel('#dataQ.channel#') />
35        <cfset contentBean.setLevel('#dataQ.level#') />
36        <!--- events calendar parent id --->
37        <cfset contentBean.setParentID('A48EAF6D-1EC9-549D-5210B43882960200')>
38        <cfset contentBean.save() />
39    </cfloop>
40
41// #dataQ.recordCount# events imported //
42</cfoutput>

I put that into a blank page called 'import.cfm' right in the root of this site, and pointed my browser at it... done!

Enforce 'www' prefix with .htaccess

On our Windows/ColdFusion servers at www.gowesthosting.com we run Helicon APE (and on our older servers, ISAPI Rewrite, also by Helicon) which lets you use standard Apache .htaccess files to create rewrite rules for any website. 

Here are a few quick useful snippets for rewriting any URL to include the 'www' prefix. This is good practice, preventing the 'duplicate content' penalty from Google which can occur when a site is available under two addresses, as well as forcing consistency to visitor sessions. This is especially critical in eCommerce sites where a user's session may not be persisted when jumping from a 'www' to 'non-www' page. 

 

RewriteEngine on
rewritecond %{http_host} ^domain.com [NC]
rewriterule ^(.*)$ http://www.domain.com/$1 [R=301,nc]

just replace "domain.com" with your actual domain, and you should see http://yoursite.com/ gets redirected to add the 'www' prefix automatically.

TIP: be sure to use the 'www' anywhere you link to your site, or when connecting any third-party services like PayPal, since a form 'post' from any external source will not be persisted if the page gets redirected. 

 

CKeditor options for Mura CMS (and other CK things)

Now that Mura has been using the new CKeditor (formerly FCKeditor) , I have been looking at the various configuration options available: 

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

These configuration options can be added to your styles.js.cfm , stored in the Mura file structure at
[siteid]/includes/themes/[theme]/js/editor/


Force HTTP:// prefix in url form inputs w jQuery

Here's a quick n' dirty way to make sure any URL in a form input starts with "http://"

view plain print about
1$('form input.url').keyup(function(){
2        if (
3            ($(this).val().length >
6) && ($(this).val().substr(0,7) != 'http://')
4            || ($(this).val() == '')
5            ){
6            $(this).val('http://' + $(this).val());    
7        }
8    });

This ensures that the contents of the input will start with http://. The length > 6 is a bit of a hack, but if you delete everything in the field, or start typing over 6 chars (i.e. long enough to look for http:// at the beginning of the string), the prefix gets inserted for you. I am also loading my input with value="http://", but this could also be done w/ the function above by triggering it on page load rather than just on keyup for the specified input.

Adding Styles to Mura CMS Wysiwyg Editor

In the Mura interface you can select predefined text styles to add to your rich text content, right from the editor toolbar.

To extend the list of available styles is simple

Find the 'styles.js' file, usually at: \[site]\includes\themes\[theme]\js\editor\styles.js **

Then, add your styles, using the same format as those already in the file, for example

view plain print about
1{ name : 'Caption Paragraph', element : 'p', attributes : { 'class' : 'caption-text' } },
2    { name : 'Center Text', element : 'p', attributes : { 'class' : 'center' } },
3    { name : 'Large Intro Paragraph', element : 'p', attributes : { 'class' : 'intro' } },
4    { name : 'Image w/ Spacing', element : 'img', attributes : { 'class' : 'imageborder' } },

In general all you need to do is apply a class to an element. While you could provide other attributes, it is recommended to let your stylesheet handle those wherever possible.

** (Update: I had trouble with the browser caching this file, even on a forced reload. However, I found you can also use "styles.js.cfm" as the file name, and it will be included and updated as expected when making changes and refreshing the page)

As for how those actually look inside the editor window, the editor gets its CSS styles from a file

[site]\includes\themes\[theme]\css\editor.css

and, opening that you can see, below the long mura comment, something like

view plain print about
1@import url(../../../../css/reset.css);
2@import url(../../../../css/mura.css);
3@import url(typography.css);

So as long as one of those imported files has a class to match your styles in the editor.js, e.g.

view plain print about
1.caption-text{
2font-size 11px;
3padding:15px;
4}
the style will be applied in the editor just as it will on the front end (presuming your display templates are using the same css files).

Fast easy 'current link' highlighting with CFML and jQuery

First the snippet (watch for line wrapping when copy/pasting this):

view plain print about
1// current link highlighting
2 $('#topLinksNav a[href="<cfoutput>#listLast(cgi.script_name,'/')#</cfoutput>"]').first().addClass('currentLink').parents('li').addClass('currentLink');
3// make sure top level link for this element is also highlighted
4 $('#topLinksNav ul').has('.currentLink').siblings('a').addClass('currentLink');

This finds any link with an 'href' attribute matching the name of your current page, e.g. "pagename.cfm" , and adds a class of 'currentLink' (note this is in a site where all pages are in the root directory - obviously this needs to be changed to match your site structure, but the same idea applies).

A sample of the ul/li menu structure I'm using is below.

Then you just need a CSS rule for the '.currentLink' class, perhaps

view plain print about
1#topLinksNav li.currentLink{
2 set some background color here
3}
4
5or
6
7#topLinksNav >
li > a.currentLink{
8 set a highlighted text color here only for top level links
9}

Here's the sample menu structure for the syntax above something like

view plain print about
1<ul id="topLinksNav">
2<li>
3<a href="index.cfm">Top Level Page</a>
4 <ul>
5 <li>
6 <a href="subpage1.cfm">Secondary Menu Page</a>
7 </li>
8 <li>
9 <a href="subpage2.cfm">Secondary Menu Page</a>
10 </li>
11 </ul>
12 </li>
13<li>
14<a href="contact.cfm">Top Level Page</a>
15 <ul>
16 <li>
17 <a href="subpage1.cfm">Secondary Menu Page</a>
18 </li>
19 <li>
20 <a href="subpage2.cfm">Secondary Menu Page</a>
21 </li>
22 </ul>
23 </li>
24</ul>

Start and stop ColdFusion localhost with .bat files (Windows)

Here's a simple trick that saves a few clicks. If you are running a ColdFusion local server on a windows PC, you can start and stop the CF service with a simple bat file.

Make a new text file on your hard drive somewhere (i keep mine right on the desktop), and name it "cfstart.bat" - in your text editor of choice, enter this one line and save the file:

    NET START "coldfusion 9 application server"

(with the quotes, just like that)

You can make another called "cfstop.bat" and, you guessed it, 

    NET STOP "coldfusion 9 application server"

To use the files, on my Windows 7 PC, I just right click and select "Run as administrator", and the service stops or starts up right away. Now instead of running all the time, consuming memory, CF only runs on my local machine when i need it. 

Note: you may also want to remove the ColdFusion service from the list of items that run on startup - use start > run > mscofig to see the list.

 

 

...Show Newer Read More...