Image Gallery in Drupal

I created an image gallery on my website today – take a look at it here

I used ImageCache, CCK and Views, and Lightbox2.

SINCE WRITING THIS POST I HAVE ACTUALLY FOUND AN EASIER WAY USING THE IMAGE MODULE – I HAVE WRITTEN ABOUT IT HERE.

I was going to just use the ‘Image Gallery’ which appears in the navigation menu, I think that it came with the ‘Image’ module. The reason I didn’t use this is because right at the start I made an image gallery in there without really knowing what I was doing and I couldn’t change the sizes of the images so I wasn’t happy with it. I then began to check on Google for what other people have done to get some ideas and see how I could achieve what I wanted.

I realised that most of the things I read about did not use the ‘Image Galleries’ option. Most people have made their own Gallery using ImageCache to create a thumbnail and main image and then using Views to create the gallery and Lightbox2 to view them as full size images.  Its really cool this way.

I followed the instructions at this blog post here which was real easy.

Well……. I say that now – at the time it was not the easiest thing I have ever done!!  I had to read it and read it again and then try it and realise that I was doing the wrong thing and then read it again.  Phew – its took a few hours!  But it is done now and I am pleased with the results.

Some other tips I would add would be to remove the Image Gallery link from the Navigation menu (if it is there) so that it does not get confusing.

Check User Permissions!

Also I would suggest that you ensure you have checked the user permissions for viewing images. Go to admin/user/permissions and check all Image and ImageCache (and any other image related modules) settings and ensure anonymous and authenticated users can view images, thumbnails and galleries. I did not do this at first and I excitedly told everyone about my image gallery. I felt like a bit of a fool when they told me they couldn’t see it!

Problems viewing in different browsers

I had the most  disheartening evening a few days ago after I had been to an internet cafe in town to check my site on a different computer and operating system.

I use an iMac with Firefox and its all updated and in perfect health. The internet cafe uses old pcs with Internet Explorer version 6 and Firefox version 2.

The difference in the way these different browsers view the site is amazing! I was prepared that it might not be the same but I wasn’t prepared that it would look shit!

Below is a list of some of the problems I encountered and how I solved them –

UGLY FONT – I had chosen a serif font for some reason. Well I did it coz I thought it looked good. But the thing is that it only looked good on the first font of the list (in the css there is a list of fonts to use and the browser just goes thru the list till it finds one that it is able to use – I found that out in a book I read) and then rubbish on all other fonts in the list. My first font was Baskerville so its not really a common one. I’m totally changing to arial now!! Now I know why almost all websites use this font!

MASSIVE TEXT – Yeh, for some reason the text was huge! I think this is also to do with the serif font selection that I chose. Because Baskerville looks real small for its point size I had the font set pretty big and when viewed in another font it looked completely stupid. I have obviously changed that now and the font is about the size of this text here.

PNG FILES HAVE NO TRANSPARENCY – This was something I was not prepared for. The png file which I had used for my logo in the title banner looked actually total crap! It wasn’t a nice white logo on a black background, it was a white logo on a sort of opaque grey square that was just laid over the top of my website. Yuck!

PNG or GIF? – This was the issue I was faced with. Do I place a gif file in there instead, which has a much larger file size and would be bad for ppl with a slow connection (ie – a lot of New Zealand) but keep the transparency. Or do I still use a png but I have to recreate it with the exact colour of the background, meaning that I would have to re-make the png file if I were ever to change the colour of my header. Its not ideal either way but I decided to go with the png because of the file size and also because gif files are real old now and png is the way to go really. Its just the older browsers that couldn’t read them properly. If it was up to me everyone would have an up to date version of firefox! But I understand why its not like that 🙂

CHECKOUT NOT WORKING – Now this one is something that I can do less about without a greater knowledge of what I am doing. Basically in IE6 the shopping experience isn’t as good as it is in my browser. There is some text that is bigger than it should be and its just not ‘nice’ like I want it to be. So 😦  More worringly for me tho was that in the firefox version 2 that I tried I could not get thru the checkout as it did not give me a box to fill in for country but it required this to be filled in. How can I fil in a box that doesn’t exist? Stupid thing!

So to solve this problem I haven’t solved it at all, I have just put a note in the FAQs saying that the site has been developed for latest versions of firefox, chrome, safari and internet explorer. I hope that no one will be offended that my site doesn’t work on their browser and I basically told them to get with it and download a new one. ooh well.

I’m going to go check it again later so I hope it now works well enough so that I am not embarrassed of my site!!

I’m totally in love with firebug!

Wow -css is awesome!

I have been able to style my whole website in new colours without affecting anything else. I haven’t ruined anything! I have just coloured the site in line with the colours of the brand. Its sooooooo exciting!

My two most useful tools have been a book called Head First HTML with CSS & XHTML
and firebug.

Why I found an old-fashioned book to be useful –

I’ll talk about the book first – it has been really great for a few reasons. One is that I could read it while my boyfriend was on the computer, meaning that it was more useful than a website or a blog. I was able to read it while outside tanning on the balcony!

The other reason is that it is written in a style called Metacognition, which basically means that it is easy for the brain to pick up and remember. And I think it really works personally. Well it seems to have worked for me!  And its also not boring and I could just read it like any normal book.

And finally it has just been really good to have the whole HTML thing explained from basic principles as I had no knowledge of it at all until now. I really understand CSS better now that I have begun to understand what came before it and I am really keen to know more and more and more now!!!

Why I love firebug –

Wow – its amazing! I never knew that websites could be so fun! With firebug there is hours of fun to be had and nothing bad can happen, so that makes it even more fun!

Basically it allows you to see what will happen when you alter the css. But it doesn’t actually change anything so, as I said before, nothing can go wrong. Its a great way to test things out before actually implementing them and also its good to show you which line of css to alter. that was what I found extremely useful.

Here you can see what happens when you hover over an element on the page. (In this example I am hovering over the footer element)

At the bottom of the browser window firebug lists the html on the left and the css on the right. So then you can go into the css on the right and make changes and then look at the screen above to see what those changes will affect. Its so awesome!!

I could change the whole appearance of my site without ruining anything and totally go wild with the colours and styling. It was a great education for me just to play with it. Playing after all is supposed to be one of the greatest ways of learning things.

So I would really recommend trying firebug if you haven’t already. Its just an addon for firefox and it takes no time to install and its really easy to use. And actually while adding the link to this page I saw that firebug has an option for Safari, Opera and IE, which is called firebug lite – so thats cool!

Here is a screen shot of my new colours, do you like them?

Images not showing up in Ubercart site – Problem solved!

So I have fixed the problem that the images would not appear in my store, which I have built using Ubercart – which is awesome! So easy to use!

Anyway – the solution was soooo simple.

All I had to do was to go into module preferences and turn off ‘imagemagick’ in ‘Image API’

This is all it took. Basically it was looking for Imagemagick when it could have been using the built in image viewer instead. It is now doing that and everything works perfectly!

The site is going really well at the moment and I really think it could actually be used as a shopping site in the future  🙂   I am also going to take a look at my parents website soon too, since they are the real reason I am learning all this stuff! I am grateful to them for that. I would never have got myself to learn these things if it weren’t for them. Don’t you just love family 😀

My Tips for Uploading Drupal Site From Local Computer to Internet

I actually had a few problems getting the website transferred from the local host (my computer) to the internet.

Here’s what I did –

I use the free FTP (File Transfer Protocol) called Filezilla, this works on Mac and PC and its real easy to use. There are instructions to explain exactly what to do. They are really clear I think, but I also think that if someone had used another FTP then they could probably work out how to use Filezilla without instructions.

Uploading the files is just a case of highlighting the files on the left side of the filezilla interface, and right-clicking (or control click with a Mac) and uploading to the right-side, where the destination file has been chosen.

By the way- the destination file will be called something like ‘public.html’ and your web hosting company will tell you what this is. My web-hosting company just told me that info in an email where they also outlined the password and username to use. I use the Kiwi Webhosting Company because I am in New Zealand and wanted to use a local company. I bought my domain name from GoDaddy.com and I could have got web-hosting thru them as well but I decided to go with the Kiwi Webhosting company because I am new to all this and they have really good customer help, I am sure GoDaddy would be fine for hosting tho, I am just a bit old-skool sometimes and like to keep it local.

Uploading to the web – Points to remember

Computers are unforgiving – you have to upload the files in the correct folder!

The first mistake I made was to upload the whole ‘drupal’ file from within MAMP. This was wrong because in the top level of the public.html folder there has to be something called index.html. What happens is that the website looks for a default page to upload first and this index file is is the one it is looking for, or at least thats how I understand it and I am sure that is close enough to what happens.

So really how that affects me is that the top level was just one file called drupal and there was nothing for the website to find as a default page.

The solution was to delete the files and start again, which isn’t so bad.

Upload a new settings file to point to your new database.

When you choose your webhosting provider one of the things you have to look out for is to make sure that they have MySQL (which seems to be pronounced my sequel) and PHP, both version 5 or above. Now I don’t really know what these are but I do know that MySQL is to do with the database and that the database stores all the information for my website. I also know that this database was once stored in MAMP and has now been transferred over to my webhosting provider. This was fairly easy after a video tutorial at Learn By The Drop.

Because of the change in location I now have to make a new ‘settings.php’ file to replace the existing one, the purpose of is so that it will point to the correct database and the website will work  😀

This settings file is stored in the defaults foder, inside the sites folder which is inside the drupal folder.

I made a copy of the file and opened it using Text Wrangler (a free programme for writing html and css and php files) and then I found the line that needed changed and I changed it and saved it. I then uploaded it into the correct location on the right side of the Filezilla screen and I was going to be looking at a site on the actual internet!

It should have been so easy….

But even tho I had followed instructions from a few different sources on the internet I just could not get the combination of the name and the password correct. I was upset about it for days. I just could not work out what to do. When it suddenly occured to me…

Ask for help if you need it!

All I needed to do was to email the webhosting company and ask their advice. It wasn’t even difficult. They were really quick to respond and asked me to send the settings.php file as well as to tell me where this file was saved in the file tree.

And then they told me what I had done wrong.

Here is the text I was changing (line 92 in my file) – $db_url = ‘mysqli://username:password@localhost/databasename’;

So I changed username to my username as it is for the webhosting company, the same one that I use to log in to my cpanel. The same with the password. I then put my site name as the localhost and the database name is the one which I created when I copied the database from MAMP to my webhosting provider.

What I did to correct this is that I just changed the localhost back to that word and no longer tried to use the website name. Not sure how that works but it totally does and I am VERY happy with the results!

My site is online and I can work out if this image thing has anything to do with that at all.  Better get back to it…

Aquia Prosper Theme – Visual

Just wanted to record the appearance of my theme at this point…

Header – As you can see, I have an image across the top and the primary links are below this. I like the simplicity of this.

Sidebars – To the left, in the ‘left sidebar’ I have the items available to buy in the store displayed in a list so visible on every page. (yes I know there are only 4 so far – need to create some more designs!)

Under the list of items is the shopping cart – this is only visible on pages which are directly related to the store.

There is no right sidebar at present, keeps it simple…

Main Content – This page is a store page and is displaying one of the designs. You can see that I have not been able to get the image of the t-shirt to show up. The image has been inserted using Ubercart and the theme. It is supported with the ImageCache module and the Views module. I really have to get my site online to see if that will fix it….

Had friends staying for the past week and have ignored my site completely – tut tut!  Better go do it now!!

Choosing a Theme in Drupal

So like I said in the last blog post I have now added Ubercart to my Site and I have started to get real excited coz I can see it in my mind and I can imagine how good it will be once it is finished. Its going to be a shop for hot-rod inspired t-shirt designs- it will be so awesome!

The only problem has been that I think I set myself too big a challenge with the theming.

I think that really there are so many themes out there made by people who know what they are doing that I would be a fool not to start by using one of these and making a site that way. As they are customiseable I wouldn’t have a site that looked like someone else’s, I could make it unique.

So I went for another theme hunt and I tried out a few and came up with Aquia Prosper as my favourite. Its set up for Ubercart already so it will work real well for what I want and also the colours are perfect as I would like to have a theme of black (or grey), white and red. Also its clean and clear and it seems to be really flexible.  It is based on the Fusion theme so I had to download that as well and also the module called Skinr as this is what is used for some of the flexibility with the appearance.

So far it is all going really well and I am super pleased with how it looks and works and I have even managed to get the banner (is that the correct term or is it just header?) at the top to look how I want it to by turning off the title and letting my image stand out. I uploaded a png image for this as it has no background and so I was able to use the grey background within the theme, by getting it to show thru. Its really cool to be able to do that and I am really happy with the result.

The problem I am having at the moment is that the images aren’t working as they should. I am not sure if this is because I have two image modules downloaded or if its something I have done. Thats the problem with not really knowing what I am doing – it is so great when its going well but when a problem comes along I can spend hours and hours trying to solve it and not knowing what to do. It has certainly used up a lot of time!!

What is happening is that the images I am adding in for the products are not showing anywhere. They do not show in the product description, or in the catalog or the cart. This is all set up and should work straight off with this theme so I am a bit confused as to why it isn’t. Its quite frustrating!

I have been looking on the internet and the problem appears like it may be something that a lot of people have and that many ppl can only get around it by having the site on a remote server (ie – on the actual internet) and not the local host (ie – on my computer at home) so I am going to upload, or at least I thought I would “just upload” but its proving to be more difficult than that…
—–

Thats me just back to add this note – all I needed to do was to ask the web hosting service for an upgrade to their premium service so I can get 100MB of disk space rather than just 10MB.

Ah so easy!!

Good Drupal Modules

OMG, I haven’t left the house in two days! I have got a lot done tho, it has been completely worth it.

I have got a site that seems to be doing what I want it to and I got it looking kinda sweet too! (By the way – I decided to use a more developed theme to help me get it to look good, I know that I wanted to do it on my own but it seemed so daft when there are such good themes out there!)

Here is a list of the modules that I have uploaded and why-

Actually before I do – just in case I didn’t explain properly before (and to help me understand it more) I better just explain what modules are. Basically the modules in drupal are the functions that it can perform, sort of. They are activated within the administration menu and then after that more menus will appear in the admin menu and the website will be able to do more stuff.

So for example one of the core modules that comes with drupal, is the ‘poll’ module which allows you to put a poll or question on the site and then people can vote. Also there is a module for user login and search. Like, all the things you want to have on the site will be a module. And a lot of these modules will be contributed modules which means that they are made by contributers, who then allow us all to use them. So they all fit with drupal but they have to be downloaded separately from the drupal.org site. The contributed ones can be really great and I think most people do use them.

I have downloaded the following so far –

Image – This is the first module I downloaded and I did this so that I can add images to my blog posts and pages in the site.  I have later downloaded another image module. (tho not sure if it was the right thing to do yet)

Image Cache – this is the other image module that I downloaded and I did this because on Learn by The Drop it was recommended and he did a video showing how to make an image gallery by using this module.  I have not managed to get this to work tho….  but thats another story.

Image Field and Image API are another two that I got to go with image cache. It seems to be quite normal for contributed modules to work together and so you have to download one or two at a time.

Mollom – this is a security module that will protect from spam.

Path Auto – I got this to help with naming the urls for the site so that they are nice names and not node/7 or whatever.

Wysiwig – This is a ‘what you see is what you get’ module that means that I can now write blog posts and make bold and italics and stuff without using code. Makes it easier I think.

IMCE – I am not really altogether certain about this one, I downloaded it while I was doing a video tutorial and I thought it had something to do with uploading photos within the wysiwig but I am not sure now as that part of it doesn’t seem to be working terrible well.

Google Analytics – I got this so that when the site is up and running I will be able to track it well and see how it is doing.

Views – This is the module that lets you make different views like galleries I think.

Token – To be honest I can’t remember why I got this one but I think it works with another one.

Skinr – I had to get this when I got my new theme.  More about that later

Lightbox2 – I think I got this for the Image cache module but as I said thats not working so good at the moment.

Filefield – I think this goes with Image Field.

Ubercart – wow this module is sooo amazing!!!  It is like a fully set up shop!  Everything is there all ready to be customised. There are catalogues for the products, product pages where all the info is filled in, upload images, delivery prices, checkout, different payment methods. And the whole thing has real good admin with it too for all the orders and the tracking and all that. Its going to be soooo awesome – My site already looks like a shop and I haven’t even really started yet!  I love this one so much!

So yeh – those are my modules and as you can see there are a few issues that I am having so I hope to have these ironed out over the next few days or weeks or whatever.

Feels good to have made some progress.

Reading About Drupal

Well Christmas is over now and its time to get back to the challenge!

Christmas day was good apart from the hayfever (New Zealand doesn’t get a white Christmas!)  We ate a lot and sat about so now I am feeling ready to hit it hard and get his website conquered!

It was quite good to have a break and then to look at it with fresh eyes and a new sense of vigour.

I couldn’t decide whether to try to get the theme to look how I want it to or to get the site to work how I want it to and then to worry about how it looks later. I am still not really sure but I have decide to get the content and the functionality all sorted out first because I am not really 10% sure how it should look.

Also as I am creating a website for my boyfriend as this test site, then I fugure that he may have some ideas of how he would like it to look and I will not be able to deal with those comments until I have the site in better working order.

So I am working through the tutorials at Learn By The Drop, which have really helped me and also made me feel like I am still relaxing a bit coz its kinda like watching tv.

I think what I have to figure out is what I would like on the front page and then decide whether we would like to try selling from the site as that will add in another whole load of things I need to think about and I would rather do it now than do it later when the site looks great and it would be a hassle to add anything.

So I am looking through Google to see how others have created e-commerce sites with Drupal and also I have been looking out photos and content for the site coz it won’t be much of a site if there isn’t anything on it!

Feeling quite relaxed as I am not really doing anything difficult right now. I know it will get bad again tho as soon as I start to actually DO SOMETHING and stop reading… 😀 he he

First Bad Day

So I have just had the first sh*t day.  I feel really annoyed!

Basically I was feeling quite good about it all after creating the layout and I added firebug to my firefox and decided that I would set about adding a banner to the top of the page and changing the colour of the background. But it wasn’t that easy!

I got myself a bit confused. I actually got really really stressed out coz I couldn’t find where the html file was! I know – it seems so stupid now but I was going through all the folders for ages looking for this file ending .html or .htm. But of course there isn’t one! I feel so dum and frustrated about how much I don’t know and also a bit annoyed that I had to Skype my brother to ask him about it >-(

It was ok tho – he was real nice about it and explained a few things to me that I didn’t really know before so I guess I benefited from swallowing my pride and asking him and I guess I will have to do it again about a million times because I’ve set myself such a mammoth task!!

What he explained to me in simple terms, was that php is just a scripting language and that erm… it sorta has rules in it like “if this happens, then this happens” I think. And so there is no physical html file, there are just these php files that tell it what to do and also there are the css files. So he then explained that if I was to make changes to the site I will have to make changes to the .css files and that these are in a sort of heirarchy with certain files over-riding others so its important to be careful about where the changes are made. So for example I should not be making changes to the base.css file as it is (as the name says) the base. There are other files such as the style.css file that I should be looking at to make my changes. It does of course say this in the READ ME file within the themes folder but I didn’t think to read that!

So that might be a bit of a problem as I jumped in there as soon as I had firebug installed and I played about with a whole load of things in the base.css file.  Ooops

I have to tell you tho that the first thing I did was to make the changes in firebug and believe that I had changed the website, that was until I watched this video tutorial on it and realised that it only shows you what the changes would look like and I have to go manually into the file to actually implement them. I liked that video actually, it was real easy to understand. Its great that there are so many resources out there for people like me who need to learn a lot!

I realised yesterday that I am so excited to have the internet in my home and to have the time and energy to try to do something really difficult because it is giving me so much opportunity to learn and opening my eyes to what is out there! Its just amazing really. An the best thing is that even if it doesn’t work out I will still know more at the end that I do now. I kinda wish I started to get interested sooner but then I would have missed out on many hours of tv and partying 😀   There is a time and a place for everything and I think now might just be my computer time…

For a moment there I forgot how mad and frustrated I am!

I am tearing my hair out!!

Coz after all that and realising that I had been changin the wrong file, I also realised that my subtheme folder that I made seems to be in the wrong place. It is inside the themes folder but not inside the genesis theme folder. But the other sub-themes are inside the genesis folder. So I think mine is wrong.

So I just dragged it into the genesis theme folder and now its lost everything and the website is completely blank. Just a white page.  Hmmmmm

Time for that backup already?….