-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontrolling-markup-display-suite-semantic-views-custom-theme-templates-and-media.html
166 lines (120 loc) · 17.4 KB
/
controlling-markup-display-suite-semantic-views-custom-theme-templates-and-media.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<!--[if IEMobile 7]><html class="iem7" lang="en" dir="ltr"><![endif]-->
<!--[if lte IE 6]><html class="lt-ie9 lt-ie8 lt-ie7" lang="en" dir="ltr"><![endif]-->
<!--[if (IE 7)&(!IEMobile)]><html class="lt-ie9 lt-ie8" lang="en" dir="ltr"><![endif]-->
<!--[if IE 8]><html class="lt-ie9" lang="en" dir="ltr"><![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--><html lang="en" dir="ltr"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="../sites/all/themes/sitetheme/favicon.ico" type="image/vnd.microsoft.icon" />
<meta name="description" content="DIVS IN DIVS IN DIVS IN DIVS IN DIVSDrupal feels disgned for a backend developer. A typical workflow for a medium or a large team is to have a backend developer configure a content type and page and hand off rendered pages to a frontend developer to style.This pattern is no fun!There are many tools which are simple to use that allow developers to shape the generated markup to fit the way they want to manage pages. This is essential in a world of semantic HTML and flexible responsive sites. You can do anything!" />
<meta name="generator" content="Drupal 7 (http://drupal.org)" />
<link rel="canonical" href="../node/38.html" />
<link rel="shortlink" href="../node/38.html" />
<title>Controlling Markup with Display Suite, Semantic Views, Custom Theme Templates, and Media | MidCamp</title>
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<!-- <a href="https://plus.google.com/105676072717448976925" rel="publisher" /> -->
<link type="text/css" rel="stylesheet" href="../sites/default/files/css/css_lQaZfjVpwP_oGNqdtWCSpJT1EMqXdMiU84ekLLxQnc4.css" media="all" />
<link type="text/css" rel="stylesheet" href="../sites/default/files/css/css_Lwq5JSI1tGRjp1FRNxg5kt8fOiI4e0flzM6YeUq78u8.css" media="all" />
<link type="text/css" rel="stylesheet" href="../sites/default/files/css/css_atkFGFlvG6sSQcIj6Q73rpgsXhtr58AwITc2aQjVotk.css" media="all" />
<link type="text/css" rel="stylesheet" href="../sites/default/files/css/css_GSl0KrVrOmPGyWhvCYT4-PlK0I1rEce-UTDdvd4mKho.css" media="all" />
<script src="../sites/default/files/js/js_vDrW3Ry_4gtSYaLsh77lWhWjIC6ml2QNkcfvfP5CVFs.js"></script>
<script src="../sites/default/files/js/js_6RfqyQ6dGB15EZV8a7SPpd5EOSSerQR7s-GxPVyVTqA.js"></script>
<script src="../sites/default/files/js/js_I8yX6RYPZb7AtMcDUA3QKDZqVkvEn35ED11_1i7vVpc.js.html"></script>
<script>(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,"script","//www.google-analytics.com/analytics.js","ga");ga("create", "UA-60086119-1", {"cookieDomain":".2015.midcamp.org"});ga("set", "anonymizeIp", true);ga("send", "pageview");</script>
<script>jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"sitetheme","theme_token":"s-c33Y4Dw6HFgo0KS-dWV-gmoduHR5db4B5tZ9aK8sQ","js":{"sites\/all\/themes\/sitetheme\/js\/script.js":1,"sites\/all\/themes\/sitetheme\/js\/google_fonts.js":1,"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"sites\/all\/modules\/contrib\/environment_indicator\/tinycon.min.js":1,"sites\/all\/modules\/contrib\/environment_indicator\/environment_indicator.js":1,"sites\/all\/modules\/contrib\/environment_indicator\/color.js":1,"sites\/all\/modules\/contrib\/google_analytics\/googleanalytics.js":1,"0":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"sites\/all\/modules\/contrib\/date\/date_api\/date.css":1,"sites\/all\/modules\/contrib\/date\/date_popup\/themes\/datepicker.1.7.css":1,"sites\/all\/modules\/contrib\/environment_indicator\/environment_indicator.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/contrib\/youtube\/css\/youtube.css":1,"sites\/all\/modules\/contrib\/views\/css\/views.css":1,"sites\/all\/modules\/contrib\/ctools\/css\/ctools.css":1,"sites\/all\/modules\/contrib\/panels\/css\/panels.css":1,"sites\/all\/themes\/sitetheme\/system.menus.css":1,"sites\/all\/themes\/sitetheme\/system.messages.css":1,"sites\/all\/themes\/sitetheme\/system.theme.css":1,"sites\/all\/themes\/sitetheme\/css\/styles.css":1}},"googleanalytics":{"trackOutbound":1,"trackMailto":1,"trackDownload":1,"trackDownloadExtensions":"7z|aac|arc|arj|asf|asx|avi|bin|csv|doc(x|m)?|dot(x|m)?|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt(x|m)?|pot(x|m)?|pps(x|m)?|ppam|sld(x|m)?|thmx|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls(x|m|b)?|xlt(x|m)|xlam|xml|z|zip","trackDomainMode":"1"}});</script>
<!--[if lt IE 9]>
<script src="/sites/all/themes/zen/js/html5-respond.js"></script>
<![endif]-->
</head>
<body class="html not-front not-logged-in no-sidebars page-node page-node- page-node-38 node-type-session section-session-proposal page-panels" >
<p id="skip-link">
<a href="../node/38.html#main-menu" class="element-invisible element-focusable">Jump to navigation</a>
</p>
<div class="header__top">
<div class="header__region region region-header">
<div id="block-system-user-menu" class="block block-system block-menu first odd" role="navigation">
<h2 class="block__title block-title">User menu</h2>
<ul class="menu"><li class="menu__item is-leaf first leaf menu__item level-1 menu__item--create-account"><a href="../user/register.html" title="" class="menu__link">Create Account</a></li><li class="menu__item is-leaf last leaf menu__item level-1 menu__item--login"><a href="../user/login.html" title="" class="menu__link">Login</a></li></ul>
</div>
<div id="block-block-1" class="block block-block last even">
<p>March 19-22, 2015 at University of Illinois at Chicago (UIC)</p>
</div>
</div>
</div>
<div id="navigation" class="clearfix">
<div class="inner">
<a href="../index.html" title="Home" rel="home" class="logo-mobile">MidCamp</a>
<a class="links--mobile__title ss-icons ss-rows"></a>
<div class="links--mobile__container">
<input type="checkbox" id="toggle-button"><label for="toggle-button" onclick></label>
<div class="menus">
<nav id="user-menu" role="navigation" tabindex="-1"><ul class="menu--user-menu menu links"><li class="menu__item is-leaf first leaf menu__item level-1 menu__item--create-account"><a href="../user/register.html" title="" class="menu__link">Create Account</a></li><li class="menu__item is-leaf last leaf menu__item level-1 menu__item--login"><a href="../user/login.html" title="" class="menu__link">Login</a></li></ul></nav> <nav id="main-menu" role="navigation" tabindex="-1"><ul class="menu--main-menu menu links"><li class="menu__item is-expanded first expanded dropdown menu-item level-1"><input type="checkbox" /><a href="../node/15.html" class="menu__link" data-toggle="dropdown" aria-haspopup="true">Camp<i class="icon theme-icon-arrow-down"></i></a><ul class="menu--main-menu_sub dropdown-menu menu"><li class="menu__item is-leaf first leaf level-2"><a href="../node/123.html" title="" class="menu__link">Buy Tickets</a></li><li class="menu__item is-leaf leaf level-2"><a href="../node/4.html" class="menu__link">Venue</a></li><li class="menu__item is-leaf leaf level-2"><a href="../node/101.html" title="Navigating around the venue" class="menu__link">Closer Look at the Venue</a></li><li class="menu__item is-leaf leaf level-2"><a href="../about/news.html" class="menu__link">News</a></li><li class="menu__item is-expanded expanded level-2"><a href="../community.1.html" class="menu__link">Community</a><nav id="main-menu" role="navigation" tabindex="-1"><ul class="menu--main-menu menu links"><li class="menu__item is-leaf first last leaf menu-item level-3"><a href="../community/all.html" class="menu__link">Community</a></li></ul></nav></li><li class="menu__item is-leaf leaf level-2"><a href="../node/158.html" class="menu__link">Speaker Resources</a></li><li class="menu__item is-leaf last leaf level-2"><a href="../node/178.html" class="menu__link">Nearby Restaurants</a></li></ul></li><li class="menu__item is-expanded expanded dropdown menu-item level-1"><input type="checkbox" /><a href="../node/58.html" class="menu__link" data-toggle="dropdown" aria-haspopup="true">Schedule<i class="icon theme-icon-arrow-down"></i></a><ul class="menu--main-menu_sub dropdown-menu menu"><li class="menu__item is-leaf first leaf level-2"><a href="../schedule/friday.html" title="" class="menu__link">Friday schedule</a></li><li class="menu__item is-leaf leaf level-2"><a href="../schedule/saturday.html" title="" class="menu__link">Saturday schedule</a></li><li class="menu__item is-leaf last leaf level-2"><a href="../sessions.html" title="" class="menu__link">Filterable Sessions</a></li></ul></li><li class="menu__item is-expanded expanded dropdown menu-item level-1"><input type="checkbox" /><a href="../trainings.html" title="" class="menu__link" data-toggle="dropdown" aria-haspopup="true">Training Day<i class="icon theme-icon-arrow-down"></i></a><ul class="menu--main-menu_sub dropdown-menu menu"><li class="menu__item is-leaf first leaf level-2"><a href="../node/145.html" class="menu__link">Absolute Beginners Guide to Drupal</a></li><li class="menu__item is-leaf leaf level-2"><a href="../node/139.html" class="menu__link">Behavior Driven Development with Behat</a></li><li class="menu__item is-leaf leaf level-2"><a href="../node/140.html" class="menu__link">Build. Launch. Run.</a></li><li class="menu__item is-leaf last leaf level-2"><a href="../node/141.html" class="menu__link">Intro to Drupal 7 Module Development</a></li></ul></li><li class="menu__item is-expanded expanded dropdown menu-item level-1"><input type="checkbox" /><a href="../sponsors.html" class="menu__link" data-toggle="dropdown" aria-haspopup="true">Sponsors<i class="icon theme-icon-arrow-down"></i></a><ul class="menu--main-menu_sub dropdown-menu menu"><li class="menu__item is-leaf first last leaf level-2"><a href="../node/1.html" class="menu__link">Become a Sponsor</a></li></ul></li><li class="menu__item is-leaf last leaf menu-item level-1"><a href="../jobs.html" class="menu__link">Jobs</a></li></ul></nav></div>
</div>
</div>
</div>
<div class="header-wrapper">
<header class="header__region" id="header" role="banner">
<div class="header__badge">
<a href="../index.html" title="Home" rel="home" class="header__logo" id="logo"><img src="../sites/all/themes/sitetheme/logo.png" alt="Home" class="header__logo-image" /></a>
<div class="header__name-and-slogan" id="name-and-slogan">
<h1 class="header__site-name" id="site-name">
<a href="../index.html" title="Home" class="header__site-link" rel="home"><span>MidCamp</span></a>
</h1>
<h1 class="page__title title session__title" id="page-title">Controlling Markup with Display Suite, Semantic Views, Custom Theme Templates, and Media</h1>
</div>
</div>
</header>
</div>
<div id="page">
<div id="main">
<div id="content" class="column session-detail" role="main">
<nav class="breadcrumb" role="navigation"><h2 class="element-invisible">You are here</h2><ol><li><a href="../index.html">Home</a></li></ol></nav> <a id="main-content"></a>
<article class="node-38 node node-session view-mode-full node--session__full clearfix">
<div class="field field-name-field-speakers field-type-entityreference field-label-inline clearfix"><div class="field-label">Speakers: </div><div class="field-items"><div class="field-item even">pandaeskimo</div></div></div><div class="field field-name-field-track field-type-taxonomy-term-reference field-label-inline clearfix"><div class="field-label">Track: </div><div class="field-items"><div class="field-item even">Front End</div></div></div><div class="field field-name-field-audience field-type-taxonomy-term-reference field-label-inline clearfix"><div class="field-label">Audience: </div><div class="field-items"><div class="field-item even">Intermediate</div></div></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"><h2>DIVS IN DIVS IN DIVS IN DIVS IN DIVS</h2><p>Drupal feels disgned for a backend developer. A typical workflow for a medium or a large team is to have a backend developer configure a content type and page and hand off rendered pages to a frontend developer to style.</p><p><em><strong>This pattern is no fun!</strong></em></p><p>There are many tools which are simple to use that allow developers to shape the generated markup to fit the way they want to manage pages. This is essential in a world of semantic HTML and flexible responsive sites. You can do anything!</p><p><em><strong>Let frontend and backend developers collaborate!</strong></em></p><p>Backend developers should be aware of these tools and make them available to frontend developers. Frontend developers should be aware of these tools so they can request them from backend developers. </p><h2>Target Audience</h2><ul><li>Frontend developers</li><li>Themers</li><li>Backend developers</li><li>Project managers</li><li>Really anyone!</li></ul><h2>Drupal Components Discussed</h2><ul><li>Display Suite Module</li><li>Fences Module</li><li>Media Module</li><li>Semantic Views Module</li><li>Custom Templates and Themes</li></ul><h2>Code reference</h2><p><a href="http://damontgomery.github.io/clean-markup/" rel="nofollow">http://damontgomery.github.io/clean-markup/</a></p><p><a href="https://www.codeenigma.com/community/blog/death-themer" rel="nofollow">https://www.codeenigma.com/community/blog/death-themer</a></p><h2>About Me</h2><p>I live in Chicago and love working with backend and frontend development. During business hours, I work at Acquia as a Technical Consultant. After hours, I love playing video games and board games and occasionally traveling around the US.</p></div></div></div><div class="field field-name-field-length field-type-list-text field-label-inline clearfix"><div class="field-label">Length: </div><div class="field-items"><div class="field-item even">50 minutes</div></div></div><div class="field field-name-field-related-content field-type-link-field field-label-above"><div class="field-label">Related Content: </div><div class="field-items"><div class="field-item even"><a href="https://joind.in/talk/view/13820">Please provide feedback via joind.in</a></div></div></div>
</article>
</div>
</div>
</div>
<div class="footer-wrapper">
<footer id="footer" class="footer__region region region-footer">
<div id="block-menu-menu-footer-navigation" class="block block-menu first odd" role="navigation">
<div class="block-inner">
<ul class="menu__footer-navigation links inline inline-links"><li class="menu__item is-leaf first leaf"><a href="../node/2.html" title="" class="menu__link">Code of Conduct</a></li>
<li class="menu__item is-leaf leaf"><a href="https://twitter.com/MidwestCamp" title="" class="menu__link">Twitter</a></li>
<li class="menu__item is-leaf leaf"><a href="https://www.facebook.com/MidCamp" title="" class="menu__link">Facebook</a></li>
<li class="menu__item is-leaf leaf"><a href="https://plus.google.com/+MidCampOrg" title="" class="menu__link">Google+</a></li>
<li class="menu__item is-leaf last leaf"><a href="https://twitter.com/search?f=realtime&q=%23MidCamp&src=typd" title="" class="menu__link">#MidCamp</a></li>
</ul>
</div>
</div>
<div id="block-views-random-sponsor-gold" class="block block-views even">
<div class="block-inner">
<div class="view view-random-sponsor view-id-random_sponsor view-display-id-gold view-dom-id-b087e3546a6d59b5dcbeece8558ab661">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
<div class="views-field views-field-field-image"> <div class="field-content"><a href="../node/136.html"><img src="../sites/default/files/styles/sponsor_footer/public/sponsors/palantir-logo.png%3Fitok=9XecObJn" width="371" height="60" alt="" /></a></div> </div> </div>
</div>
</div>
<h2 class="block__title block-title">Is a Gold Sponsor!</h2>
</div>
</div>
<div id="block-views-random-sponsor-silver" class="block block-views last odd">
<div class="block-inner">
<div class="view view-random-sponsor view-id-random_sponsor view-display-id-silver view-dom-id-955fc51ce945d8fc85dd5dcae3236496">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
<div class="views-field views-field-field-image"> <div class="field-content"><a href="../node/144.html"><img src="../sites/default/files/styles/sponsor_footer/public/sponsors/finalfiles_colour_2.png%3Fitok=svKvneiB" width="95" height="60" alt="" /></a></div> </div> </div>
</div>
</div>
<h2 class="block__title block-title">Is a Silver Sponsor!</h2>
</div>
</div>
</footer>
</div>
<script src="../sites/default/files/js/js_vVlWfsDgq27ypN6KJTygzAqN1nk0JW5lt4sp7W4x0VY.js"></script>
</body>
</html>