Drupal 7: Related Content Views

Specific settings and styles for Views to display related content with contextual filters based on multiple taxonomy term names' relationships to a current node or other filter in Drupal 7. Another post for my own reference, but others may benefit. And, yeah, still using D7 at work, so working with what I've got.
 

Requirements: Content Type displaying a Case Study of a particular installation environment and categorized by one or more Markets in which the environment exists. On each Case Study page, after the main content, a block displaying (up to) 3 related Case Studies with any Market category in common. Further, an index page of all Case Studies (from all Market categories) and individual index pages for each Market category.
 

Content Type fields
Application (Title field, Text) [Application meaning installation environment in which the technology is deployed.]
Customer (Text)
Market (Link with Title) [For individual node displays, this field - title and link - is used at the top of the page as a link to generalized Market-specific pages, but for Views, the title field is transformed to a link to each Market category index of case studies. I use this method because the default Term reference URLs and pages do not have sufficient options for layout.]
Markets (Term reference) [In Views, this field is used to filter which nodes to display based on a given context. The field itself is never displayed.]
Image
Body


Main index page
Format: Unformatted list
Fields included:

  • Title
  • Image
  • Market (as Market(s):) Label - yes (w/colon); Formatter - Title, as plain text; Multiple Field Settings - Display all values in same row, Separator - comma; Customize Field and Label HTML - SPAN; Rewrite the output of this field - [field_market_link-title]; Output this field as a link - Link path: /case-studies/[field_market_link-title]; Replace spaces with dashes - yes; Transform the case - lower case;

Filter criteria: Published - yes; Content Type = Case Study
Sort: Post date (desc)


More Case Studies block
Format: Unformatted list
Fields included:

  • Title
  • Image
  • Market: Label - yes (w/colon); Formatter - Title, as plain text; Multiple Field Settings - Display all values in same row, Separator - comma; Customize Field and Label HTML - SPAN; Rewrite the output of this field - [field_market_link-title]; Output this field as a link - Link path: /case-studies/[field_market_link-title]; Replace spaces with dashes - yes; Transform the case - lower case
    [This format takes the plain text Market title from the link field and displays it as the linked uppercase Category name, for each, but formats the link with the preface /case-studies/ followed by the name transformed to lower case and with dashes, if the term has more than one word.]

Filter criteria: Published - yes; Content Type = Case Study
Sort: Post date (desc)
Pager: Display a specified number of items | 3
Contextual Filters:

  • Content: NID [To not show the current node in this display]
    • Provide default value. Type: Content ID from URL
      Check - Exclude
  • (market_terms) Taxonomy Term: Term ID [Despite the wording in the configuration that follows, this loads the taxonomy term IDs from the current node (not specifically from the URL) then filters the display to include ANY nodes with shared terms.]
    • Provide default value:
      Type - Taxonomy term ID from URL
      Check - Load default filter from node page, that's good for related taxonomy blocks
      Check - Limit terms by vocabulary
      Vocabularies: Markets
      Multiple-value handling: Filter to items that share any term
      Under MORE: Check - Allow multiple values

Relationships:

  • Content: Taxonomy terms on node [This relationship allows the Term names in the current node to be available to this view for Contextual Filters.]
    • Vocabularies: Check - Markets
      Identifier - market_terms

No Results Behavior:

  • Global: Text area (No related case studies.) [To confirm block in placement, as the view in query mode won't display anything since there is no node for context.]


Individual Market index page
Format: Unformatted list
Fields included:

  • Title
  • Image
  • Market(s): Label - yes (w/colon); Formatter - Title, as plain text; Multiple Field Settings - Display all values in same row, Separator - comma; Customize Field and Label HTML - SPAN; Rewrite the output of this field - [field_market_link-title]; Output this field as a link - Link path: /case-studies/[field_market_link-title]; Replace spaces with dashes - yes; Transform the case - lower case;

Filter criteria: Published - yes; Content Type = Case Study; Content: Has taxonomy term(=IndividualMarketTerm)
Sort: Post date (desc)
Path: /case-studies/IndividualMarketTerm


CSS
All Views are given the CSS class of case-studies. 

.node-case-study {
    padding: 20px 0;
}
.node-case-study .group-app-heads {
    margin: 0 0px 25px 0;
}
.node-case-study .field-name-title-field,
.node-case-study .field-name-field-customer-name,
.node-case-study .field-name-field-market-link {
    font-size: 24px;
    font-weight: 100;
    line-height: normal;
    margin: 0 0 1px 0;
    text-align: left;
}
.node-case-study .field-name-field-image-case-study {
    display: inline-block;
    margin: 5px 40px 0 0;
    width: 52%;
}
.node-case-study .field-name-body {
    display: inline-block;
    margin: 0 0 0;
    vertical-align: top;
    width: 43%;
}
@media (max-width: 979px) {
    .node-case-study .field-name-field-image-case-study,
    .node-case-study .field-name-body {
        float: none;
        margin: 0 0 30px 0;
        width: 100%;
    }
}
.node-case-study h3.app-body {
    margin: 20px 0 1px;
}
.node-case-study h3.app-body.first {
    margin: 0 0 1px 0;
}
.node-case-study .app-story {
    max-width: 550px;
}
.field-name-field-market-link .field-item {
    display: inline-block;
}
.field-name-field-market-link .field-item:before {
    content: ", ";
}
.field-name-field-market-link .field-item:first-child:before {
    content: none;
}
#block-views-case-studies-block,
.page-case-studies #block-system-main {
    padding-top: 20px;
}
#main #block-views-case-studies-more-case-studies .heading h2 {
    border-bottom: 1px solid #333;
    color: #333;
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-transform: uppercase;
}
.case-studies h2.cs-header {
    font-weight: 100;
    line-height: normal;
    margin: 0 0 30px 0;
    width: 75%;
}
.case-studies .views-row {
    border: 1px solid #eee;
    border-radius: 3px;
    box-sizing: border-box;
    display: inline-block;
    padding: 15px;
    margin: 0 15px 30px 0;
    vertical-align: top;
    min-height: 255px;
    width: 32%;
}
.case-studies .views-row.views-row-3,
.case-studies .views-row:nth-of-type(3n+3) {
    margin-right: 0;
}
.case-studies .views-field-title a {
    color: #333;
    display: block;
    font-size: 16px;
    margin: 0 0 8px 0;
}
.case-studies .views-field-field-market-link {
    margin-top: 5px;
}
@media (max-width: 784px) {
    .case-studies .views-row,
    .case-studies .views-row.views-row-3,
    .case-studies .views-row:nth-of-type(3n+3) {
        display: block;
        height: auto;
        margin: 30px auto 10px auto;
        width: 100%;
    }
}


Helpers
https://drupal.stackexchange.com/questions/174251/taxonomy-term-name-as-contextual-filter-for-view
https://www.drupal.org/node/345571#comment-1188223
https://www.drupal.org/node/1444522
https://drupal.stackexchange.com/questions/9332/views-contextual-filters-taxonomy-name
https://buildamodule.com/forum/post/how-to-pass-taxonomy-terms-from-node-into-views-filter
https://drupal.gatech.edu/handbook/contextual-filters-views
https://www.dannyenglander.com/blog/using-views-contextual-filters-create-related-content-block-drupal-7
https://www.drupal.org/node/1517896
https://www.drupal.org/node/2645442
https://www.drupal.org/node/1239278#comment-4858846