meteoracle

Want to create your own Tweet this button so it fits in with your design (or just doesn’t look like the official button) AND you want to include a hashtag?

Well, here’s what you can do:

1. Create your link around text, an image or whatever else you can think of
2. Point your href to http://twitter.com/share
3. Add some querystring variables to generate the tweet
4. That’s it!

So, the querystring variables I’ve used (for a basic tweet including hashtags) are:

• url (this is needed in order to get someone to visit your site from the tweet)
• text (this is the body of the tweet)
• hashtags (a comma seperated list of hashtags placed at the end of the tweet)

Here’s the resulting link:

http://twitter.com/share?url=http://yourdomain.com&text=This+is+where+your+tweets+goes…&hashtags=hash,tags,here

There is also a list of the other variables you can use at https://dev.twitter.com/discussions/512

Here’s a little javacript function that will get the date ordinal (the bit after the date which can be st, nd, rd or th). It’s by no means perfect, and there’ most likely a more efficient way of doing it, but thought it useful enough to share

function get_date_ordinal(num) {
  var end_num = num.charAt(num.length - 1);
  var start_num = num.charAt(0);
  var abbrev = 'th';
  if (end_num == '1' && start_num != '1') abbrev = 'st';
  if (end_num == '2' && start_num != '1') abbrev = 'nd';
  if (end_num == '3' && start_num != '1') abbrev = 'rd';
  return num + abbrev;
}

I knocked this together as I was pulling in a daily RSS feed, and wanted to present the date in a slightly different way to what was provided.

I don’t know about you, but I just don’t like waiting for different admin panels to load up just to get to the place where I can clear the cache so I can see the changes I just made.

So, I’ve added a shortcut to the Configuration > Performance area of the Drupal admin to my admin toolbar, and this is how I did it:

1. Click the ‘Edit shortcuts’ link in the admin toolbar, then click ‘Add shortcut’.
2. Enter ‘Clear cache’ in the Name field (or copy and paste if you’re like me)
3. Enter ‘admin/config/development/performance’ in the Path field
4. Click ‘Save’

You may need to refresh, but now you have a direct shortcut to the Performance panel which you can jump to for that lovely ‘Clear all caches’ button.

Fix for MAMP when MySQL is not starting

This just helped me out, so this is for those having the same problem, but mainly posted here so I have a reference of it!

I was just in the midst of building a site with a rather large background that spills well outside of the 960 grid the site is built on (2000px of rather large to be exact).

It looked great on the large monitors in the office with this bit of CSS displaying this huge background nicely:

 #sitebg {
  background-image: url(../img/sitebg.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  left: 50%;
  margin-left: -1000px;
  min-height: 1200px;
  position: fixed;
  width: 2000px; } 

As the particular image I was working with had a central piece of text that a number of absolutely positioned divs relate to in positioning, the iPad pulled a lovely trick on me by automatically resizing the background image to fit the width of the screen.

All of a sudden my absolutely positioned divs looked like they were all over the shop due to the resizing of the background image. After a bit of digging, it turns out you need to tell the iPad the specific size of the background like this:

-webkit-background-size: 2000px 1200px;

Adding this to the CSS rule sorts the issue and everything displays at the correct size.

\o/

Plan, Then Build.: Writer's Block

Its an awkward one this. We don’t like to admit it, but as developers or programmers sometimes we just pull a blank card.

You can’t shift into gear. You can’t quite pick yourself up. You’re neurons are just not firing right.

Other metaphors.

You’re trying to, but its just not kicking off for…

Wygwam by Pixel & Tonic is a WYSIWYG editor powered by CKEditor 3.4 and CKFinder 2.0.1 and is available as a module for Expression Engine.

It makes it very easy to set up a custom WYSIWYG editor with the just options you want to make available to the website content administrators. It’s dead simple. Until you want to change the styles available in the drop-down.

It would be great if you had an easy way of editing the available styles directly from the Module configuration, but unfortunately we can’t, so I had to hunt down the file which I eventually found here (I’m using Expression Engine 2):

/themes/third_party/wygwam/lib/ckeditor/plugins/styles/styles/default.js

This javascript file, hidden deep within the folder structure, contains the script we need to edit to get the styles we want to be easily available to the administrator whilst editing their content.

Here’s a shortened version of what you’ll find (I’ve adjusted the formatting to make it easier to read):

CKEDITOR.stylesSet.add('default',[
  {name:'Purple Title',element:'h3',styles:{color:'Purple'}},
  {name:'Red Title',element:'h3',styles:{color:'Red'}}
]);

As an example, I’d like to add a style that will highlight a paragraph with a a light green background colour, my javascript would now look like this:

CKEDITOR.stylesSet.add('default',[
  {name:'Purple Title',element:'h3',styles:{color:'Purple'}},
  {name:'Red Title',element:'h3',styles:{color:'Red'}},
  {name:'Boxout Text',element:'p',styles:{'background-color':'#EAF5F4'}}}
]);

At the moment, we’re only adding a single style element to our intended target element. What is we want a whole bunch of style rules? Well, in that case we can do this (again I’ve formatted this to be easily readable, the whole script should be kept to a single line):

CKEDITOR.stylesSet.add('default',[
  {name:'Purple Title',element:'h3',styles:{color:'Purple'}},
  {name:'Red Title',element:'h3',styles:{color:'Red'}},
  {name:'Boxout Text',element:'p',styles:{
    'background-color':'#EAF5F4',
    'border-left':'2px solid #08B1A2',
    'color':'#08B1A2',
    'font-style':'italic',
    'margin':'0 auto 1em',
    'padding':'1em'}}
]);

So there we go, we’ve given the website content administrator the ability to style their content, without giving them enough rope to hang themselves with (by which I mean make the site look awful with different fonts, colouring and styles).

With my first attempt at producing a ‘simple’ contact form I realised that the email sent by this module is very basic indeed. It reall only caters for a user to enter their name, email address, subject (which you may well have as a hidden field) and message.

It just so turned out that the firtst site I’ve attempted to use this module on is a corporate site, and they generally want the company name of whoever is using the contact form. So my contact form looked like this:

{exp:email:contact_form user_recipients="false" 
recipients="info@domain.com" charset="utf-8" form_id="contact"}
  <label for="name">Your Name: </label>
  <input type="text" name="name" id="name" value="" />
  
  <label>Company Name: </label>
  <input type="text" name="message[]" id="company" value="" />
  
  <label for="from">Email Address: </label>
  <input type="text" name="from" id="from" value="" />
  
  <label>Message: </label>
  <textarea name="message[]" id="message"></textarea>
  
  <input type="hidden" name="subject" value="A message from your 
website." />
  <input type="submit" value="Submit" class="form-submit" />
{/exp:email:contact_form}

Unfortunately when the email is sent (in plain text of course), there’s no formatting to tell what the info in the email is. For example, the body of the email from this form would look something like:

Widgets Ltd
I am writing you to find out more about your wonderful widgets. 
Please send me lots of widget based gubbins.

So, in order to tidy the format up slightly I’ve used the message field a few extra fields:

{exp:email:contact_form user_recipients="false" 
recipients="info@domain.com" charset="utf-8" form_id="contact"}
  <label for="name">Your Name: </label>
  <input type="text" name="name" id="name" value="" />
  
  <label>Company Name: </label>
  <input type="hidden" name="message[]" id="companytitle" 
value="Company:" />
  <input type="text" name="message[]" id="company" value="" />
  
  <label for="from">Email Address: </label>
  <input type="text" name="from" id="from" value="" />
  
  <label>Message: </label>
  <input type="hidden" name="message[]" id="messagespacer" value="" />
  <input type="hidden" name="message[]" id="messagetitle" 
value="Message:" />
  <textarea name="message[]" id="message"></textarea>
  
  <input type="hidden" name="subject" value="A message from your 
website." />
  <input type="submit" value="Submit" class="form-submit" />
{/exp:email:contact_form}

This will now produce something along the lines of:

Company:
Widgets Ltd

Message:
I am writing you to find out more about your wonderful widgets. 
Please send me lots of 
widget based gubbins.

Admittedly not the most beautiful email you’ll ever get, but it’s now much easier to understand what’s been sent in the body of the email, and still only utilise the simple tags available in the Email Module.

jQuery Masonry, by David DeSandro is an excellent jQuery plugin to enhance the layout of a page.

However, you may find that when using images in the content of the divs you are aligning with Masonry, you may get some overlapping where the script has lodaed before your images.

In order to fire the Masonry script once your images have loaded on the page, use the following code:

$(window).load(function() {
  $('#athediv').masonry({ columnWidth: 200 });
});

Depending on who you want to see the SAEF (Stand Alone Entry Form), you’ll need to assign the relevant weblog to their Member Group.

In my case I have a form that a registered member can submit news to, but it’s not displaying on the front end. In order to correct this, log in to the Expression Engine control panel and go to:

Admin > Members and Groups > Member Groups > Edit Group > Weblog Assignment

Here you’ll have a list of all your weblogs and you can simply select ‘Yes’ for the weblogs you wish to allow a member to add content to.

Hey presto, your form is now visible on the front end and your users can add their content.