Moving this task out of #1504526: Design & implement styling on the new /case-studies page.

We need to implement slideshow on the case-studies page (mockup).

Slideshow should show 4 most recent Featured case studies.
It should be shown only on /case-studies page.
It should be a view and custom CSS&JS or jcarousel.

We will also need to hide 4 top case studies in a view for not to duplicate the slideshow.

bmaheshs is working on this.

CommentFileSizeAuthor
#4 screen-slideshow.png16.75 KBtvn

Comments

bmaheshs’s picture

bmaheshs commented

We have put in the slideshow and need to resolve one issue - Adjusting the height/width of the case study screenshot in case of a very small size image (as seen on Symantec Connect Case study).

http://cases-drupal.redesign.devdrupal.org/case-studies

We should be completing it by tomorrow.

In case of any other feedback, please let me know

tvn’s picture

tvn commented

bmaheshs, thanks for your work on this! Quick feedback on image sizes - I created new imagecache preset - named "case588x306", let's use it for the slideshow images, so they all were the same size.
As for adjusting size for very small images - you don't need to worry about that, Featured case studies will go through moderation and we will make sure that they all have images of proper size. On the dev site I promoted random case studies to featured without checking their images.

I will take deeper look into slideshow tomorrow and probably provide more feedback.

(bmaheshs, little off topic note - one of your case studies on drupal.org has a problem, I left a comment there, take a look: http://drupal.org/node/1568896)

kapil.juneja’s picture

kapil.juneja commented
Status: Needs work » Fixed

Moving this task out as this is for node http://drupal.org/node/1568896 Thanks tvn.

tvn’s picture

tvn commented
Status: Active » Needs work
StatusFileSize
new screen-slideshow.png16.75 KB

Let's mark this fixed when slideshow will be deployed on drupal.org.
To make the review and deployment easier please post patches to any files that you changed on the dev site and clear deployment instructions.

I've added filter on Status field to the slideshow view to make sure we show only Featured case studies. And promoted some case studies with normal images to Featured.

We also need to hide top 4 case studies on http://cases-drupal.redesign.devdrupal.org/case-studies because they are in the slideshow. If we just set Offset: 4 on case studies view - we also hide top 4 case studies on http://cases-drupal.redesign.devdrupal.org/case-studies/community and that should not happen. So this must be done differently.

Padding needs to be added at the bottom of the slideshow, same as the one at the top. Also slide numbers moved up for some reason and images overlap them now (see attached screenshot).

kapil.juneja’s picture

kapil.juneja commented
Status: Fixed » Needs work

We have done the changes as required. Please check and in case of any other feedback, please let me know

tvn’s picture

tvn commented

Looks great. Kapil, please post deployment instructions - list of steps we need to do to deploy this slideshow on live site e.g. which modules to enable, which files to update etc. You can see example at the issue summary at http://drupal.org/node/1504526

drumm’s picture

drumm
he/him
Location NY, US
commented
  • Instead of a separate view, this should be another display in the case studies view.
  • The CSS should be added to the main styles.css, not a new stylesheet.
  • TVN mentioned we might not want the same case studies showing up in both the slideshow and grid.
tvn’s picture

tvn commented

I moved all separate views as displays into drupalorg_casestudies view:

"Case studies landing page" display - for /case-studies page only, with offset 4 on view
"Inner pages" display - for all inner pages /case-studies/featured|community|possibly later classic, with offset 0 on view
"Featured slideshow" - self-explanatory

Switched block on /case-studies page to new "drupalorg_casestudies: Featured slideshow".

drumm, I did not touch css, since you were going to clean it up anyway.

To-do: - update css to affect new view for slideshow
- there is an imagecache preset for slideshow - case588x306, should probably be added to the feature

kapil.juneja’s picture

kapil.juneja commented

Thanks drumm and tvn, i will add the casroul css in style.css

kapil.juneja’s picture

kapil.juneja commented

Tvn - One quick question about carousel title.
what will happen to navigation numbers like 1,2,3 if the carousel title comes in 2 or more lines?
and
i Put all carousel.css in styles.css

tvn’s picture

tvn commented

I think we'll have to make sure during moderation process that title is short enough, don't really like how it looks when title takes 2 or more rows.

Also let's add a bit of space between title and main image, title is not on the same line as navigation numbers right now.

kapil.juneja’s picture

kapil.juneja commented

Done Spacing issue, please check
and during moderation we have to sub string the title so that it's look good.

drumm’s picture

drumm
he/him
Location NY, US
commented

I updated BZR on the dev site so bzr diff and status will provide a clean view of the changes to be deployed.

tvn: How is the spacing looking now? I'm going to see if things can align to the horizontal grid and 9px vertical rhythm.

silde-nav.png is misspelled. It could be omitted since border-radius is well-supported, http://caniuse.com/#search=border-radius.

I had a thought - we could use CSS3 animation to implement the carousel. This might not work, I don't think that would allow clicking numbers to go to a slide. Stopping animation on hover is nice to do, I'm not sure if that is possible. If CSS3 did work, it would be nice to keep our pages loading quickly and be more fun to develop with new technologies.

kapil.juneja’s picture

kapil.juneja commented

@ drumm, I will check the possiblity of implementing the carousel using CSS3 animation and let you know.

tvn’s picture

tvn commented

I've updated the css a bit, spacing looks ok now. Regarding CSS3 animation - I am concerned that it is not yet supported enough (though I agree on fun part).

drumm’s picture

drumm
he/him
Location NY, US
commented

For CSS3, we can get away with more since our audience is web developers, and tend to have more modern browsers. Looks like only IE isn't well supported, and I think it could degrade to only changing on click, with no animation. However, jCarousel is well supported and small enough, so we can go with it.

drumm’s picture

drumm
he/him
Location NY, US
commented
Status: Needs work » Fixed

Deployed.

tvn’s picture

tvn commented

drumm, are you sure you did not change the view during deployment? It should have offset 4 only on "Case studies landing page" display, all other displays, including "Defaults" should have offset 0. Right now it seems all displays have offset 4:
- pages like http://drupal.org/case-studies/community/24660 are empty when they should show 2 case studies
- there is no sidebar nav on http://drupal.org/case-studies
Also http://drupal.org/case-studies/featured is empty
Maybe this is caching issue?

kapil.juneja’s picture

kapil.juneja commented

Yes - Drum, CSS3 animation is not supported by IE and jCarousel is supported by all browser. So we will go with it.

drumm’s picture

drumm
he/him
Location NY, US
commented

Yeah, I noticed some things seemed a little weird. I had to manually add $handler->override_option('offset', 0); to a couple displays singe they seemed to want to have an offset of 4. It seemed like it might be a bug in Views UI, but I didn't investigate enough to be sure. I'm replacing the cases dev site with a fresh one to try fixing it up.

drumm’s picture

drumm
he/him
Location NY, US
commented

(Less than 10% of our visits are with IE, so we can be a bit more agressive about using features they don't support yet.)

drumm’s picture

drumm
he/him
Location NY, US
commented

We are probably running into #660606: Offset is not exported to code correctly, overrides default value. I fixed up the view on dev, re-exported, and reverted to that, and the offset got off again.

drumm’s picture

drumm
he/him
Location NY, US
commented

Deployed some revisions. For future work here, be sure to export the feature, put it in the filesystem and revert to it to see what you get.

Automatically closed -- issue fixed for 2 weeks with no activity.

  • Commit 33893d2 on 6.x-3.x, 7.x-3.x, 7.x-3.x-dev by drumm: 
    [#1600692] case studies slide show was inheriting offset 4
  • Commit 3e42a95 on 6.x-3.x, 7.x-3.x, 7.x-3.x-dev by drumm:
    [#1600692] & [#1612426] case studies revisions and carousel
  • Commit 931b09f on 6.x-3.x, 7.x-3.x, 7.x-3.x-dev by drumm:
    [#1600692] case studies slide show was inheriting offset 4
  • Commit a664c15 on 6.x-3.x, 7.x-3.x, 7.x-3.x-dev by drumm:
    [#1600692] case studies cleanup