Update example images on home page to be show case images in rotation

I will have the screenshots finished this afternoon and will start work on implementing the image fader. Yes, the jquery fade is smooth and I would recommend it as well. :-)
Chris

I am not sure I like to upgrade jQuery on d.o...

This needs to be well tested on scratch.

I actually wonder why we need to use JS. Can't we rotate the images per page view as we do for the adverts?

Can't we rotate the images per page view as we do for the adverts?

We cannot expect the evaluators of Drupal to reload the page, some might even visit drupal.org only once.
We have little time to convince them and show how diverse the uses of Drupal are. The jQuery image rotator catches the eye and fits perfectly for that purpose: it gives a quick overview in a matter of seconds!

I've roughed in a basic slideshow.

Features:

- Rotates div blocks, so we can include screenshots descriptions and links;
- Pause on hover: pause the slideshow 'on mouse over'.

TODO:

- Define screenshots dimensions and produce hi-quality screenshots with exact the same dimensions with their categories and site URLs.
- Define transition interval.
- Implement on scratch and test;

Questions:

- Should we add 'next' and 'back' buttons?
- Is there a person who will theme the slideshow?

Draft attached.

2 resized photos as requested by amazon

Screenshots should be of the same height. Otherwise the text bellow the screenshot will move according with its height. This can be fixed with css positioning, i.e. fixing the text to the bottom, but it would create a gap.

IMO fixed height screenshots looks better, as it will give the impression that only the image and the text is changing. Also it makes easy to add a eye candy shadow background, to give it a fine touch.

yek, looking at s.d.o, we need to give the screenshots all the same resolution. i like the idea and the implementation!

(without getting too twodotoooh, we also might want to have rounded edges for the screens, will fit better in the design of bb)

also the ugly image at the right side containg three static screenshots might be dopped, we gain more room and loose some uglyness.

As a side comment, I like what drupaldojo.com do with their header, something with buttons for the user to decide when to move to the next image.

The module they use is: http://drupal.org/project/jcarousel. But it needs jQuery.

The way it is done now is also very effective to the evaluator, and this is something d.o. need to do to make the first time visitor stay in more than a few minutes.

I think that'll be better as it will apparently use lower bandwidth.

Unless I resize, why are the site names one word per line? IE7
Example:
Yahoo
internal
design
pattern
library

This has the effect of breaking out of the Orange box.

I could help you to resize these images. where are they?

The association.civicrm_180x190.jpg looked pretty blank, and so I took a new one.

I took the 180x190 resizing literally, which squashed and distorted every photo to some extent.
But thought I would create & upload them to see how they look in the rotating context.

They look squashed as you said. Some screenshots need to redone to have the correct ratio. I'll take care of that today.

we don't need 'full' screen shots if the result is distorted. It would be better to have correctly proportioned images that are 'cut off'.

exactly, that's what I mean and am working on at the mo. the natural ratio should be kept.

There's an easy way to setup Firefox to precisely maintain this 180x190 ratio.
If you have the Firefox Web Development toolbar installed, then you can resize the browser to a specific size.

Enable the WebDev toolbar , then go to
Resize ->
Edit Resize Dimensions... ->
Add... ->
Name it "Screencapture -- 1095 x 1140" w/ a width of 1095 & height of 1140 & Check the "Resize the viewport" box

Click OK to save, and OK to exit.

Then go to Resize -> Choose "Screencapture -- 1095 x 1140"

Then it'll resize the browser viewport to this dimension, and you can take a screen capture of just the viewport minus the scrollbar, status bar and navigation, bookmark & web developer toolbars.

Note that it you think it'd be 1080x1140 for a proper 180x190 ratio, but the resizing does not take into account the vertical scrollbar and integrates these 15 pixels into the size if you have to vertically scroll. So I added 15 pixels to 1080 to compensate.

Also note that if you leave the "Resize the viewport" box unchecked, then the vertical height will include the navigation, bookmarks & Web Development toolbars at the top and the status bar at the bottom. Then in order to get the proper ratio, you'd have to disable to status bar and hide the toorbars by clicking the oval in the upper right side of Firefox.

Anyway, I had this typed up for someone else and thought it would help get the right ratios for these screencaps.

NOTE: If the 1095x1140 makes the text too small, then other ratios to try are:
* 555 x 570
* 735 x 760
* 915 x 950

I re-took some of the screenshots. Also added/resized the ibm_conference and yahoo_design_pattern shots.
In total: 20 screenshots all at the same size (180x190).

I added drop shadows so it looks closely to the static screenshots we currently have.

Screenshots should be less than 160px tall, so it gives space for the caption text and shadows.

Screenshot attached.

Let's define the image resolution before doing the hard work.

Comments?

We can use some css font style:

a) Change the font family to a narrow one and then increase the size:

#mission-showcase {
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 0.8em;
}

Trebuchet MS is not a standard font but is currently available to most computers pc and mac, linux computers will use Helvetica. Other possibilities are Arial Narrow, Gil Sans.

or b) Play with letter spacing to see how it looks:

#mission-showcase {
   font-size: 0.8em;
   letter-spacing: -1px;
}

http://drupal.org/files/issues/show_case_shadow_preview.png looks great, wow.

I use firefox and Gimp.
- change the window size of firefox to have it as narrow and tall as possible.
- take a screenshot. there are some extensions/plugins in firefox to only take the content of the window, but they usually don't include the flash elements so you have to do it manually. In gimp: file > acquire > grab > screen.
- in Gimp, crop the screenshot to include only the relevant content of the site (take off the side backgrounds, top ads etc..).
- image > scale image: try 180 as width (make sure you keep the ratio locked), press enter and see of the height is higher than 190 (if not go to next step). click ok and crop the image to remove the bottom so that the height is exactly 190px.
- if the height was less than 190, enter 190 as height and crop the image to remove the right part, so that its width is 180.

I've made some variations of the picture position and size.
The idea is to give them some visual impact.

Nice desings @theborg!

We are trying to keep it simple so we can keep the screenshots as they are and add some 'effects' using only css. AFAIK only the first desing you've attched (showcase_4.png) is doable with css and a bit of javascript to do the reflections, the others would require us to apply the effects one by one.

Tips for creating screenshots thumbnails

Necessary Tools

• Web Developer extension
• GraphicsEx extension
• ImageMagick command line

Steps

1. Install the above tools and restart Firefox.
2. Create a new dimension on webdeveloper toolbar (Web Developer -> Resize-> Edit resize dimensions...). I've created 1024x768.
3. Resize the image to the dimensions you just created (Web Developer -> Resize -> 1024x768).
4. Visit the site you want to take screenshots from.
5. Right click, choose 'Save page as image...' and save the file in a appropriate folder.
6. Repeat steps 4 and 5 for the other sites.
7. Open a console window and navigate to the folder you've saved the screenshots.
8. Run ImageMagick batch convert command (mogrify): mogrify -strip -quality 85 -resize 180 -crop 180x160+0+0 *.png

Notes

• Back up original screenshots files before running mogrify as the files will be replaced.
• I couldn't get GraphicsEx extension to work on Ubuntu Gusty amd64.

Thanks recidive!

I'd suggest not to apply too much effects or the page is going to be slow. If you want to use any of this designs with css you may do "position: relative" to the container box and then "position: absolute" to the images but still, the shadow and rest of effects shoud come with the image itself to get the page faster.

d.o. fluid layout is perfect to the node contents but is not easy to design a header/mission that resizes well.

If you know anything about Gimp and scripting, you can use the following script (with some modifications) to turn process all of the images and turn them into perspective views.

Script-Fu for perspective images.

You can also use cron + sh + gimp command line to automate this process should the need arise.

This it has no relation to show case rotation but I thought it would be fun to give our lovely druplicon some primary role on the d.o. redesign and its fun!

Winter over drupal world
bertboerland proposed the idea of the ice reflection.

heres the front page images of the two showcase sites featured on http://groups.drupal.org/node/7727

this was from a GHOP project about showcase Africa sites. issue link: http://code.google.com/p/google-highly-open-participation-drupal/issues/...

-yoniwiz

Queue Cleanup

It seems that since this post was started the Front Page took a different direction.

Does any of this apply to the upcoming redesign? Or should it be Fixed/Wont Fix?

Wont Fix-ing this - I have a feeling that the redesign makes this moot.