Jun
01

Elegance

, , , , ,

 
Large preview of Elegance

WordPress is much more powerful than most people think. It can power magazines, work as a CMS, and even display job offerings. It really depends how far you want to go with it. Luckily, with the help of plugins, the possibilities are endless.

I wanted to create a different WordPress theme. I wanted to make a photoblog. With the help of a nice plugin called Yet Another Photoblog, I created a theme called Elegance. Since it is powered by YAPB, images can be easily uploaded and don’t need to be resized. Just upload an image in the highest resolution possible and the plugin will do the rest.

Be sure to read the instructions before using the theme. Some default settings need to be changed. Also, if you find any bugs, please let me know. It’s my first photoblog theme ever, but, hopefully not the last.

How to Install

  1. Download and install the Yet Another Photoblog plugin for WordPress.
  2. Download Elegance and place it in your WordPress themes folder.
  3. Change your permalink structure in your WordPress settings area (to /%year%/%monthnum%/%postname%/). This step is optional, but recommended.
  4. In the WordPress Admin area, go to Settings > YAPB. Uncheck “Display images on HOME page listing,” “Display images on SINGLE pages,” and “Display images on ARCHIVE overview page listings.”
  5. To add a photo, go to Posts > Add New. Be sure to add a title, upload the image, add a description (can be long or short), and tag the image. I strongly recommend that you use tags.

Version History

  • 1.1 – Support for EXIF and fixed link to RSS Feed. (June 14, 2009)
  • 1.0 – Theme released. (June 1, 2009)
License
Preview
Download
Heart

35 Responses to “Elegance”

  1. Shane says:
    June 5, 2009 at 10:38 am

    Thanks for the release! Just a quick suggestion. I think an Archives page would be neat showing like 100×100 thumbnails for the posts. I’m not very familiar w/ YAPB, but is it possible to add in alt/title to the images that are posted?

    Reply
    • Daniel says:
      June 5, 2009 at 11:11 am

      Hi, I’m glad you like it! I might do the thumbnail thing for the next design. The alt/title tag is automatically set to the name of the post. It can be changed somehow, but not by using YAPB. You would have to create a custom field, edit the theme files, and give the field a value for every post.

      Reply
  2. BeachsidePaul says:
    June 6, 2009 at 11:23 am

    I just glanced at your beautiful theme and am considering using if for our blog. You mention that you were making provisions for displaying/using the EXIF data from the photo but your “preview” site doesn’t indicate any. Is it incorporated in the theme? Is there any documentation on how to access it? Thanks for your efforts on, what appears to be, a very Elegant theme, pun intended! Paul

    Reply
    • Daniel says:
      June 7, 2009 at 7:56 pm

      Haha, thanks Paul. I haven’t gotten around to adding the EXIF feature. I’ll be away all of next week, so I won’t be able to until next Saturday.

      If you want to try it yourself, you can add the following in index.php:
      <?php $theWonderfulExif = yapb_get_exif() ?>

      That should list the EXIF info. I think you can customize what it shows by going into the YAPB settings. I’ll work on a nicer solution when I get back!

      Reply
      • BeachsidePaul says:
        June 9, 2009 at 4:45 pm

        Thanks Daniel, I’m going to cop out here and wait until you get a chance to play with it a bit. Have a good trip! Thanks again for your efforts on this, Paul

        Reply
        • Daniel says:
          June 14, 2009 at 8:49 pm

          Hey, the service trip to Camden was awesome and very eye opening. I’ve gone ahead and added support for EXIF. Just be sure to install the theme again than go into your YAPB settings to choose which EXIF fields you want to display.

          Reply
          • BeachsidePaul says:
            June 17, 2009 at 11:33 am

            Sorry for the delay Daniel, real world rearing it’s ugly head. Thanks for the update to EXIF, I’m downloading today and working on it this weekend. Thanks again, Paul

          • BeachsidePaul says:
            June 17, 2009 at 11:35 am

            Well I’m trying to download but when I click the download button I get an error message telling me the download does not exist :-( I’ll try again tomorrow. Thanks, Paul

          • Daniel says:
            June 17, 2009 at 2:03 pm

            Hey, thanks for the heads up. It should be working now. Let me know how you like it!

  3. BeachsidePaul says:
    June 17, 2009 at 3:02 pm

    Okay Daniel, I admit it, I’m a WordPress idiot LOL … you say to change my permalink settings for installation, do I change the “Common settings: to “Custom Structure” and then enter the string you have above? What exactly am I changing when I do that? Thanks for your patience here dude! Later, Paul

    Reply
    • Daniel says:
      June 17, 2009 at 3:16 pm

      Hey, yes, hit custom and paste that in. What it does is, instead of having yoursite.com/p=POST_ID_NUMBER, you would have yoursite.com/year/monthnumber/postname/, It’s better for search engines and highly recommended :)

      Reply
      • BeachsidePaul says:
        June 17, 2009 at 3:18 pm

        Very good kind sir! Working on conversion now, I’m sure I’ll bug you a bit more before all is said-and-done. Thanks again, Paul

        Reply
  4. BeachsidePaul says:
    June 17, 2009 at 3:41 pm

    Told you I’d be back! Okay, now how do I specify which EXIF data to include/exclude. It displays thumbnail as garbage and there is all sorts of EXIF data which really doesn’t need to pop-up. I check the YAPB settings but could not find anything to “screen” EXIF” data. I also checked your call to the function in header.php but couldn’t find anything obvious there either. Thanks a million for your help on this Daniel, Paul

    Reply
  5. BeachsidePaul says:
    June 18, 2009 at 7:18 am

    Morning Daniel, tired of me yet? LOL … Okay changed the permalink as you suggested but now it can’t find the other posts. I get an error 404 page. I tried changing the permalink back and exporting my blog postings. Then deleted the blog postings, changed the permalink to your custom version, imported the posts back in, no luck :-( anyway to have the new (and I agree better) permalink structure and save my old posts? It’s not that big a problem because I just started the blog and only have about 10 posts but I’d like to save them if possible. Thanks again for all your time, Paul

    Reply
  6. BeachsidePaul says:
    June 18, 2009 at 7:30 am

    Damnit, I’m sorry Daniel, here’s the correct link to the blog, I just wasn’t running on all cylinders yesterday (probably not today either)

    http://pcchiesmanblog.lightdynamicsphoto.com/wordpress/

    Thanks, Paul

    Reply
  7. BeachsidePaul says:
    June 18, 2009 at 4:37 pm

    Daniel, mostly up and running, please drop by and take a look! The last link I posted works, I think LOL Thanks, Paul

    Reply
    • Daniel says:
      June 18, 2009 at 6:06 pm

      Hey, I’m glad you like it. I don’t know if you’ll agree, but since you changed the background, I think the design would look better if you changed the color of the box borders and posttitle to #1f1f1f. It’s a darker shade of gray and would be nicer IMO. (You can change it easily in the CSS file by looking for the .box class). Also, you might want to change the background of the comments page as well. The comments have their own CSS file, so just look for that. As for the EXIF, it’s not too hard. Make a category in WordPress called something like “Doesn’t have EXIF info.” Then, find the category id number.

      To hide it when there is no EXIF info, go into header.php and replace the EXIF part with this:

      
    <?php if ( in_category('IDNUMBERHERE') ): ?> 
      <div id="exif" style="display:none;">
        <div class="box">
          <div class="wrapper">
            <fieldset>
              <legend>EXIF</legend>
                <?php
                  yapb_exif(
                    'li-exif',   // CSS Class for the LIs
                ': ',        // Separator between EXIF token name and value
                '<p><strong>',  // HTML before EXIF token name
                '</strong>', // HTML after EXIF token name
                '<i>',       // HTML before EXIF token value
                '</i></p>'       // HTML after EXIF token value
                )
              ?>
              <p style="float:right;margin:3px 5px 0px 0px;color:#8D8D8D;"><a href="javascript:toggleLayer('exif');">Close</a></p>
            </fieldset>      
          </div>
        </div>
      </div>
    <?php endif; ?>

      Then go to index.php and replace the EXIF link with this:

      
  <?php if ( in_category('IDNUMBERHERE') ): ?><p style="float:right;margin:3px 5px 0px 0px;color:#8D8D8D;"><a href="javascript:toggleLayer('exif');">EXIF</a></p><?php endif; ?>

      If those codes didn’t appear, go here:
      http://pastebin.com/f10da1363

      Hope everything works out!
      Daniel

      PS: I posted this same comment on your blog, but I was afraid I’d forget to check if you replied.

      Reply
      • BeachsidePaul says:
        June 19, 2009 at 9:02 am

        Thanks Daniel, EXIF button taken care of. I didn’t do it the same way you suggested because I didn’t want a category like that exposed, I have a catagory drop down on my nav menu. Instead I wrapped the code with:

        0): ?>
        … the exif display code …

        This could be added to your theme without effecting normal operations I think.

        I’m playing with your color changes, kinda’ like your original gray, but I’m looking at options.

        Thanks again for your help! Paul

        Reply
  8. BeachsidePaul says:
    June 19, 2009 at 9:41 am

    *sigh* okay one more try:

    
<?php if (sizeof($theWonderfulExif = yapb_get_exif()) > 0): ?>
    ... exif handling/display code ...
<?php endif; ?>

    I’m sorry to be monopolizing your blog LOL, just go through and delete the meaningless comments please :-) Later, Paul

    Reply
    • Daniel says:
      June 19, 2009 at 9:51 am

      Ohh, that’s very smart. Is it working correctly?

      Reply
      • BeachsidePaul says:
        June 19, 2009 at 10:10 am

        Thanks, working like a charm. I’m playing with the theme today and most of the weekend so drop by when you find a free couple of minutes. Just started adding a Flickr “badge” of recent photos to the footer and tweeking it (or trying to) … Thanks again for the theme and all your help. Please feel free to drop a note anytime if you need a “guinea pig” for testing. I’m doing my best to keep mods in order so I can update without toooooooo much pain. Later, Paul

        Reply
  9. Aamer says:
    July 31, 2009 at 1:49 am

    Hi , I am in testing this theme to use for my portoflio.

    Two questions so far – is there a way to disable the ‘original’ link, underneath the image?

    and is there a way to incorporate light box effect so its not easy to download images?

    Reply
    • Daniel says:
      July 31, 2009 at 8:42 am

      Hi, it’s very easy to remove the original link. As for downloading photos, there’s simply no way of stopping people. I’ve searched online for a few methods, but none are effective. When you mentioned a lightbox, were you talking about something like this? I doubt that would prevent downloading.

      Reply
  10. Aamer says:
    July 31, 2009 at 1:32 pm

    So is there a way to implement something in this theme to minimize the chances of downloading?

    Reply
    • Daniel says:
      August 1, 2009 at 11:05 am

      Well, I mean, you could disable right clicking, but that can be annoying for visitors, so I would not recommend it. Another way (and more effective) is to layer transparent image over the actual photo. That way, if someone right clicks and tries saves the image, they will download a tiny transparent dot. You can see that in action on Flickr. The problem is that I don’t know how to implement it. You can ask the people at the Yet Another Photoblog forums and they might be able to help. You could also try watermarking your images before you upload.

      All this helps, but nothing can stop the print screen button. :/

      Reply
  11. wanfauzan says:
    August 3, 2009 at 9:47 pm

    hi daniel,

    nice theme you have there. i already installed it on my website and it works great. just a suggestion, why dont you make the comments appear right on the site, i think that the need to click to view comments is just another barrier between readers and the writer. you know what i mean, right?

    Reply
    • Daniel says:
      August 4, 2009 at 12:30 pm

      Hi, I know what you mean. I did it this way because I wanted the focus to be on the picture. I’ll def. consider doing things differently when I make another photoblog theme.

      Glad you’re liking the theme though!

      Reply
  12. Aamer says:
    August 4, 2009 at 7:34 pm

    I like it how the comments are ‘hidden’. and that the focus is on the picture itself.

    Reply
    • wanfauzan says:
      August 5, 2009 at 3:57 am

      actually it depends on your personal taste. it wouldn’t be a bad idea if in the next update, we can choose to have the comment section as pop up or blended in the page.

      Reply
  13. David says:
    October 28, 2009 at 8:56 pm

    I was wondering if you know what code needs to be modifies or changed to restrict the height of vertical images with your theme and YAPB? The width seems fixed for all images so horizontal shots are fine, but vertical images display at a massive size! I know I can restrict the size from my image editing app, but I do like the view original size feature, so want to have the larger size on offer.

    Reply
  14. David says:
    October 28, 2009 at 9:05 pm

    Found it. Added the height restriction to this line in the index.php

    echo yapb_get_thumbnail(”, array(’alt’ => get_the_title()), ”, array(’w=819′,’h=819′,’q=90′));

    Now i just have to figure out how to align center instead of to the left…

    Reply

Leave a Reply