Drag, Drop, Insert and Row

If you're moving content around in Squarespace 6, you may get a little confused/frustrated. We've probably all been there, and here's one tip that will probably help you.

I will go into greater detail on the Content Editor soon, because there's actually some important milestones (AHA-MOMENTS) to learn before arriving at this one.

But here you go— here's the short video:

Understanding Image Ratios in Squarespace Slideshows

In the video video below, I walk my client through determining the "image ratio", using Picasa to crop images, and adding the newly-cropped images to the Squarespace Gallery + Slideshow.

Have you enjoyed using the Squarespace Slideshow component that's built-into V5's editor?

Rather than define an exact pixel size, Squarespace has decided that setting the "ratio" makes more sense, because the images already are set to proportionally scale in Squarespace's Photo Gallery, and the Gallery module is what feeds the slideshow component.

This concept works well for "standard" photos that would come out of a camera— photos that use generic/standard size ratios. However, when using a Squarespace Slideshow in custom locations, where a pre-determined "target size" is important, it can be a little tricky.

In the client-site example on my video above, I've incorporated three Squarespace Slideshows on the same homepage. All three slideshows are the same size, but as my client quickly learned, using THE EXACT image size is important.

Here's why this is important:

It's fantastic that Squarespace's code will auto-crop and re-size the images to fit our areas, and they won't distort the aspect ratio, but if the images are larger than the target area, there is a great-deal of unnecessary overhead when loading the images. It's totally possible that the image files-sizes could be 10-20 times larger than they need to be. Pre-scaling your images will greatly help you! 

(*NOTE* This changes in Version6, where images are sampled at multiple image sizes on the server-side)

Here's What.

If you've used the Squarespace "Slideshow" component, you might already know that configuring a custom "image ratio" is a little confusing, so in the video, I'll walk you through determining the "image ratio".

Do I need to learn Photoshop?

No. I work with many clients who wish to swap-out images on their websites, but either they don't want to invest in the cost of Photoshop, or in-reality— learning how to use Photoshop for simple edits can be daunting. 

There are hundreds of apps, and even websites that will allow you to crop and re-size images, and after further hunting for "an ideal app", it looks like Google's Picasa (free app) will be the easiest to use, and is available on both Mac and PC.

Top 4 Tips for copying and pasting content in a CMS like Squarespace

It's not an issue that's limited to only Content Management Systems. It actually seems to happen all the time anymore— this being the problem of copying content from one source, and pasting it somewhere else. Depending on many variables (operating system, the application you're using and apparently how the wind blows), copying from a particular source will sometimes carry all of the original formatting into the clipboard, and when pasting, all of that formatting will follow. 

In the dark ages when I was working on a PC, I don't remeber it happening as much as I see it happening on the Mac, but I do remember using Windows Notepad (app) all the time to clear formatting.

I work with clients all the time who seem to have issues with this, and many of them aren't aware of it.

In-fact, if you search the Squarespace forums for "<div id="_mcePaste">", you'll see that you're not alone with your pasting problems.

Squarespace Tip

If you paste anything in Squarespace's WYSIWYG edit window, and as you're typing a "New Paragraph"— if your cursor only drops-down to the next line, the same way that pressing COMMAND + RETURN will do (adding a line break, or a "<br />"), then chances are you're adding NEW DIVS ON EACH LINE. This happens when you've pasted content with a DIV, and you're actually typing within that same format, carrying it forward throughout the whole document.

This sounds trivial, but cleaning-up an entire page of messed-up content in Squarespace's HTML editor, or any HTML editor for that matter, is not a fun task. Especially when you have to remove line after line of divs, replacing them with <p> Paragraph tags instead. This is a nightmare.

I'm going to attack this from the Mac perspective, mainly because I'M A DESIGNER. We're supposed to all have Macs. (here come the comments...)

Here are FOUR tips to help you with your pasting issues:

1. Mop-up That Mess

Manually clean-up the messed-up content. OH— I just covered this, but that's one that certainly works.

2. Go Pro

Use an HTML Editor. When copying from any source, and you paste-into an HTML editor (also Squarespace's editor— in RAW HTML mode), all that will paste will be ASCII text. In-fact, it will probably be one big lump of text with all breaks and styling completely removed. Have no fear! You can either manually add Paragraph and Heading tags within the code, or switch to the editor's WYSIWYG mode, and blast through re-formatting this lump of lifeless text into what you intended it to be. 

3. Become a Clipboard Karatist

On Mac OS X, I've learned to use the "Paste and Match Style" method, which means the clipboard contents will always take-on the style of what's in-place when pasted. This works well in Squarespace (and apps like Gmail! It's imperative, especially if you build emails from 23 various links and references— MUCH LIKE THIS VERY POST!). I've learned to use the "Four-Finger-Salute" every time I paste. Yes, it takes FOUR KEYS to do this: Command + Option + Shift + V —which won't bring you into the realm of the Content Ninja, but after you learn this method you'll most-certainly become a Clipboard Karatist. (BTW: this doesn't work in Google Docs, and it angers me so.)

More information on the Paste and Match "Crane-Style" technique: http://thaweesak.com/2009/06/15/setting-paste-and-match-style-as-default/

"Get Plain Text" app (from Alice Development)

4. An App for That

Recently, I went searching for an app solution to this Clipboard headache, and I found one! There's an app in the Mac App Store called "Get Plain Text" (from Alice Development) that strips formatting/styles from clipboard text. And yes— it works! I have to admit, I found within a few days that my ability to take screenshots on my Mac stopped altogether from installing this app. I (quite publicly) complained to the developer, and as it turns-out, what I was doing was literally clearing my clipboard immediately when taking a screenshot, by selecting the "Automatically Clear Formatting" option. So there it is— a public endorsement and apology in the same post.

Grab "Get Plain Text" from the App Store.