Front page carousel

[richard-jones]

Query for the latest X adverts (by last_updated or created_date) which have an image and without any flags for abuse.

Integrate a carousel into the front page for the non-logged in users. Recommend to use Slick jQuery plugin: http://kenwheeler.github.io/slick/

Each panel should link to the login page, and if the user does log in (not register) they should then be taken directly to the advert they clicked from the carousel.

The login page should also include a direct link to the register page.

[mjb295]

Looks ok.

[mjb295]

Small bit of blurb for front page:

"Sell Your Old Uni Stuff and Find The Stuff You Need

Have heaps of old textbooks piling up? Likewise did you fall off your chair when you saw textbook prices on Amazon? Or are you looking to get a bike to make traveling to campus that little bit easier?

Whatever the situation, UniBoard allows you to sell your old, now unused stuff, and find a great deal on items yourself."

[Nimphal]

The carousel is up and the updates to the front page and login page have been implemented. Will close issue after meeting.

[richard-jones]

Make a place-holder carousel image if there are no items with images (just for UI consistency in early stages and in other unusual circumstances)

[Nimphal]

Placeholder is now up. Closing this issue and #28

[richard-jones]

On my screen there are a number of oddities in the carousel:

• It overflows the page area (the arrows for scrolling sideways are outside of the main window)
• The images are distorted (I guess because they are being squashed to be square?)
• When the carousel moves, the rest of the page "blinks" (everything except the carousel disappears for a fraction of a second).

Can we also make the following tweaks to it

• slow down the rate at which it scrolls - it feels a bit aggressive at the moment
• make each panel a mini-representation of the advert - so, include the title of the item underneath, for example
• make each panel a bit more styled - perhaps a border would be sufficient

I'd also suggest making the carousel 3 images wide and centring it on the page. At the moment it appears to be left aligned. Screenshot attached to give a bit of context for all of this

[Nimphal]

I love the screenshot ;)

The images are squashed to be square, I had to give them some dimensions so that they were all the same size otherwise all the CSS in the world wouldn't have made the carousel not wonky. I could try resizing them form the backend (before they are fed to the template) in stead of through CSS, so that the carousel gets already resized images, but I don't know how that would affect speed of loading. The title and border suggestions should be easier to implement.

2014-08-18 23:52 GMT+01:00 Richard Jones notifications@github.com:

On my screen there are a number of oddities in the carousel:

• It overflows the page area (the arrows for scrolling sideways are outside of the main window)
• The images are distorted (I guess because they are being squashed to be square?)
• When the carousel moves, the rest of the page "blinks" (everything except the carousel disappears for a fraction of a second).

Can we also make the following tweaks to it

• slow down the rate at which it scrolls - it feels a bit aggressive at the moment
• make each panel a mini-representation of the advert - so, include the title of the item underneath, for example
• make each panel a bit more styled - perhaps a border would be sufficient

I'd also suggest making the carousel 3 images wide and centring it on the page. At the moment it appears to be left aligned. Screenshot attached to give a bit of context for all of this

[image: screenshot from 2014-08-18 23 50 55] https://cloud.githubusercontent.com/assets/856138/3959287/406fa816-272a-11e4-86a0-a49089bb8f81.png

— Reply to this email directly or view it on GitHub https://github.com/CottageLabs/uniboard/issues/67#issuecomment-52566675.

[Nimphal]

I have updated the look of the front page and of the carousel following the suggestions in this issue. I have not changed the size of the images, however, still looking at various options.

2014-08-19 14:11 GMT+01:00 Nevelina Aleksandrova nevelina@cottagelabs.com:

I love the screenshot ;)

The images are squashed to be square, I had to give them some dimensions so that they were all the same size otherwise all the CSS in the world wouldn't have made the carousel not wonky. I could try resizing them form the backend (before they are fed to the template) in stead of through CSS, so that the carousel gets already resized images, but I don't know how that would affect speed of loading. The title and border suggestions should be easier to implement.

2014-08-18 23:52 GMT+01:00 Richard Jones notifications@github.com:

On my screen there are a number of oddities in the carousel:

• It overflows the page area (the arrows for scrolling sideways are outside of the main window)
• The images are distorted (I guess because they are being squashed to be square?)
• When the carousel moves, the rest of the page "blinks" (everything except the carousel disappears for a fraction of a second).

Can we also make the following tweaks to it

• slow down the rate at which it scrolls - it feels a bit aggressive at the moment
• make each panel a mini-representation of the advert - so, include the title of the item underneath, for example
• make each panel a bit more styled - perhaps a border would be sufficient

I'd also suggest making the carousel 3 images wide and centring it on the page. At the moment it appears to be left aligned. Screenshot attached to give a bit of context for all of this

[image: screenshot from 2014-08-18 23 50 55] https://cloud.githubusercontent.com/assets/856138/3959287/406fa816-272a-11e4-86a0-a49089bb8f81.png

— Reply to this email directly or view it on GitHub https://github.com/CottageLabs/uniboard/issues/67#issuecomment-52566675 .

[michaelwebbjisc]

Here's an example of a slider that can cope with different image sizes:

http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php

[richard-jones]

@michaelwebbjisc and I had a bit of a chat about this today, and I think probably the best solution is:

• keep all of the images fixed in width, and have them scale vertically to remain in perspective (bootstrap's span classes can probably be used to do this)
• have a vertical limit on the div which contains the image, with an overflow rule which will hide any bits of the image which fall outside the limit. We should ensure that the vertical limit is enough to hold a normal portrait style image.
• Put the title of the book underneath (as it is at the moment), but left aligned
• Add the price of the item underneath that

Can you have a go at that?

[Nimphal]

I have made the suggested changes. Is this the sort of thing you had in mind?

2014-08-20 22:01 GMT+01:00 Richard Jones notifications@github.com:

@michaelwebbjisc https://github.com/michaelwebbjisc and I had a bit of a chat about this today, and I think probably the best solution is:

• keep all of the images fixed in width, and have them scale vertically to remain in perspective (bootstrap's span classes can probably be used to do this)
• have a vertical limit on the div which contains the image, with an overflow rule which will hide any bits of the image which fall outside the limit. We should ensure that the vertical limit is enough to hold a normal portrait style image.
• Put the title of the book underneath (as it is at the moment), but left aligned
• Add the price of the item underneath that

Can you have a go at that?

— Reply to this email directly or view it on GitHub https://github.com/CottageLabs/uniboard/issues/67#issuecomment-52843425.

[richard-jones]

Getting close. This seems to be working for landscape pictures, but not for portrait ones.

I think it would be good to define a viewable area, say span2 x 200px (but will need tweaking), and scale the images horizontally so they fit into the span2. Then any image which is longer than 200px can just be cropped by the div it sits inside (there's a css rule for what to do about overflow which might work here). Then we can have the title and the price underneath that, with the bonus that even for images less than 200px tall, the titles and prices will be vertically aligned on the page.

[Nimphal]

Okay, I pushed some changes. Portrait now scales better, but due to overflow, there is no bottom border. Max-width works for scaling horizontally and max-height on a wrapping div works for cutting off portrait images. I think this is as good as I can get it.

2014-08-21 11:28 GMT+01:00 Richard Jones notifications@github.com:

Getting close. This seems to be working for landscape pictures, but not for portrait ones.

I think it would be good to define a viewable area, say span2 x 200px (but will need tweaking), and scale the images horizontally so they fit into the span2. Then any image which is longer than 200px can just be cropped by the div it sits inside (there's a css rule for what to do about overflow which might work here). Then we can have the title and the price underneath that, with the bonus that even for images less than 200px tall, the titles and prices will be vertically aligned on the page.

— Reply to this email directly or view it on GitHub https://github.com/CottageLabs/uniboard/issues/67#issuecomment-52903031.

[richard-jones]

Ok, looking good - I have a few ideas to push it on just a little further. Will implement and share

[richard-jones]

Modified the carousel to support 4:3 aspect ratio portrait pictures, and to be more horizontally aligned.