Easel: Image Display issues

The next hurdle was to display the images from our new “Uploads” directory. This can be a relatively simple matter of creating a glob and echoing out each file in that directory. That is the first option we used. Assuming the simplest answer was the best. Initially it was our idea to create a wall of images. However this proved to be more difficult than expected. To keep the proportions of the image we thought echoing each image out in the background of a square DIV would work fine. However the issue was we were using the $filename php attribute inlace of naming each image. What this did was on echo out the first image in the upload directory multiple times as a div background. After speaking to both Phil and Kyle there didn’t seem to be a way around it.

images echoed in sequence
images echoed in sequence

We then tried a more complicated route. Using the timthumb plugin we attempted to automatically create a thumbnail for each image and have it post to the web page. The problem this case however was that the thumbnails it created were too low resolution and too small to be front and centre on an art app. Therefore we decided to revert back to the old script. The only new addition we made to this old script was to now order the images by the date so the latest ones would appear at the top of the page.

imagedisplay.php with date ordering functionality.
imagedisplay.php with date ordering functionality.
Advertisements

Easel: Logo Design

As we had made some progress with the website itself we still did not have an identity or logo to work with. Abbie took to the iPad to begin sketching out a few Ideas. We had decided on the name Easel for our website because we found that it makes it extremely obvious what the purpose of the website is and its arty background.

Abbie’s sketches for the logo

We liked the incorporation on the easel itself into the logo that Abbie drew. So we decided to go with logo 2. I got to work on creating a vector rendition of this in Illustrator.

initial logo
initial logo

Here is the finished and initial logo created. It stays pretty true to the sketches Abbie created and we all like the look of it. However after using the logo in the navbar it made it quite unreadable because the A was much larger than the rest of the text. I redesigned the logo to have all the same size fonts, but had to sacrifice joining the easel with the text. This is not a big issue as it is much more readable now.

larger new logo in a triangle
larger new logo in a triangle

Connection the Database problems

When connecting to our Dakar databases we used local host passwords. But in our connect.php script we had trouble finding the correct combination in database passwords and hosts to allow us to submit information to our database table. As we weren’t hosting on Dakar it turned out that we had to connect to the 1 and 1 (my web host) external server  “*********.db.1and1.com” rather than use the localhost. This now worked and the connection to the database was now successful.

The database username and password table
The database username and password table

Changing our code to now accommodate this new table “Usersignup” and linking it to a register form made in HTML allowed us to now register new users. This has an added level of security with repeated passwords. If the passwords do not match the script will echo “Passwords do not match”.

Register.php Script
Register.php Script

Image Uploading

As an integral part of our website we needed to be able to login and upload an image to it. We found various resources online (e.g. Stack overflow ) where there were many explanations on how to go about this. We found that along with being able to simply upload an image, we also needed to make checks on the image to see if its was actually an image file, be able to limit the size of file and finally not allow duplicates in the target directory.

After working hard to get all of this working we ran into one major problem. There was a problem with our permissions. After going in and changing them to 776 (as many forums suggested) we still could not get the uploader to work.

It turns out that Dakar did not allow files to be written into directories. This is where we decided to make the switch to my own hosting. On my domain we could change the permissions to allow the upload to work.

We Built a simple upload form in HTML and linked it to our upload script and had it working fairly soon after on my hosting. The script now checks for Real image, duplicates, file size limit and only allow certain file formats before uploading.

It makes all of these checks and finally redirects back to the home page after uploading. Getting the redirect to work was difficult as it is a custom function we learned from Kyle in one of our PHP workshops. To make it work in the end we included the function in the header that is present on every page, therefore the function would work anywhere on the app.

Code for image upload script
Code for image upload script

Switching to Bootstrap

For our website we initially decided to go down that hard coding route for our CSS. Make our own classes and position them accordingly. However we decided to make the switch to bootstrap after realising we were making the work much harder for ourselves as we had such little time to do it. Learning bootstrap was relatively straight forward with Kyle covering it in a few workshops and through various tutorials on the web.

Making this switch now allows us to quickly create forms for our logins and registers, including buttons and navigation bars. Bootstrap also crates a column based layout, therefore positioning of elements on the page will be a lot simpler that the pure CSS route.

The bootstrap main webpage

Research and inspiration

We have now entered the stage of research for the application we want to build. One example that many of our peers suggested our idea was a sort of Instagram for artwork. We looked into what the web version of Instagram looked like and how it works.

Instagram Web App

Instagram Web App

The Instagram web app has a really simple and clean design that I quite like. something that could be incorporated into our app.

DeviantArt is another popular artwork sharing website. Although it has a lot of functionality I find it overly complicated in terms of navigation and just being cluttered. Our website should take the premise of DeviantArt and package it in something as simple as instagram.

DeviantArt Homepage
DeviantArt Homepage

Group Merge

After being quite unproductive as a group, I was merged with another group with Abbie, Arman and Richard. This led to some changes having to be made. We decided to use their idea that they had conceptualised; A web app that caters for artists, allowing them to post their work and view each others.

This change of group should allow us to become more productive as we now have a solid idea to work on and a larger group with a wider skill set.