theme design

Jennifer Balkan website

Jennifer Balkan website

I have just completed a redesign of Austin painter Jennifer Balkan’s website into a WordPress website. We kept a lot of the basic style elements from her previous site, but added a very user-friendly filmstrip-type image gallery, so you can very easily view both the thumbnail and large images. You can click on each of the large images in the filmstrip gallery to open an even larger image. And Jennifer will be able to update and maintain her site without having to write her own html code (she had created and maintained her previous site herself in HTML).

 

Jennifer Balkan - Gallery Page

Jennifer Balkan – Gallery Page

Jennifer-Balkan - Large Image

Jennifer-Balkan – Large Image

Take a look at the site at http://jenniferbalkan.net/, and fall in love with Jennifer’s paintings the way I have.  They are terrific!17:36:3102/10/2015

WordPress Post Thumbnail

Post Thumbnails in the Blog List View

Post Thumbnails in the Blog List View

When WordPress came out with version 2.9 in the fall of 2010, one of the best things they added was the Post Thumbnail for featured images.

For art sites, this was something of a Godsend.  I had previously been using YAPB (Yet Another PhotoBlog) for inserting one image as the main image for each post.  This one image would then appear at different sizes in different types of views, such as a small thumbnail in the blog, archive and category list view, and a large image in the single post view.

But, my hosting service strongly encouraged me to stop using YAPB, as they said it was very resource-intensive and was one of several plugins for WordPress that were causing my sites to bog down.  So I spent weeks replacing the YAPB images on almost 6 years worth of posts on my art site (nearly 300 posts) with the new featured images post-thumbnails (whew!).  I also edited the code files to get the images to appear just as I wanted them at the time.

It was exhaustive but in the end a very good thing, because once again, all I had to do was insert one image in my post, and it showed up in many places, while apparently using less resources.

See examples of Post Thumbnails and Featured Images in use:

[nggallery id=1]

Issues with New Designs

One of the other great things about WordPress is that they are very innovative and are continually improving their features and code, streamlining some things and adding others.  The result is that what was once just a little blog engine has become the most popular and one of the most powerful and versatile CMSs (Content Management Systems) around.  Of course, the downside of that can be that your website themes and files can become quickly outdated, requiring more weeks of learning and re-coding to keep things up to date.

For that reason, I often use a website design tool called Artisteer to begin a new design for my websites.  Once you have settled on a design within the software, it spits out (almost) all the files and images one needs for various types of websites, including WordPress websites.  Every exported design needs a bit (or more) of design and code tweaking to get them to look and work just the way I want them to, but otherwise it’s a pretty good tool.

However, all this innovation has resulted in some significant changes in the code for WordPress, and thus the code that Artisteer generates in their latest version has also changed quite a bit in just a few months.  And unhappily, from my perspective, they broke the featured image function.

For whatever reason, the themes exported from Artisteer no longer support the large image part of the Post Thumbnail function.   Personally, I’ve got too much invested in this feature on far too many websites to abandon the use of it (especially as it would mean replacing all 300 images I’d already replaced yet again!  And then some!).

So I’ve searched the web, and asked questions on several forums to find answers about how to fix this, but only one person was willing or able to give me a hint.  (Hat tip to Amy on the Artisteer forums 🙂 ).

So, with Amy’s help, and a bit more research and a lot of trial and error, I have come up with the following code fixes.  These may not be the only or even best ways to do these things, but they work for me so far.  Should anyone know of a better way, I’m all ears!

Code Fixes for the Featured Image and Post Thumbnail Functions in Artisteer Themes

To enable Artisteer-generated files to once again implement the featured image function (files shown in bold italic; code show in bold):

  1. To show your featured image in your single posts and/or pages:

    in these files: content-single.php (for posts) and content-page.php (for pages), move or insert this code ‘thumbnail’ => theme_get_post_thumbnail(array(), between ‘before’ => theme_get_metadata_icons(‘edit’, ‘header’), and ‘content’ => theme_get_content(),

  2. If you want to size the featured images to be larger than the thumbnails, instead of  ‘thumbnail’ => theme_get_post_thumbnail(array(), use this code:

    ‘thumbnail’ => theme_get_post_thumbnail(array(“size” => array(600, 300))),

    changing the sizes to the sizes of your choice (here, 600 is the width in pixels, and 300 is the height)

  3. If you want to move the default location of the thumbnails in the blog list views from above/beside the post title and header metadata to below them:

    in this file: library/wrappers.php move echo $thumbnail; to between echo $before; and ?>

  4. If you want your featured images and post thumbnails to be aligned right instead of left:

    in “style.css” find: div.avatar{  position:relative;  margin: 0 5px;  border: 1px solid #aaa;  padding: 1px;  background: #fff;  float:left;} and change the float from left to right.  Warning: this may also change the float of your comment avatars; I can’t really say, so proceed with caution.

  5. Then, on your site, under Dashboard > Appearance > Theme Options, under Featured Image, set:

    Use featured image as thumbnail

    Yes

    Use auto thumbnails

    Generate post thumbnails automatically (use the first image from the post gallery)

Your code and style in these files may be slightly different than mine, so adjust accordingly.

 

Hope this works for you…and now I’ve got it all listed conveniently in one place until the code changes yet again…

Plus, for reference purposes, here are a couple of posts in the WordPress Codex explaining the use and purposes of the Post Thumbnail and Linking to Post or Larger Image.

Abstract Paintings by Austin Artist Marilyn Fenn, website design v4.5

Abstract Paintings by Austin Artist Marilyn Fenn, website design v4.5

I have been moving toward more subdued colors in website designs (especially for artists!), and I think even my colorful work might look better against a more neutral background than before.  Soooooooooooo, I redesigned my fine art site one more time.  Luckily, this redesign only took me a week, while the structural and visual redesign from last fall took about a month.

While subduing the color palette of my site, I also decided to greatly simplify the amount of distractions. I have removed many of the doodads from the sidebars, and even removed the sidebar from many of the site pages. In several cases, I combined several pages into one that’s still easy to navigate with the addition of post tabs, and I’ve streamlined the info in the footer widgets. In a continuing effort to offer as much as I can without download speeds being too terrible, I have also reduced the number of plugins I’m using (and I keep whittling at the speed issue).

I replaced the random image of my paintings on the front page with a slideshow. I’ve upsized my art images and thumbnails sizes for better viewing. Plus, I recently added an on-site shop where you can purchase my art. Overall I’m very happy with this cleaner design and my yummy new colors of butterscotch, eggnog and chocolate.

Anyway, I hope you like the new design.  Plus, look forward to more art coming from me soon!  Check out the changes at Marilyn Fenn Studio.

Marilyn Fenn Studio website redesign, version 4c

Marilyn Fenn Studio website redesign, version 4c

I have just finished yet another redesign of my art website! The new design is a slight refinement of the previous visual design (with which I’ve been pretty happy for awhile), but more importantly, it represents a major underlying structural change. I have upgraded my site structural and design files to WordPress 3.01 to take advantage of the new structure and features built into the latest version of WordPress. I’ve also used a number of excellent plugins to extend the functionality.

Continue reading

The USS Macaw website

The USS Macaw website

I’ve just created a very simple design for a WordPress website for a friend of mine.  He is a journalist who has spent some part of several years interviewing survivors from the USS Macaw, a ship that sank at sea during WWII on which his father was aboard (and luckily survived).

I created the design and set up a WordPress site that will handle “siders”* for my friend Tim.   He will be adding all the content himself.  I am training him long-distance by phone.

You can check out the story and photographs from the ship and its crew at Tim’s site, The USS Macaw.

*According to Tim, a “sider” in journalism is a box on the side of the main story that contains related data.  On Tim’s site, the siders are used, for instance, to show photos (when available) and details about each of the crew members.

Marilyn Rea Nasky's New WordPress website

Marilyn Rea Nasky website, v2

Today we are launching the redesign of local painter Marilyn Rea Nasky’s website.  Her new site is done in WordPress, thus allowing her to do some or all of her own updates.  Visit her new site at lightwithinstudios.com: Marilyn Rea Nasky, Light Within Studios.

Marilyn Fenn Decor website, v2

Marilyn Fenn Decor website, v2

You may not know this about me, but besides being a website designer, graphic designer, illustrator and painter, I have also studied interior design.  It is one of my five favorite things to do, occupation-wise, though I am NOT officially an interior designer, I do not have a degree in interior designer, and I would not presume to do all that professional interior designers can do.  I do occasionally help folks decorate their homes, pick colors for their walls and buy great furniture.

You can see some of my little projects at a site I created for that purpose, Marilyn Fenn Decor.  I recently redesigned it into a WordPress site with a blog, which I am using to document some of the trials and tribulations and joys of undergoing a house remodeling project.  I do love my new design, which I tried to model after my previous design, while also updating the look and functions.  See the old design here:

Marilyn Fenn Decor website, v1

Marilyn Fenn Decor website, v1

Small Wonders Blogger blog

Small Wonders Blogger blog

I’ve just designed a new theme for a new Blogger blog I created for the purpose of selling my small art (no muss, no fuss — just small paintings at small prices, with easy Paypal “add to cart” buttons, called “Small Wonders.”).

Designing for Blogger is—well, definitely different than designing for WordPress or standard HTML/CSS websites.  Less complicated than WordPress, but less powerful, too.  I was able to add buttons, and with some coding hoop-jumping, add some pages, but I still haven’t found a way to create any kind of a gallery page (other than adding a Flickr slideshow).

Anyway, feel free to check out my site and my small paintings at Small Wonders.  Feel free to buy a painting, too!

Categories
Archives