search

Ecotrust / ocs-wp

Worpress Implementation of ODFW's Oregon Conservation Strategy
Other
1 stars 0 forks source link

Add Homepage Rotator #9

Closed willthemoor closed 8 years ago

willthemoor commented 9 years ago
screen shot 2015-09-06 at 6 05 44 pm
willthemoor commented 9 years ago

When outputting success stories in any template it needs to have a #success-story hash around the container.

ADD: In the admin UI for this homepage rotator, the user will select which OCS page it will link to (presumably the page with this success story). We'll append #success-story to the url via code.

dnseminara commented 8 years ago

setup for mask and carousel is mostly implemented locally

once #35 is complete, I can setup the logic to loop through images and their attribution/name/caption fields

screen shot 2015-12-02 at 1 57 34 pm

screen shot 2015-12-02 at 1 54 33 pm

@ldford - let me know if you have any further styling suggestions - left and right arrows only appear on image carousel hover

dnseminara commented 8 years ago

live dev site shows no styling - probably just needs a friendly gulp clean and a gulp build to load styling and jquery

willthemoor commented 8 years ago

Admin fields for the homepage are added. Also added the PHP code to the homepage template to loop through them.

Couple of issues:

  1. In Firefox (mac, latest) it only masks on the first slide. It briefly shows the mask when switching slides.
  2. In all browsers I tried this in, the mask isn't full (the outer edges are cropped). I see it working in the screenshots above though! I'm not sure what's different. I tried reducing the window size to make sure it wasn't related to the size of the original image (would should probably be accounted for in code anyway) but that didn't work either. Did I mess up the code?
  3. This isn't so much of an issue but we told the client that the images would rotate while the Oregon outline remained fixed. Apologies for not mentioning this in the original ticket. Think they'd be fine with this but I actually think a cross-fade would like best. @ldford?
screen shot 2015-12-05 at 11 12 54 pm
dnseminara commented 8 years ago

Got it! Revamped the structure so the images slide into the mask (which stays fixed), rather than having the image already masked on window entrance.

tested in Moz, Chrome and IE 11.

ldford commented 8 years ago

@dnseminara Looks great. Could you please let me know what the minimum image size requirements are for this? Realize that ODFW will likely need to upload in admin: link + caption + image since the image on the page they are linking to will likely not be big enough to display nicely on homepage.

willthemoor commented 8 years ago

Nice word Mr. Drew. I've updated dev with the latest.

willthemoor commented 8 years ago

Ack, sorry. One more: there is what appears to be some horizontal noise on the bottom of the png. There showing is ~1px white lines around the bottom.

screen shot 2015-12-09 at 11 27 17 am

Made the background red to pop it out a bit more:

screen shot 2015-12-09 at 11 27 55 am

Think it would also be good if the whole thing was vertically centered but that's minor.

dnseminara commented 8 years ago

Aha! Nice catch, for some reason that was actually the bottom boundary Oregon had when I created the png - weird. Modifying that now.

@ldford - the images should ideally be wider than they are tall, but I've implemented it so that most images will work. The mask is roughly 740px by 350px and I think something similar in ratio should be followed to get the best view within the mask.

ldford commented 8 years ago

@dnseminara Hate reopening closed issues, but realized I forgot about the vision for the homepage - prior to the rotator actually kicking in. Page 1 of these comps is the official "homepage" that people will land on every time they go to the URL or click on "Conserve" - it's the cover of the 2006 OCS. Then the rotator begins (page 2). There is no copy associated with it and no link. I tried to upload a jpeg of the cover to try it out within the admin you built, but I'm getting an error from the media library. And it looks as though links are required with each image. I don't think it would be a big deal for the ODFW team for the OCS cover to be number 1 in the rotator - as long as it's always the first one people land on and if there is no associated text or link, it still looks good. Thoughts? OCS homepage.pdf

willthemoor commented 8 years ago

FWIW, I think it should just go in as an image (presuming that's working again) and it can link to the introduction. That way they can swap it out later if they want to (vs us hardcoding it in as a "pre-rotator" image).

@dnseminara I don't think I built the loop very defensively; you'll want to add something to not out put the heading/caption (and not error) if they're blank.

ldford commented 8 years ago

Yes - just connected with Drew about this. All good. Keeping ticket open because links not linking.