Icon fonts and headings workflow

[p_hammond]

Hi all,

I'm using ProcessWire to build a simple site for a client and wanted to know your opinion/view on a couple of things:

1. I'm using FontAwesome (icon font) throughout the site. In certain sections, such as in the navigation, the code to display the icons is hard-coded, but in one section in particular, I want the client to be able to choose which specific icons to display. Now, what would be the best way to do this? I was thinking that having a repeater field with a dropdown menu from which the client could simply choose the icons would do the job. What do you think? Is there a better way of doing this? Should I even give the client the freedom to do this?
2. In the main content section, I have four different columns, each one containing two elements: a heading (h3) and a paragraph. Now, these headings all have a class, as in "<h3 class="someclass">Heading 3</h3>".  I think the most efficient way of coding this would be to have a TinyMCE textarea and then just write the 'h3' and the 'p' there. But, how do I include the class? Here're the solutions I have come up with:

• I could of course just have a regular textarea with HTML support and write the class there, but I don't want the client to have to write or see that.
• I could have two separate fields, a simple textfield for the heading and a textarea for the paragraph. This would allow me to hard-code the classes.
• I could change the markup and have the classses in a parent element. This way, I could go ahead and use a TinyMCE textarea for both elements.
• What do you think? How would you do it?

Thank you very much for your help. I look forward to your answers!

Peter

[Joss]

On your second point, I would always go the two field direction - it makes it very clear to the user what they are expected to do and you can have fun later.

You can add custom classes to TinyMCE on the configuration for the field, though you need to be very specific with your needs. Generally I would avoid unless there is something special you want to add.

You can also use JQuery to add classes to specific elements, as long as you have them identified clearly enough.

As an example, I use that to add the class "fancybox" to all <a> tags that are wrapped around images within a certain area of my template. 

$('.blogpost img').closest("a").addClass("fancybox ").attr('rel', 'group');

That finds an img tag within my blogpost div then adds a class and attribute to the closest a tag.

Then, in tinyMCE when you add an image, just make sure that you tick the "link to larger image" in the image modal.

However, most of the time, things like my main images are separate fields and not added to the text in the form - again, it is clearer that way and less likely to cause issues.

######

On your first point, I am not totally sure why you need a repeater, so I will ignore that for the moment!

It is perfectly fine to let the user choose an icon for the beginning of a title, or whatever.  While it is important to control how creativity affects the layout of a site, you shouldn't stifle it either unless they have a full time editor to do the hard work!

Just use a Page field for this job.

Create a hidden page somewhere on your page tree and call it Icons. Give it a template that has no file associated with it.

Now, create a series of pages - each title field represents an icon. 

Create a pages field for your article template - it should be for a single select (third option on details) and just a normal select box on the input tab. Select your icons page as the parent.

When you create a new article you can select the icon from that page field.

In your template, just set up a series of conditions referencing the page field.

if($page->page_field->name = something) {
 echo "My Icon";
}

and work your way down the list.

You can read more on using the page field for creating select lists here: http://wiki.processwire.com/index.php/Page_Field

If you want your reference to be different from the title in the drop down (if your titles are a bit descriptive, perhaps) then create a second field in your icons page and use that for your reference.

Does that help?

Joss

[p_hammond]

Hi Joss,

Thanks a lot for your detailed answer. I like the solution you propose for my second problem, the icon font one. It's flexible and easy to implement, and allows me to give my client some creative freedom! As for the first problem, I will probably just use two separate fields and be done with it. Somehow, it felt more efficient to use a TinyMCE field for both elements, but I guess you're right, having two separate fields gives a sense of structure and presents a clearer picture to the client as to what they are expected to do.

Thanks again.

[ryan]

I'm using FontAwesome (icon font) throughout the site. In certain sections, such as in the navigation, the code to display the icons is hard-coded, but in one section in particular, I want the client to be able to choose which specific icons to display. Now, what would be the best way to do this? I was thinking that having a repeater field with a dropdown menu from which the client could simply choose the icons would do the job. What do you think? Is there a better way of doing this? Should I even give the client the freedom to do this?

You could go with simple text replacement. Lets say you wanted the icons in the body (though it wouldn't matter what field). You'd just instruct the client to visit this page and select the icon they want. That page shows both the icon and the name. You would have them copy the name and then paste it into their copy, wherever they wanted it to appear. Then in your template code, you'd run $page->body through something like this before outputting it:

if(strpos($page->body, 'icon-') !== false) {
  $page->body = preg_replace('/\b(icon-[-a-z]+)\b',  '<i class="$1"></i>', $page->body); 
} 

So if the client typed this:

I could sure use an ice cold icon-beer and then I'd like to have some icon-coffee afterwards.

They'd get this in the markup (which would display the relevant icons): 

I could sure use an ice cold <i class="icon-beer"></i> and then I'd like to have some <i class="icon-coffee"></i> afterwards.

In the main content section, I have four different columns, each one containing two elements: a heading (h3) and a paragraph. Now, these headings all have a class, as in "<h3 class="someclass">Heading 3</h3>".  I think the most efficient way of coding this would be to have a TinyMCE textarea and then just write the 'h3' and the 'p' there. But, how do I include the class? Here're the solutions I have come up with:

This would be another case where you could use simple text replacement before output:

$page->body = str_replace("<h3>", "<h3 class='someclass'>", $page->body); 

Though if you needed to support different kinds of h3 tags or classes in that copy, then you'd probably want to use TinyMCE advanced settings to setup the 'styleselect' option.

I could change the markup and have the classses in a parent element. This way, I could go ahead and use a TinyMCE textarea for both elements.

This would also be a good option: just targeting those specific h3's with a CSS selector. 

What do you think?

I think I'm going to go grab some icon-coffee. 

[p_hammond]

You could go with simple text replacement. Lets say you wanted the icons in the body (though it wouldn't matter what field). You'd just instruct the client to visit this page and select the icon they want. That page shows both the icon and the name. You would have them copy the name and then paste it into their copy, wherever they wanted it to appear. Then in your template code, you'd run $page->body through something like this before outputting it:

if(strpos($page->body, 'icon-') !== false) {
  $page->body = preg_replace('/\b(icon-[-a-z]+)\b',  '<i class="$1"></i>', $page->body); 
} 

So if the client typed this:

 

They'd get this in the markup (which would display the relevant icons): 

This would be another case where you could use simple text replacement before output:

$page->body = str_replace("<h3>", "<h3 class='someclass'>", $page->body); 

Though if you needed to support different kinds of h3 tags or classes in that copy, then you'd probably want to use TinyMCE advanced settings to setup the 'styleselect' option.

This would also be a good option: just targeting those specific h3's with a CSS selector. 

I think I'm going to go grab some icon-coffee. 

Oh my God, this is frigging awesome! So clever and yet so easy to implement. I can certainly tell the client to visit the FontAwesome website every time they need an icon. I also like the string replacement method for the headings but, out of curiosity, how would I 'tweak' TinyMCE advanced settings to be able to get classes/other stuff on there? Would the client have to write the classes themselves?

Thanks, Ryan! Go grab that icon-coffee, I'll join you with an icon-beer, virtually that is!

[ryan]

how would I 'tweak' TinyMCE advanced settings to be able to get classes/other stuff on there? Would the client have to write the classes themselves?

This is a setting I don't use very often, as I find it kind of a pain. But others here like Soma are experts with it. If you search for TinyMCE and "styleselect" (one word) it should turn up some information on it. Here is another link that might be hepful: http://wiki.processwire.com/index.php/TinyMCE#Adding_Styles

Basically, you create your own css file for TinyMCE and place it somewhere like /site/tinymce/custom.css. Then you edit your field, click on the "input" tab and open the fieldset for "TinyMCE custom/advanced settings". From there, you can specify a link to your custom css file. You would then add the styleselect option to your buttons. Also look into the Bramus CSS Extras TinyMCE plugin, which is mentioned in these forums often, as it improves what you can do here quite a bit .