Merge pull request #88 from creativecommons/wp-img-rendering

correct for wordpress specific `img` alignment classes

Author: possumbilities

src/context/blog-post.html

@@ -111,6 +111,8 @@ <h1>What are the barriers to open culture? Here's what the CC community has to s
 
 </header>
 
+<div class="content">
+
     <aside class="opening">
         <p>
         <span>part of the</span>
@@ -135,6 +137,11 @@ <h2>Let's Try This Again</h2>
 
     <h3>Along The Way We Try</h3>
 
+    <figure>
+        <img src="../imgs/image.jpg" class="alignright" />
+    
+        <figcaption class="attribution">"<a href="https://thegreats.co/artworks/the-more-we-share-the-more-we-have-series-22">The More We Share, The More We Have (series 1/2)</a>" by <a href="https://thegreats.co/artists/pietro-soldi">Pietro Soldi</a> for Creative Commons &amp; Fine Acts is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></figcaption>
+    </figure>
 
     <p>Along with 600 million people, nine-year-old Chris Hadfield is glued to his television&mdash;watching intently as American astronaut Neil Armstrong glides down the ladder of the Lunar Module, and in one swift pounce, touches the dust of a familiar yet alien world. His words forever immortalized, "That's one small step for man, one giant leap for mankind."</p>
 
@@ -203,6 +210,8 @@ <h2>Tags</h2>
         </ul>
     </article>
 
+    </div>
+
     <article class="posts related">
         <h2>Related posts</h2>
 
@@ -274,8 +283,6 @@ <h3><a href="#">Open Access in Practice: A Conversation with President Larry Kra
         </ul>
     </article>
 
-
-
 </main>
 
 <footer>

src/context/default-page.html

@@ -188,6 +188,12 @@ <h3>Steps to launch</h3>
     <li>Land safely</li>
 </ol>
 
+<figure>
+    <img src="../imgs/image.jpg" class="alignright" />
+
+    <figcaption class="attribution">"<a href="https://thegreats.co/artworks/the-more-we-share-the-more-we-have-series-22">The More We Share, The More We Have (series 1/2)</a>" by <a href="https://thegreats.co/artists/pietro-soldi">Pietro Soldi</a> for Creative Commons &amp; Fine Acts is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></figcaption>
+</figure>
+
 <p>For example, Alex G. Orphanos, a science communicator, engineer, and host of the Today in Space podcast, has put NASA's materials to use for over six years. In particular, he has used images from the Hubble Space Telescope and information from NASA Procurement to better explain space-related issues to his audience. Rachael Eidson, a business development specialist for <strong>Trenton Systems</strong> and social media influencer also routinely uses NASA's images in her collaborations with eco-fashion and accessory companies. In fact, it's hard to miss the resurgence of space-themed items, including t-shirts, mugs, bags, etc. featuring NASA's “meatball” logo. As the L.A. Times reported in 2019, “The NASA logo is having a moment.”</p>
 
 

src/css/style.css

@@ -456,6 +456,136 @@
 
 /* patches */
 
-main > article figure img, main > figure img {
+/* main > article figure img, main > figure img {
   width: 100%;
+} */
+
+/* Classic Editor TinyMCE WYSIWYG editor image alignment  */
+/* TODO: port in alignleft and alignright rules here as well? */
+main figure:has(img.aligncenter) {
+  width: 100%;
+  margin-left: 0;
+}
+
+/* Classic Editor TinyMCE WYSIWYG editor image alignment, previous theme's markukp  */
+/* presently <figure> */
+div[id^="attachment_"] {
+  width: 120%;
+  margin: 0;
+  margin-left: -10%;
+  margin-bottom: 3em;
+  padding: 0;
+  float: none;
+}
+
+/* presently <img> */
+div[id^="attachment_"] img[class^="wp-image"]:not([width]) {
+  width: 100%;
+}
+
+/* presently <span class="attribution> */
+div[id^="attachment_"] p[id^="caption-attachment-"] {
+  display: block;
+  margin-top: 1em;
+  font-size: 1em;
+}
+
+div[id^="attachment_"].alignleft {
+  margin-top: 2em;
+  margin-right: 2em;
+  margin-left: -10%;
+  width: 50%;
+  float: left;
+}
+
+div[id^="attachment_"].alignleft:after {
+  display: block;
+  content: '';
+  height: 3em;
+  clear: both;
+}
+
+div[id^="attachment_"].aligncenter {
+  width: 100%;
+
+  margin-left: 0;
+}
+
+div[id^="attachment_"].alignright {
+  margin-top: 2em;
+  margin-right: -10%;
+  margin-left: 2em;
+  width: 50%;
+  float: right;
+}
+
+div[id^="attachment_"].alignright:after {
+  display: block;
+  content: '';
+  height: 2em;
+  clear: both;
+}
+
+main .content div[id^="attachment_"].alignleft {
+  margin-left: 0;
+  width: 40%;
+}
+
+main .content div[id^="attachment_"].alignright {
+  margin-right: 0;
+  width: 40%;
+}
+
+main .content figure:has(img.alignleft), .blog-post main figure:has(img.alignleft) {
+  margin-right: 2em;
+  margin-left: 0;
+  width: 40%;
+  float: left;
+}
+
+main .content figure:has(img.alignright), .blog-post main figure:has(img.alignright) {
+  margin-right: 0;
+  margin-left: 2em;
+  width: 40%;
+  float: right;
+}
+
+@media (max-width:400px) {
+
+  div[id^="attachment_"].alignleft {
+    width: 100%;
+    float: none;
+    margin: 0;
+  }
+
+  div[id^="attachment_"].alignright {
+    width: 100%;
+    float: none;
+    margin: 0;
+  }
+
+  main .content div[id^="attachment_"].alignleft {
+    width: 100%;
+    float: none;
+    margin: 0;
+  }
+  
+  main .content div[id^="attachment_"].alignright {
+    width: 100%;
+    float: none;
+    margin: 0;
+  }
+
+  main .content figure:has(img.alignleft), .blog-post main figure:has(img.alignleft) {
+    width: 100%;
+    float: none;
+    margin: 0;
+  }
+
+  main .content figure:has(img.alignright), .blog-post main figure:has(img.alignright) {
+    width: 100%;
+    float: none;
+    margin: 0;
+  }
+
 }