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
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 .
add labels for post then publish .
how to edit the catagiries
ReplyDeletecheck this image : http://lh6.ggpht.com/_MsaNQZtvB5E/SszFfJr5IYI/AAAAAAAAAJY/lZDzuhyKeFo/s144/Noname.jpg
ReplyDeleteit'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
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*
ReplyDeleteI 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
hello Nick Cachet
ReplyDeleteThanks 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 ^^
hi nemisesmilvene .
ReplyDeleteThanks 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?
I changed height and width attribute to max-height and max-width in my demo blog : http://nhamngahanh-gallery.blogspot.com
ReplyDeleteYou can take a look if it is what you want or not ?
Just uploaded this template and fooled with some of the settings to get a satisfactory result.
ReplyDeleteIs 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.
Hi,
ReplyDeleteThis 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?
Hello,
ReplyDeleteI 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!
@Linny : you can check this image : http://lh6.ggpht.com/_MsaNQZtvB5E/SszFfJr5IYI/AAAAAAAAAJY/lZDzuhyKeFo/s800/Noname.jpg
ReplyDeleteI 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
thank you so much for your help!!
ReplyDeleteit works! ;)
nhamngahanh,
ReplyDeleteThanks for your clear and caring reply. It helped me :)
you are all welcome ^^ I'm glad to hear that my template work finally
ReplyDeleteWOW!!! 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@Евгений : many people ask me this question and the answer is still the same :
ReplyDeletethis 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 .
Hi, congrats for your work. Simplex Gallery it's working great with "landscape" photos.
ReplyDeleteYet 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.
Oh too bad! Didnt work for me!
ReplyDeleteThis 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!
ReplyDeleteFinally got it.. Thanks!
ReplyDeletehttp://chyndiphotos.blogspot.com
@fcm : you can find two lines in template file :
ReplyDelete#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
>>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
ReplyDeleteI hope this post helpful to you .<< It,s OK! Thank you very much!!!
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..
ReplyDeleteOne 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.
@fcm : Glad to know the adjustment works for you .
ReplyDeleteOn the trouble you mentioned ,could I see your blog for more ? I really don't know what trouble like?
This comment has been removed by the author.
ReplyDeleteHI nhamngahanh ,
ReplyDeletemy 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 ~
@hasrul hassan : To center image and caption ,you can follow some steps bellow :
ReplyDeleteIn 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
Hi, i'm using this template, and i want to change the ABOUT section for a Search form.
ReplyDeleteI 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
Hi,
ReplyDeleteThanks 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
@ Margarita Punzó : you can check out the Live demo . I added a new search box .
ReplyDeleteTo 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
Hi nhamngahanh :
ReplyDeleteI 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!!!
@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@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
ReplyDeleteThanks. It works ...
ReplyDeleteNow another question.
The horizontal photos have not the maximum size on the screen. What is the solution ?
Thanks a lot
@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 .
ReplyDeleteit's all about this CSS line :
#main_image img{....}
thanks for the wonderful template ?
ReplyDeleteHow do I increase the number of tumbnails at the bottom? Thanks!
"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?
ReplyDeleteAlso, can the font and color of ""Older posts"" and ""Newer posts"" at the bottom be changed?
Thank you nhamngahanh
@Alan : to increase the number of thumbnails at the bottom of page,you can increase the number of post showed in your blogspot :
ReplyDeletelogin 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 .
Thanks for the reply.
ReplyDeleteIt 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.
sia:
ReplyDeletethanks. great template