TinyMCE image uploader button “not showing”

I’ve had this happen several times during a Drupal project. The TinyMCE image uploader button (pictured below) doesn’t show up on accounts that aren’t the “site maintenance account”. Even if the account is an administrator account, the button won’t show up.

But there’s a fix! It’s really simple, but for some reason it eludes me for about 30 minutes each time. So this post is really for my own sake to reference later. If it helps you too, great!

Fix: Go to Configuration > Media > IMCE

Then make sure you add the correct profile to the correct role. If you’ll notice, the “Site maintenance account” already has a profile by default. That’s why when you’re editing it seems as if the uploader button is present, but when you sign on as a different user (even an admin) it disappears.

Guest Article on Microsoft’s “Get the Point” SharePoint blog

I just published part 2 in a series about blogging in SharePoint for Microsoft’s “Get the Point” blog. You can read the full article here.

Summary: Create a picture library in SharePoint, and then reference its slide show in a blog post for a more interactive SharePoint blog!

jQuery and SharePoint 2010: the Basics

SharePoint out-of-the-box is functional, but fairly lacking when it comes to really wanting to extract and beautify your data. This is where jQuery comes in. It’s light, easy to implement, and actually hooks up with a bunch of SharePoint services when you have the right plugins. Consider this a basic intro to what you can do in jQuery and SharePoint. It’s really the tip of the iceberg, so keep exploring!

Setup jQuery for SharePoint

First things first, let’s make sure we’re properly setup. If you are using SharePoint behind a secure server (as part of an intranet possibly), then you’ll probably want to load up a local copy of the jQuery script instead of grabbing it from jquery.com each time the page loads. So grab the latest build from jquery.com and dump it in “Style Library/scripts/jquery.js”.

Next, go to your master page and put the following script (depending on where your file is) anywhere within the HEAD section:

 <script type="text/javascript" src="/Style Library/scripts/jquery.js"></script>

And that’s it! Now every time a page loads, you’re pulling in all of jQuery’s power. Minified, the file is only about 31kb, so (considering everything else SharePoint is loading) this isn’t that much of a burden. But you can also just load the jQuery script in page layouts, or even within individual pages.

Now that you’ve got jQuery loaded, it might be in your best interest to create another .js file that holds all of your custom scripts. You can choose to do scripts on a per page or page layout basis as well, but this keeps things more organized. So create a “myscripts.js” file in “Style Library/scripts” (the same folder we put jQuery.js in). And don’t forget to reference it in your master page, right under the jquery code. So now the above code is amended to read:

 <script type="text/javascript" src="/Style Library/scripts/jquery.js"></script>
 <script type="text/javascript" src="/Style Library/scripts/myscripts.js"></script>

Now that we’ve got everything loaded, what can we do?

What can you do with jQuery and SharePoint?

Here are just a few things:

Markup your body content and make it interactive

I use this for something like an FAQ section. We’ll put every question in an H4 tag with a class of “question” and every answer in a span with a class of “answer” directly after the h4. That’s all we have to do to our HTML source in the page. Then in our custom scripts file (above) we add the following jQuery code:

$(document).ready(function(){ 
 $("span.answer").slideUp(); // hides all of the answers
 $("h4.question").click(function(){ // when you click an h4
   $(this).next("span.answer").slideToggle('fast') //the answer slides down
 })
});

Keep in mind you may want to add some CSS that make the h4 seem more like a link (cursor:pointer, etc.) so people know they should click.

Make an “instant” search/filter box


Check out this post about how to create this. You can create a filter, and then append it to any list across your site.

Create a slideshow of content from a picture library


I’ve written a separate post with precise instructions about how to do this, but here’s the general idea:

  1. Create a picture library
  2. Make a new page
  3. Put a CQWP in the page, and wrap it in some divs with specific classes
  4. Use the tinycarousel plugin to convert that Content Query WebPart into a slideshow/carousel
  5. Style with CSS

Create tabs (not the jQuery UI kind)

Check out this post on creating tabs using jQuery, but without using the jQuery UI. It’s a bit easier with the UI plugin, but again, the idea is:

  1. Create the tabs in HTML
  2. Create each panel in HTML
  3. Add the jQuery
  4. Style it with CSS

Use SPServices to really hook into SharePoint with jQuery

I’ve started writing what is turning into a small series on using jQuery with SPServices. Some of the things you can do:
Rollup items from multiple lists
Rollup from multiple lists and put the results in a new list
Rollup articles across a site collection

Screencast: WordPress + Nextgen Gallery, Load Lightbox Gallery From One Image

The original post with full text instructions on how to load a Nextgen gallery from one image in a WordPress page can be found here.

Enjoy!

Fix NextGen Image Uploading issue in WordPress

I’ve been having this problem where my pictures won’t upload (or rather, show thumbnails) using the NextGen gallery in wordpress. Here’s how I solved it. Quite simple actually!

1. Change your php.ini memory_limit to 256M (mine was set on 64M)
2. Uncomment the following code in plugins/nextgen-gallery/lib/gd.thumbnail.inc.php

@ini_set('memory_limit', '256M');

Everything works now!

WordPress + Nextgen Gallery: Load Lightbox Gallery From One Image

This is an explanation of how to have multiple galleries on a page, yet only show one thumbnail, and that thumbnail shows all of the images in the gallery…in the lightbox view. Phew, it’s hard enough just to write out. But after trawling through the internet looking for the answer, I’ve jimmy-rigged it myself. I don’t know that I’d call it a hack…but at least your page load time isn’t affected. So here goes!

##UPDATE: I’ve just recorded a screencast for this tutorial:

1. Install the NextGen Gallery plugin (I assume if you’re having the same problem I did!)
2. Create a new page, and call galleries into it like this:
[nggallery id=1 template=one]
[nggallery id=2 template=one]
[nggallery id=3 template=one]

3. Create a new subfolder in your theme folder called “nggallery”.
4. Create a blank php file in the subfolder called “gallery-one.php” (this is the template you called in step 2.
5. Read my explanations and then copy the code and see how it works for you.

(This first bit is copied from gallery.php in the NextGen plugin folder)

<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?>
<?php if (!empty ($gallery)) : ?>

Next we have to set our iterator (to find out where we are in the loop…not The Loop though).

<?php $i=1; ?>

Then let’s put our holder (with the ID of the gallery appended in the class) that will wrap each gallery.

<div class="holder<?php echo $gallery->ID; ?>">

And then our foreach statement. Here you can see I’ve added an IF statement that says, “if this is the first image, then show me the thumbnail linked to the lightbox slideshow…otherwise just give me a link (no image, but you need the a tag), and set its display to none”. After that is done, but before the FOREACH statement is finished, make sure and increment our iterator with $i++;

<?php foreach ($images as $image) : ?>
	<?php if ($i < 2) : ?>
		< a href="<?php echo $image->imageURL ?>" <?php echo $image->thumbcode ?> title="<?php echo $gallery->title ?>">
			<img src="<?php echo $image->thumbnailURL ?>" /></ a>

<?php else : ?> < a style="display:none" href="<?php echo $image->imageURL ?>" <?php echo $image->thumbcode ?>>link</ a> <?php endif; $i++; ?> <?php endforeach; ?>

Finally, close out your wrapping div, and close out the IF statement from the top:

</div>
<?php endif; ?>

Here’s the full code

<?php 
/**
Template Page for the gallery overview

Follow variables are useable :

	$gallery     : Contain all about the gallery
	$images      : Contain all images, path, title
	$pagination  : Contain the pagination content

 You can check the content when you insert the tag <?php var_dump($variable) ?>
 If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
**/
?>
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?>
<?php if (!empty ($gallery)) : ?>

<?php $i=1; ?>

<div class="gallery-holder gal<?php echo $gallery->ID; ?>">
<?php foreach ($images as $image) : ?>

	<?php if ($i < 2) : ?>
		<div style="display:none;">
			<img src="<?php echo $image->imageURL ?>" />
		</div>
		<a href="<?php echo $image->imageURL ?>" <?php echo $image->thumbcode ?> title="<?php echo $gallery->title ?>">
			<img src="<?php echo $image->thumbnailURL ?>" /></a>
	<?php else : ?>
		<a style="display:none" href="<?php echo $image->imageURL ?>" <?php echo $image->thumbcode ?>>link</a>
<?php endif; $i++; ?>

<?php endforeach; ?>
</div>

<?php endif;?>

Create an Image Gallery in WordPress

If you don’t want to use wordpress’ default image gallery (and I’m assuming…if you’ve spent any time at all with it that you don’t), I would recommend using the NextGen Library plugin.

Here’s how to install and get up and running:

Step 1: Download the NextGen Library
Click here to download the plugin from wordpress. Put in “/wp-content/plugins”. Activate the plugin in the plugins section.

Step 2: Create a new gallery
At the bottom of your left sidebar in the dashboard you’ll see a “Gallery” tab. Click that to add a new gallery. From here you can upload single or multiple pictures.

Step 3: Insert into blog post
By default, many blog posts won’t show the images on the home page, because your blogs are only showing the excerpt. So either remain happy with that and find another way to let people know there are images in your blog, or change the code so the front page shows the full body text of your blogs.

Here are three of many options when it comes to putting a gallery in your blog post. You’ll see a new icon on the far right. That’s how you insert an image gallery into the blog post. But here’s the basic code:

slideshow: [slideshow id=1]
image browser: [imagebrowser id=1]
image list: [nggallery id=1]

That’s it! Pretty straightforward. As usual, let me know if you have problems.