Simplex gallery ,blogspot template for photo gallery site

There are a newer version for this template . The download link is provided in this post.

I always believe that blogspot and wordpress are the easiest publishing platforms for everyone . And they can do any task a website base on other platform can do .
I go around some photo gallery websites ,some of them base on PHP and the others base on Flash . So I made this template in blogspot for everyone know that blogspot can do most of work others platform can do .
This template is named Simplex gallery .It's specific for gallery website .
here is the screenshot

Photobucket
Live demo Download

Install instruction

In this template ,I integrated all javascript ,so you don't need to upload any javascript files .

1. Download it ,extract .

2.Open template file in any word editor you have,change the URLs in template file . You need to change url in this section :  
<div id="header"> ..... </div>
Find and replace
http://nhamngahanh-gallery.blogspot.com/... 

with your urls

3.Upload template to blogspot .
Done

How to use

To post your images ,open your blog editor , upload your image .Each post contain only one image ,no more ,so upload one image in each post .
Choose edit in HTML mode ,keep only img tag like this :
<img src="your image url" title="title of your image - required" />
remove other tags and any things else .
Noname
add labels for post then publish .



huy signature

Share this post

Advertisement

39 comments

  1. how to edit the catagiries

    ReplyDelete
  2. check this image : http://lh6.ggpht.com/_MsaNQZtvB5E/SszFfJr5IYI/AAAAAAAAAJY/lZDzuhyKeFo/s144/Noname.jpg

    it's the picture I captured a part of my template sourcecode .

    in this picture ,I marked where link and text for categories located by arrows . All the links for category are in tag layout div class="headerright" . You first find "div" tag with class="headerright" and it's where you need to change for your categories in my template

    ReplyDelete
  3. This is truly the template I've been looking for! Took me a minute or so to figure out the labels part but that is pretty easy using Notepad, thanks for the great template- *Especially for including that all-so-difficult flash into the html*

    I do have one question though, if you create a text post lets say for the 'about' tab on this template what would the impact be on the flash image player, would the text post be shown or would it mess up the template? Should I rather post the about info on another blog and just set the link to that particular page?

    Yours-happily
    Nick
    My current site that will be changed in time with this awesome template you have created because I think it is so much more stylish and awesome

    ReplyDelete
  4. hello Nick Cachet
    Thanks for your comment .
    About your question ,I wrote an article on how to create contact page for Blogger at http://simplexdesign.blogspot.com/2008/10/create-contact-page-for-blogspot.html . You can do the same to create your own about page or contact page . If you want your about page more personalize ,just add CSS code for formatting your about page in HTML/javascript widget .
    I hope you will back ^^

    ReplyDelete
  5. hi nemisesmilvene .
    Thanks for your comment .
    because I set a fixed width and height is 700x438 px ,so your image will be resized to this proportion ,and make your image are distorted . To keep image as original proportion ,you can do some steps bellow :
    open template file in a word editor. press Ctr+F to find this term "#main_image img " ( not included brackets ) . This is CSS tag control image appearance . Find attribute : height and width and change this to max-height and max-width .
    We change height and width to max-height and max-with mean instead of assigning a fixed size 700x438 px for images ,we assign the maximum value for both of width and height . If your image width is over the maximum value , the width is forced to maximum number and height will be calculated for keeping its original proportion .The same if height is over maximum value . In case of your image size is not over both of width and height ,it will be keep as original .
    That's all .Check it out and give me your result ,Ok?

    ReplyDelete
  6. I changed height and width attribute to max-height and max-width in my demo blog : http://nhamngahanh-gallery.blogspot.com
    You can take a look if it is what you want or not ?

    ReplyDelete
  7. Just uploaded this template and fooled with some of the settings to get a satisfactory result.

    Is the template able to process plain text posts? For instance, I want the 'about' category to go to a paragraph of text; as it is, the template tries to load the text into the thumbnail. Any way to change that? And also, it would be nice to have an option to attach some text to the images, like room for a couple of sentences, where the title is.

    Thanks for the template.

    ReplyDelete
  8. Hi,

    This emplate is awesome, but I've three questions:

    1) I want to post more than one image in one post. As you know, there's a limit of 50 posts per day in Blogger, and for photo blogs, one may need to upload alot of photos. Also consider the fact that you create new post for every new photo you want to add. Can you consider this point in the next update?
    2) Can I insert Adsense code below or above the individual images? Is it possible to insert Adsense code anywhere in the template?
    3) I need to make some SEO, is there any space for text?

    ReplyDelete
  9. Hello,
    I love this template, it looks elegant. But I have some problem of how to add more labels in "Categories" section. It's already 4 labels, but when I try to add more by changing the coding, it's not working. Can you help me how to add the code to add more labels under "Categories" section?

    I really need your help. :)
    Thank you!

    ReplyDelete
  10. @Linny : you can check this image : http://lh6.ggpht.com/_MsaNQZtvB5E/SszFfJr5IYI/AAAAAAAAAJY/lZDzuhyKeFo/s800/Noname.jpg
    I marked where categories are by arrows .
    To add more category in Categories section ,you do as structure of Human label in the picture . If you want to add "children" category ,insert as structure of Colors or Flower label in the picture

    ReplyDelete
  11. thank you so much for your help!!
    it works! ;)

    ReplyDelete
  12. nhamngahanh,

    Thanks for your clear and caring reply. It helped me :)

    ReplyDelete
  13. you are all welcome ^^ I'm glad to hear that my template work finally

    ReplyDelete
  14. WOW!!! I do it! Thank you very much! I've understood your answer! I used the wrong link for the searhing puctures! It was "http://fxlens.blogspot.com/search/label/nature/Trees", but the right version is "http://fxlens.blogspot.com/search/label/Trees"!

    ReplyDelete
  15. @Евгений : many people ask me this question and the answer is still the same :
    this template is base on a javascript gallery ,so it is not able to process plain text post . But if you want to create a "about page" or " contact page " or any other pages ,you can follow instruction to create a page at this address :
    http://simplexdesign.blogspot.com/2008/10/create-contact-page-for-blogspot.html
    I hope this post helpful to you .

    ReplyDelete
  16. Hi, congrats for your work. Simplex Gallery it's working great with "landscape" photos.
    Yet I have some questions..
    What about the "portrait" photos? I'm not using max-width & max-height , just 750x500px.
    What settings can be done so the vertical taken photos will display correctly?
    If you resize the photo to fit the 750x500px , a vertical (portrait) photo will be very small.

    Thank you.

    ReplyDelete
  17. This template is what i.ve been looking for. But why my photos won't appear. I followed all the instructions but still didn't work. It says "error loading image"...why? Please help!

    ReplyDelete
  18. Finally got it.. Thanks!

    http://chyndiphotos.blogspot.com

    ReplyDelete
  19. @fcm : you can find two lines in template file :
    #main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
    #main_image img{margin-bottom:10px;max-height:438px;max-width:700px;}
    and change width ,height attribute for your need .

    @Pretty Little Star : I've just go through your site . To fix error ,just go to your posts ,choose edit in HTML mode ,and remove all other tag but keep only img tag as this structure : <img src="your_image_url" title="your_image_title" />
    This template is based on javascript for gallery ,so it can't process posts with text ,or any other tags but <img > .
    Check this and give me your result

    ReplyDelete
  20. >>Tell me please, can I use just only text in my one message in blog? http://simplexdesign.blogspot.com/2008/10/create-contact-page-for-blogspot.html
    I hope this post helpful to you .<< It,s OK! Thank you very much!!!

    ReplyDelete
  21. Ok, I did some adjustments over there, 438x700px was a little too small and another thing that I've done was to resize all the photos to 500x750px.. it's not a BIG adjustment but it makes a difference on my monitor..
    One other thing, the first photo from the gallery when it is loading, it blinks once and it dissapears. You have to click on the second thumbnail to load a big photo. Can this be fixed?
    Thank You. Keep up the good job you're doing.

    ReplyDelete
  22. @fcm : Glad to know the adjustment works for you .
    On the trouble you mentioned ,could I see your blog for more ? I really don't know what trouble like?

    ReplyDelete
  23. This comment has been removed by the author.

    ReplyDelete
  24. HI nhamngahanh ,

    my condition is just same as Pretty Little Star's condition.
    i follow ur intructions and it works !!
    thank you!
    this is a really nice and perfect template for photo ~

    ReplyDelete
  25. @hasrul hassan : To center image and caption ,you can follow some steps bellow :
    In CSS section ,find
    .caption {.......}
    and replace it with
    .caption{font-style:italic;color:#887;text-align:center;display:block;}

    find #main_image img{........}
    and replace it with

    #main_image img{margin-bottom:10px;max-height:438px;max-width:700px; display: block; margin-left: auto;margin-right: auto; }

    That's all . I hope this helpful to you

    ReplyDelete
  26. Hi, i'm using this template, and i want to change the ABOUT section for a Search form.
    I tried adding the search gadget, but i can't change the width.And it's too wide

    here's a img how i want the template to look like .
    http://lh4.ggpht.com/_9Ta91dFl9w4/Su2r9xoTNuI/AAAAAAAAAjA/xlVYSbUGVdk/search.jpg how i want the template looks.

    Sorry, my english isn't very good. I hope you can understand me

    ReplyDelete
  27. Hi,

    Thanks so much for the template! I was wondering if there was a way to adjust the thumbnails. Currently, they cut the heads off the top of the picture. Thanks!
    http://obergphotography.blogspot.com

    ReplyDelete
  28. @ Margarita Punzó : you can check out the Live demo . I added a new search box .
    To add a search box ,you can follow steps bellow :
    open template file ,find these line :
    <li>
    <a href='#' title='About'>About</a>
    </li>
    <li>
    <a href='#' title='Service'>Service</a>
    </li>
    <li>
    <a href='#' title='Portfolio'>Portfolio</a>
    </li>

    Replace them with this code :

    <li>
    <style type="text/css">
    #searchwrap {
    background:transparent none repeat scroll 0 0;
    height:27px;
    margin:2px 5px 0 0;
    }
    #searchwrap #s {
    border:1px solid;
    font-size:14px;
    margin-right:3px;
    padding:4px;
    width:190px;
    }
    #searchwrap input {
    background:transparent none repeat scroll 0 0;
    color:#A7A7A7;
    font-family:arial,helvetica,verdana,sans-serif;
    vertical-align:middle;
    }

    </style>
    <div id="searchwrap">
    <form action="http://nhamngahanh-gallery.blogspot.com" id="searchForm" method="get">
    <input type="text" id="s" name="q" value="search..."/>
    <input type="image" alt="Submit" src="http://www.press75.com/demos/tv-elements/wp-content/themes/tvelements-dark/images/go.gif" id="searchsubmit"/>
    </form>
    </div>
    </li>

    Remember to change URL of your blogspot in the code .
    Save template and it's done .
    Hope this helpful to you

    ReplyDelete
  29. Hi nhamngahanh :
    I placed the new code, but it didn't work :(.
    Even at your demo page didn't work....
    You can see it at http://margaritapunzo.blogspot.com
    There's something that i miss? Any extra modification?
    Must search and find any tag or name, isn't?

    I really appreciate your time and dedication. Thank you!!!

    ReplyDelete
  30. @Margarita Punzo' : search box I created truly doesn't work . I will try to fix errors and give you the result as quick as possible . Thanks for carring

    ReplyDelete
  31. @mahdi shadkar : in comments above ,I answered hasrul hassan how to center picture and make it sized as you want . You can take a look on it and adjust the code for your need

    ReplyDelete
  32. Thanks. It works ...
    Now another question.

    The horizontal photos have not the maximum size on the screen. What is the solution ?
    Thanks a lot

    ReplyDelete
  33. @mahdi shadkar : In comments above ,I talked about how to re-size image to any site you want . You can change the maximum size of image as equal as size of your screen .
    it's all about this CSS line :
    #main_image img{....}

    ReplyDelete
  34. thanks for the wonderful template ?

    How do I increase the number of tumbnails at the bottom? Thanks!

    ReplyDelete
  35. Maybellinea Pria8 November 2009 at 23:35

    "Thank you for the template. I know how to put the portrait photos in the center but can the words be to the left of the portrait picture instead of at the center?
    Also, can the font and color of ""Older posts"" and ""Newer posts"" at the bottom be changed?

    Thank you nhamngahanh

    ReplyDelete
  36. @Alan : to increase the number of thumbnails at the bottom of page,you can increase the number of post showed in your blogspot :
    login to dashboard ,click on setting ,go to Formatting tab ,in Show ,write the number of thumbnail you want to show and save setting .That's all
    @Maybellinea Pria : in comments above ,I answered your question ,here it is :
    In CSS section ,find
    .caption {.......}
    and replace it with
    .caption{font-style:italic;color:#887;text-align:center;display:block;}

    To change font of "older posts" and "newer posts" ,you can find this CSS tag :
    .nav { .....} and change it as you want .

    ReplyDelete
  37. Thanks for the reply.

    It works for the main page (I set it to 27 for 3 rows) but when I click on the category links, it only shows 20 images.

    ReplyDelete
  38. sia:

    thanks. great template

    ReplyDelete