thewpcrowd / the-wp-crowd-theme Goto Github PK

We need the Join the Crowd page to do a few things

1. Allow new contributors signed up - include Location, Twitter, & Bio
2. Create a "People" Term under podcast and assign associated user to that user
3. Assign Term to user - person association

Blog Archive page (for archive, taxonomy, etc.) - any blog listing
Blog Single - detail page.

the contributor names are currently resulting in one, or two lines depending on the length. Could we consider automatically breaking it into two lines to ensure consistency?

• Can we add a mouse over title and link (to the author page) on the markers

fixed heights are messing with multi line titles

My vision for this is to have a CPT where we can share our "recommended" affiliate linked things. Write a blurb, categorize and display on 1 page categorized by type.

Ideally if we have duplicates (multiple hosts) we will find a good way to display them, OR choose 1 at a time to be the "featured"

Both the Avatar and the Author Name should link to the Author profile page:

mock in /mocks
GENERAL

• If there’s a video, the triangle/circle play watermark appears on the image
• If there’s a video, the section “In this video” appears- My idea for “Full list of podcasts” is that when you click on it, you go to a page that lists all podcasts with the option to download from iTunes or Google Play (and eventually others).
• Download the plugin to make it easy to tweet articles
• Ordered lists and unordered lists: Please indent a but. Also, note the spacing above and below the bullets. Please use that amount. Too many sites are using a ton of space and it’s just too much (e.g. ugly).
• I left out the contributor’s location. Not as relevant here.

COLOURS

• H1 242424 (Mock up is Arial Bold)
• H2 949393
• H3 949393
• H4 949393 (not pictured)
  I suggest not using anything below H4.
• Standard paragraph colour: 797776
• The section below the main image (with the avatar, contributor’s name, etc): fcfafa which is the same colour as below the “thumbnail boxes” on the homepage, in the “people also liked” section, etc)

IN THIS VIDEO

• All thumbnails and names are links to the profile page
• Anyone who is a guest but does not have a profile (yet) can be like John Smith in the design (avatar and faded name because you cannot click on it)
• Anyone who is in a video is automatically a contributor. They don’t have to be an “author” to be a contributor. Just participating makes you one.

TOPICS

• Please make it the smaller font size and lighter font colour as indicated in the sample design.
• Note that the horizontal rule above and below the Topics section is 2 pixels tall, not one. When there is no “in the video section” it should remain 2 pixels above (not 3 or 1).

IMAGES

• I strongly suggest that the images be consistent from post to post. That means having a fixed width. I suggest 600 pixels wide.
• Each image should have a sentence under it, describing the image. That is good for SEO, is great for user experience (skimmers), and makes us look that much more professional.
• If there is a giant image (let’s say an infographic for example), just put a smaller version to the right of the text and have it pop-up into a larger one. A sentence under that smaller version is warranted as well.

PHOTO GALLERY

• I also put in a sample photo gallery. We could have up to say 20 photos from a given WordCamp or event uploaded with a paragraph above it. That could be an “easy” article.
• For the gallery, I suggest rectangular thumbnails. They look better than squares.

looking at Andrew's location name, the text wraps outside the pin. can we make the text smaller, or ensure the text is aligned properly

general page.php

Blog posts generate a lot more traffic, visitors, and interaction (comments, shares, etc.) I think we should put the focus on the blog posts on the home page.

Contributor page notes:

• Make it mandatory for everyone to write at least 75 words for their bio. If you cannot write 75 words, you don’t deserve to be a contributor.
• Photo, name, and position (e.g., “senior editor”) should be larger than the main contributors page. I suggest sizes for all three to be similar to what I put in the sample (for the desktop version, obvi!).

RIGHT SIDEBAR NOTES

• On the main contributor page, a contributor’s location is only indicated by the city. But, for the profile page, it is city, state, country. I don’t think it’s necessary to link it (to a map) on this page. Just text will do. That is good for SEO as well.
• For a better user experience and in order for everyone to get an SEO boost, on the profile page you are allowed to put descriptive words / keywords next to the icons.

Here is the order (for programming purposes):

• If nothing is filled in, no icon appears.
• If a URL is filled in the form field for a social media platform, the name of the social media platform appears next to the icon (e.g. “Facebook”).
• If a URL is filled in the form field for a social media platform AND there is username associated with it, the username appears (e.g. @brianrotsztein will appear instead of “Twitter”). Note that many platforms will not have a username (e.g., LinkedIn).
• If a URL is filled in the form field for a website, the URL appears (e.g., “www.rotsztein.com”).
• If a URL is filled in the form field for a website AND a description is added to the form field, the description appears (e.g., “Brian’s Hub” instead of “www.rotsztein.com”).
• Please indicate in the back end whether you need “http” or not when you fill in each form field

THUMBNAILS

• Each video/podcast/“blog post” is created in the fashion of an article. I’ll describe that more later. The point here is that since that is the case, you cannot divide “videos” and “blog posts” in an individual’s profile. They all go together. What I strongly suggest (see design) is to just have a button to filter articles from videos.
• I did not add this to the design but you can add a pipe to the right of “VIDEOS & ARTICLE | ARTICLES ONLY | VIDEOS ONLY” and then put a link to AUDIO ONLY which then calls a list of all the podcasts the contributor is in. I think the audio files should be the only type of file that is NOT presented like all the other ones (e.g., “thumbnail box”). I suggest that I create a “style” that looks something like how iTunes looks when you download podcasts. The familiarity is good for user experience. This will also make it clearly distinct. What I mean is that each video will be embedded into an article-style format. If there was no video, and instead we only had an audio file, the audio file would take center stage at the top of the article. Since we DO have video, the audio file should be more distinct. We can link the audio file under the video and above the text on an article page. But, to make it easy to download audio files, I can make a separate page (in the style of iTunes podcast downloads).
• All thumbnail images must be the exact same size
• The image for the thumbnail does not have to be a face (aka screenshot from the Google Hangouts session). Many should start being images (stock photos, etc) that are thematically related.

CONCEPTUAL IDEA

• Since each video/podcast/article is created in the fashion of an article, I suggest no longer using the term “blog” and to stop thinking of the site as a blog. It’s more of a magazine, a “daily,” and a newspaper in a sense. Saying “The WP Crowd” is a magazine makes more sense to me than to call it a “blog.”

This is from the Development category page.

featured images should be a consistent height, at the moment they're multiple heights based on the WP resize.

can we get the map to auto focus to include all the pirate points, or something less random?

also, the mockups called for it to be different style wise

the forced spacing for the index item height is causing the date to be irrelevant, we can pull it up and leave the white space under the list.

the current newsletter section needs some css love

So ya.. haven't really been doing much mobile / responsive checking. There are no mocks, so this is really just "make it look as best as you can"

Find fonts TypeKit.com
Let me know which font for what and I'll put it into the sass and get the JS file enqueue'd from TypeKit

mock in /mocks/wp_crowd_mock_contributor.jpg

Way too bold and not clean. This was affecting the Comment Form as well, but it looks like we went with Disqus now (which is not a good idea).

We're repeating this code block (and a few more around it) in multiple files, we should pull them into a common function

Currently the image alignment doesn't work correctly. See here:
https://www.thewpcrowd.com/wordpress/responsibly-loading-minified-scripts-wordpress-plugins-themes/

Properly support the following image classes:

• alignnone
  *aligncenter
  *alignleft
  *alignright

Also double-check that images are properly responsive when captions are added since the markup is different.

Check the sidebar -
https://www.thewpcrowd.com/
vs.
https://www.thewpcrowd.com/podcast/episode-035-level-up-php/

the video thumbnails all look the same, let's look at adding a custom image to the posts to make them look better

I think we can do MUCH better than this:
https://www.thewpcrowd.com/404

Suggest the following:

• Awesome rotating memes
• Searchbar
• Ditch the sidebar and go full-width
• Add Latest 3 Articles in a grid along the bottom below the search bar.

https://www.thewpcrowd.com/wordpress/responsibly-loading-minified-scripts-wordpress-plugins-themes/

Not sure to code or to plugin download this up. We want "hearts" to be total shares of a post / podcast.

We can use a post_meta counter as a last resort tied into (any) social share

if a post gets published without a feature image, the design gets thrown out of whack.