NiO RSS Thumbnail Gallery ← Free download and instructions available, a widget created for Photoshelter users by Johan Peijnenburg of Nio Photography.

This widget is free, incredibly flexible, and in my opinion a must for photographers with a website. Once installed it automatically creates a thumbnail slideshow from Photoshelter gallery RSS feeds. You can add multiple galleries per page, and the code uses CSS for styling so you have unlimited flexibility when designing the look of your galleries. This will allow you to match your current website design. For example the Joomla website for Pattinson Photography has two separate rss thumbnail galleries on the home page, New Images and Western Canada. We also installed the NiO RSS Gallery on his Wordpress for Joomla blog.

For my website the rss galleries are going to be an incredible time saver. I am using the thumbnail gallerie’s dynamic ability for the Commercial Photographer Colorado Photography portfolio page on my website. Previous to NiO RSS Gallery I was using a LightBox script which demanded that I create thumbnail size and large size images for each photo in my portfolio. Very time consuming, which kept me from updating my portfolio often. Now that I am using NiO RSS I can update my portfolio galleries easily using my current Photoshelter workflow.

Two features I would love to see in NiO RSS Gallery is the ability to randomize the thumbnail results so a different set of thumbnails is shown each time the page is viewed, not sure if this is possible with a RSS feed. The other feature is the ability to view an image in a slideshow directly from the thumbnails, instead of opening in the gallery image display page, this will give more of a gallery feel..

The main purpose of creating a Joomla CMS website for Miracles of Health is to give them the tools they need to add new content without having to call the web designer, me. Joomla comes with a WYSIWYG editor that is designed just for this. Sounds easy, but in practice it took some trial and error to get things to fit their needs and work smoothly for the customer.

The first thing we tried was pasting text from Microsoft Word, which led to all kinds of formatting issues. Then the customer tried starting from scratch inside the TinyMCE text box and formatting the text as they typed, this also led to a mess inside the ‘toggle editor’ html window. After cleaning up the first couple of weeks of trial and error I started to think that the only way the customer is going to have control over the appearance of the articles is to learn some basic html. For someone that designs websites that sounds easy but for someone that doesn’t it sounds like a monumental task, which defeats the purpose of having a WYSIWYG editor.

Ok, I guess we have to come up with a better solution.. then it hit me, we should be able to add styles to the TinyMCE drop down menu. This will lead to unlimited CSS possibilities, but the initial goal is for the blog / article posts to use the same color styles as the rest of the website without making a mess of things by pasting word text, using the color picker, or using h1 h2 etc text formats inside the TinyMCE editor. I want confident end users not ones that feel defeated because they have to call me frequently to clean up their coding mess.

By adding CSS styles to the Tinymce Style drop down menu the end user of the site can specify exact web text colors and styling. This will be crucial for the site owner to maintain branding consistency in their articles over time. Seems simple enough..

After my initial google search I found a number of blog / forum postings on the subject but no solutions to my complete issue. These are the steps I found:

• Create a new CSS file that includes your new styles for the TinyMCE editor to link to
• Put the new CSS file inside your /templates/custom/css/ folder
• The new file must be named editor.css (not sure this is critical, maybe on some servers)
• TinyMCE drop down menu only displays classes not id’s
• By adding a style to a text selection TinyMCE wraps it with a ’span class’

Input your file path to this box then TinyMCE will use this file for the Text Editor window. This input box is found in the plugins parameters for TinyMCE Editor.

By following these instructions I was able to get the new CSS styles to work inside the text editor window but once the changes were saved the styles did not translate to the live website.. But if I clicked to edit the text again the styles still show up in the editor.. hmmm…

After some frustration, the solution turned out to be rather simple, not only do you have to add the css styles to your newly added TinyMCE ‘Custom CSS Classes’ but you also have to add these same styles to one of the other ‘live’ CSS style sheets your website page links to.

These are the colors that Miracles of Health uses, so in order to make them accessible to the TinyMCE editor we added them to both the TinyMCE Text Editor stylesheet and to a live stylesheet:

.recipe-author { color:#135cae; font-style:italic; }
.blue { color: #135cae; }
.orange { color: #f36c30; }
.fuscia { color: #b7238f; }
.green { color: #76c048; }
.red { color: #ed1c24; }
.lightblue { color: #e1eef6; }
.dimgray { color: #333333; }

In synopsis, the CSS file path entered in the TinyMCE ‘Custom CSS Classes’ input box only affects the Text Editor display. In order to transfer these changes to the live website the same css styles need to be added to one of your ‘live’ css stylesheets as well.

Check out their website World’s Best Colon Cleanse, they have been doing a wonderful job of adding recipes and blog posts, so proud of them!.

Colorado State University’s College of Business Dedicates Rockwell Hall-West, Holds Open House and Hosts Retired Gen. Colin Powell April 30. Colin Powell’s talk reaches out to the northern Colorado attendees with a message emphasizing leadership and local community…

For licensing information on this image go to:
www.photoshelter.com/c/photography/gallery/Retired-Genera…

Astragalus Root Slices, Cloves, Thyme, Garlic, Sage, Yellow Powder 599, Peppermint, Hibiscus, cinnamon sticks, Psyllium, Pumpkin Seeds, Cayanne Pepper, Alfalfa, Root, Ginger photographed in studio white background.

License rights managed Active Health & Beauty stock photography.

Herbal supplement capsule broken open photographed in studio white background.

License rights managed Active Health & Beauty stock photography.

A young woman’s hands holding hibiscus in the shape of a heart photographed in studio bamboo background.

License rights managed Active Health & Beauty stock photography.

Warren Diggles Photography: Eye Center of Northern Colorado, optometric equipment used for eye exams.

License rights managed Medical Healthcare stock photography.

Dr. Wendy Austin, cardiologist at Heart Center of the Rockies for the cover of Northern Colorado Medical + Wellness at Edora Park, Fort Collins, Colorado. Providing a good example for the people of northern Colorado, Wendy wants you to know the importance of exercise for your heart health.

License rights managed Active Health & Beauty stock photography.

Warren Diggles Photography: Nicole M. Ferrara, D.D.S., P.C. - image for northern Colorado Medical+Wellness magazine spotlight piece on local female dental professionals. Dr. Nicole Ferrara performing a dental exam on a patient.

License rights managed Medical Healthcare stock photography.

Warren Diggles Photography: Dr Steven Roberts of Animal Eye Center, PC examining a dog that underwent cataract surgery only hours earlier in the day.

License rights managed Medical Healthcare stock photography.