Concrete 5 Installation issues and permissions

Javascript Errors

Often Javascript errors will give you an installation error message.

If you are getting an error along the lines of “please enable Javascript in your browser” and you know that you are running Javascript in your browser, turn on Firebug / Developer Tools and check your console.

For me I had a local install where I put special characters or spaces in my folder name, and once I removed these the Javascript error message went away

Permissions

If you are getting a “permissions” problem with your following folders

config
files
packages

Open Terminal.

Change to the folder with concrete5. On a Mac often your site is in your Sites folder, so:

cd Sites
cd my-folder-name

Then try:

chmod -R ug+rw config files packages

If you get an error like:

chmod: Unable to change file mode on [fill in the blank]: Operation not permitted.

Try using sudo

sudo chmod -R ug+rw  config files packages

On Windows, I believe you can use runas instead of sudo.

runas /user:Administrator cmd

Then check your installation screen in the browser.

777 problems (or, how to change your “group” to the webserver)

If you find you have to make certain folders (for example, config and files) 777 to either run your site or to install concrete5, you have to change your “group” permissions to your web server.

For example, if you switch into your web folder (the folder with “blocks” , “concrete” etc)…for me it’s public_html and type

ls -la

You might see something like:

drwxr-rw-r--@ 6 my-username staff 204 21 date foldername

Localhost

On a MAC, my-username is your “user”, and “staff” is your group. However, you probably want to make your group your webserver (“_www”) and give read write permissions to your web server for:

config
files
packages
updates
blocks (optional, for addons like "Designer Blocks") 

Writing 777 will give write permissions to your web server…and everybody else (i.e. the world). A better way is to set your webserver to be your group by changing into your web folder (the folder that contains “blocks”, “concrete”, “config” and so on)

sudo chown -R your-username:_www .

Then when you type

ls -la

You should see

drwxr-rw-r--@ 6 my-username _www 204 21 date foldername

CHOWN changes the owner. It’s in the format CHOWN user:group, so:

CHOWN my-username:_www

- sets the user to me (my username) and the group to “_www” (the webserver on my MAC).

-R changes the permission of the folder, and also anything inside the folder (including other files and folders). -R stands for recursive.

Then you can set:

sudo chmod -R ug+rwX files packages updates config blocks

The capital “X” gives webserver “execute” access on directories (which it needs) but doesn’t let it execute any of the files in your directories (which you do NOT want…for example if someone uploads a malicious file to that directory, you want to make sure no one is running or executing the file except for you).

Shared hosting

Shared hosting is trickier because the settings are different for each hosting service.

For my hosting service, my apache webserver is referenced by “nobody”, so if I had problems with setting something to say, 755 or 644 I could try setting my group to “nobody” so that my webserver has the same permissions as my user (me).

sudo chmod -R 755 config/ files/ packages/
sudo chmod 644 config/site.php
sudo chmod 755 sitemap.xml

Reference:

http://likesalmon.net/little-changes-to-get-concrete5-working/

Javascript: Why won’t my loop work? (i.e. using closures)

Take a simple example:

for (var i = 0; i < 3; i++) {
console.log("Hello: " + i);
}

This will output

Hello: 0
Hello: 1
Hello: 2

But what if you need to do something more complicated than one line of javascript?

var obj = {}
for (var i = 0; i < 3; i++) {
	obj[i] = function() {
		console.log('Hello' + i);
	}
}
for (var j = 0; j < 3; j++) {
	obj[j]();
}

This will output:

The current number
is 3
The current number
is 3
The current number
is 3

What’s happening?

What is happening is scope in javascript doesn’t work the way you think it works.

function() {
	a variable in this block {
		still applies inside of this inner block!
	}
}
for (var i = 0; i < 3; i++) {
	console.log("My value: " + i);
	for (var j = 0; j < 3; j++) {
		console.log("My value: " + i);
	}
}

The first four lines will give you

My value: 0
My value: 0
My value: 0
My value: 0

Meaning, the value of i is the same inside the brackets of the inner loop as “i” is in the outer loop.

When you write:

for (var i = 0; i < 3; i++) {
	obj[i] = function() {
		console.log('Hello' + i);
	}
}

obj[i] is first assigned 0.

Then obj[i] is assigned 1. Then obj[i] is assigned 2…

3 is the final value. Which gives you:

The current number
is 3

Instead, make your inner function return a function. The inner function will close over the value before returning it, in this example, the value of i:

var item = [];
function hello(i) {
	return function() { console.log('Hello' + i); }
}
for (var i = 0; i < 3; i++) {
	item[i] = hello(i);
}
for (var j = 0; j < 3; j++) {
	item[j]();
}

Reference: http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

WordPress: removing menus in the Admin

Here is a way to remove menu items in the Admin side for users who aren’t administrators:

Using Compass

LESS is a great CSS preprocessor and I will probably keep using it with bootstrap (which, as you can tell, is what I am using for my current WordPress theme).

However, I have started using Compass and I realized it’s not as scary as it seems.

The Command Line

Yes, Compass is a gem but not to worry – it’s not like trying to install rails.

All you need to do is open terminal and type:

$ gem update --system
$ gem install compass

That’s it!

Make a site

Let’s say you want to make a site in your “Sites” folder called “example”.

Open Terminal.

Type the following

cd Sites
$ compass create example

Folder structure

Compass will create a few folders.

Sass

Compass .scss files go here

stylesheets

Regular .css style sheets go here. Compass will generate .css stylesheets based on the files in “Sass”.

.sass-cache

I have yet to go in and change anything in the .sass-cache folder.

Config.rb

If you don’t want to store your compass files in sass or your css files in stylesheets you can change your configuration here.

Using 960 with Compass

The 960 grid used to come prepackaged with Compass, but now Tim Riley keeps it on his github.

You can install it by opening Terminal and typing:

gem install compass-960-plugin

For the example above, if you want to create a site called example in your Sites folder:

cd Sites
compass create -r ninesixty example --using 960

 

Concrete5, placing editable blocks in a template

In Concrete5 you can create an editable area by adding this:

<?php
$a = new Area('My Area Name');
$a->display($c);
?>

The only problem is that areas in concrete5 can contain many blocks – as many blocks as the user likes.

If you only want the user to edit a particular block (and not add as many blocks as they would like, another method is to replace the area with a block.

Replace the area with an autonav block

<?php
$autonav = BlockType::getByHandle('autonav');
$autonav->controller->orderBy = 'display_asc';
$autonav->controller->displayPages = 'top';
$autonav->render('templates/my-custom-template');
?>

Replace the area with a content block

<?php
$content = BlockType::getByHandle('content');
$content->render('templates/my-custom-template');
?>

Replace the area with a Google Map block

<?php
$googlemap = BlockType::getByHandle('google_map');
$googlemap->render('view');
?>

Replace the area with an image

<?php
$image = BlockType::getByHandle('image');
$image->render('view');
?>