SILENT COMICS SILENT COMICS, independent, mercurial, and ad-free comics. https://silentcomics.com/ Thu, 04 Jun 2020 08:01:49 +0000 Thu, 04 Jun 2020 08:01:49 +0000 Jekyll v4.1.0 Online Color tools <p class="notice">Color theory: <a href="https://en.wikipedia.org/wiki/Color_theory">https://en.wikipedia.org/wiki/Color_theory</a></p> <p><a href="/images/Goethe_Farbenkreis_zur_Symbolisierung_des_menschlichen_Geistes_und_Seelenlebens_1809.jpg"><picture class="" data-volume="11" data-downloadable="true"><source sizes="(max-width: 480px) 100vw, (max-width: 1920px) 100vw, 960px" srcset="/images/Goethe_Farbenkreis_zur_Symbolisierung_des_menschlichen_Geistes_und_Seelenlebens_1809-240-2a5b98.webp 240w, /images/Goethe_Farbenkreis_zur_Symbolisierung_des_menschlichen_Geistes_und_Seelenlebens_1809-480-2a5b98.webp 480w, /images/Goethe_Farbenkreis_zur_Symbolisierung_des_menschlichen_Geistes_und_Seelenlebens_1809-600-2a5b98.webp 600w" type="image/webp"><source sizes="(max-width: 480px) 100vw, (max-width: 1920px) 100vw, 960px" srcset="/images/Goethe_Farbenkreis_zur_Symbolisierung_des_menschlichen_Geistes_und_Seelenlebens_1809-240-2a5b98.jpg 240w, /images/Goethe_Farbenkreis_zur_Symbolisierung_des_menschlichen_Geistes_und_Seelenlebens_1809-480-2a5b98.jpg 480w, /images/Goethe_Farbenkreis_zur_Symbolisierung_des_menschlichen_Geistes_und_Seelenlebens_1809-600-2a5b98.jpg 600w" type="image/jpeg"><img class="gallery" src="/images/Goethe_Farbenkreis_zur_Symbolisierung_des_menschlichen_Geistes_und_Seelenlebens_1809-600-2a5b98.jpg" alt="Goethe Farbenkreis zur Symbolisierung des menschlichen Geistes und Seelenlebens"></picture></a></p> <figcaption>Goethe color wheel</figcaption> <h2 id="online-color-tools">Online Color tools</h2> <p>☞ <a href="https://color.adobe.com/create">Adobe color</a> lets you test and save palettes.</p> <p>☞ <a href="https://www.canva.com/color-palette/">Color palette generator</a> by Canva, picks a palette from any image that you upload yourself.</p> <p>☞ <a href="https://www.colorhexa.com">ColorHexa</a></p> <p>☞ <a href="http://www.colourlovers.com/">COLOURlovers</a></p> <p>☞ <a href="http://clrs.cc">Colors</a> by <a href="http://mrmrs.cc">MRMRS</a></p> <p>☞ <a href="http://coolors.co/">Coolors</a>, a color schemes generator by Fabrizio Bianchi and colourlovers.</p> <p>☞ <a href="http://khroma.co/generator/">Khroma</a></p> <p>☞ <a href="https://colorhunt.co">Color Hunt</a> Color Palettes for Designers and Artists. <em>Color Hunt is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes</em></p> <p>☞ <a href="https://www.huesnap.com">Hue Snap</a> Create beautiful color palettes to share and inspire others.</p> <p>☞ <a href="https://nipponcolors.com">Nippon Colors</a> Colors traditionally used in Japanese art.</p> <p>☞ <a href="https://material.io/color/">Material Design Color Tool</a> <em>Create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination.</em></p> <p>☞ <a href="http://paletton.com/">Paletton</a> Paletton is an online application formerly called <em>Color Schemes</em></p> <p>☞ <a href="http://c0ffee.surge.sh">COFFEE is the color</a>, find out what real words are valid CSS HEX colors.</p> <p>☞ <a href="http://bada55.io">http://bada55.io</a>, similar to COFFEE: find leet words for your CSS hex colors.</p> <p>☞ <a href="https://yeun.github.io/open-color/">Open color</a> Open color is an open-source color scheme, optimized for UI like font, background, border, etc.</p> <p>☞ <a href="https://www.0to255.com">0to255</a> help with choosing colours</p> <p>☞ <a href="http://tools.medialab.sciences-po.fr/iwanthue/">i want hue</a> A tool to generate and refine palettes of optimally distinct colors.</p> <p>☞ <a href="http://rgb.to/">rgb.to</a> Color converter (RGB, HSL, Hex, keyword, Pantone or RAL) by <a href="http://carloscabo.com">Carlos Cabo</a>. Especially useful if you work in print.</p> <p>☞ <a href="http://www.color-hex.com/">Color Hex Color Codes</a> Color-hex provides with colors information, color models (RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous colors. Color-hex.com also generates a simple css code for any selected color.</p> <h4 id="footnotes">Footnotes</h4> <h5 id="rune-madsen-programming-design-systems-a-short-history-of-color-theory-retrieved-may-14-2020-httpsprogrammingdesignsystemscomcolora-short-history-of-color-theoryindexhtml">Rune Madsen, Programming Design Systems. “A short history of color theory” Retrieved May 14, 2020 <a href="https://programmingdesignsystems.com/color/a-short-history-of-color-theory/index.html">https://programmingdesignsystems.com/color/a-short-history-of-color-theory/index.html</a></h5> Fri, 25 Oct 2019 00:00:00 +0000 https://silentcomics.com/tools/design/online-color-palettes/ https://silentcomics.com/tools/design/online-color-palettes/ Color tools design Silent Mistakes <h1 id="a-jekyll-theme">A Jekyll theme</h1> <p><a href="https://github.com/SilentComics/silent-mistakes">Silent Mistakes Jekyll theme on GitHub</a>;</p> <h2 id="features">features</h2> <ul> <li>Jekyll theme + documentation</li> <li>Custom Fonts: Fénix by <a href="https://ferfolio.carbonmade.com/projects/5510858">Fernando Díaz</a> and Inconsolata by <a href="https://levien.com/type/myfonts/inconsolata.html">Raph Levien</a></li> <li>Comments integration thanks to <a href="https://github.com/eduardoboucas/staticman">Staticman</a> by <a href="https://eduardoboucas.com">Eduardo Boucas</a></li> <li><a href="https://gumroad.com">Gumroad</a> integration</li> <li>Icons thanks to <a href="http://fontawesome.io">Font Awesome</a></li> </ul> <h2 id="theme-demo">Theme demo</h2> <p><a href="https://silentcomics.github.io/silent-mistakes/">https://silentcomics.github.io/silent-mistakes/</a></p> <h2 id="to-do">To Do</h2> <ul> <li>Structured Data</li> <li>Complete documentation</li> </ul> <div><a href="https://github.com/SilentComics/silent-mistakes/archive/master.zip" class="btn btn--success tr">Download Silent Mistakes theme</a></div> Sun, 13 Oct 2019 22:12:48 +0000 https://silentcomics.com/jekyll/silent-mistakes/ https://silentcomics.com/jekyll/silent-mistakes/ web-design theme Jekyll Essay tips from Prof. W Kuskin <p class="notice">Note: these tips are notes from 2013 <em>Comic Books and Graphic Novels</em> Coursera MOOC by Prof. W. Kuskin</p> <h2 id="kuskin-rules">Kuskin Rules</h2> <ol> <li> <p>Kuskin Rule #1 <strong>Circle the Details</strong></p> </li> <li> <p>Kuskin Rule #2 <strong>Synthesize the Details</strong></p> </li> <li>Kuskin Rule #3 <strong>Writing Creates a Persona</strong> <ul> <li>Craft a title that matters</li> <li>Begin with a topic sentence, marry that to a theme</li> <li>Reflect on points = Thesis Statement</li> </ul> </li> <li>Kuskin Rule #4 <strong>Make a Plan for Success</strong></li> </ol> <hr /> <h2 id="the-plan-for-assignment-1-kuskin-6-steps-that-helps">The Plan for Assignment #1 (Kuskin 6 steps that helps)</h2> <ol> <li><strong>Read</strong> the assignment (Pick a comic page)… Do it NOW!</li> <li>Apply Kuskin Rules #1 &amp; #2 <ul> <li><strong>Circling the details</strong></li> <li><strong>Pick up the details</strong> (that stand out to you)</li> </ul> </li> <li><strong>Write</strong> for a solid hour uninterrupted — Just keep writing no matter what — get rolling</li> <li>Take time to “Digest” then <strong>REVISE</strong> using Kuskin Rule #3, end every paragraph with a strong statement</li> <li>Ask “What is the POINT” — <strong>What is the conclusion?</strong> A chance to make a strong statement — “So what?” and revise again</li> <li><strong>Read it out LOUD</strong> and correct for final submission</li> </ol> <hr /> <h1 id="essay-tips-from-prof-kuskin">Essay tips from Prof. Kuskin:</h1> <h3 id="find-out-what-the-teacher-wants">Find out what the teacher wants:</h3> <ul> <li>Get the assignment prompt and <strong>break it into its individual parts</strong> - this becomes <strong>the skeleton for your essay</strong>.</li> </ul> <h3 id="dont-start-with-the-introduction-paragraph">Don’t start with the introduction paragraph</h3> <ul> <li>seriously, this is a great way of stumping yourself ten minutes into the writing process</li> <li>you’re trying to write an intro for a paper that doesn’t exist yet?</li> <li>start with the first body paragraph</li> </ul> <h3 id="your-awesome-body-paragraphs">Your awesome body paragraphs</h3> <ul> <li>the cool thing about the essay is that you pretty much get to tell people what to think</li> <li>don’t hold back</li> <li>your name is already on the top of the page, so whatever you say, try to really mean it</li> </ul> <h3 id="conclusion-paragraph">Conclusion paragraph</h3> <ul> <li>the conclusion is like the end of a 30 seconds commercial where they hold the product up at the end just in case you forgot you were watching a commercial</li> <li>hold up your argument for the audience one more time</li> <li>just in case they forgot what they just read</li> </ul> <h3 id="introduction-paragraph">Introduction paragraph</h3> <ul> <li>now that you have body paragraphs and a conclusion, rewrite your conclusion to introduce your topic</li> <li>notice how easier it is to introduce something AFTER you’ve written about it</li> <li>slap a badass thesis statement at the end of your intro</li> </ul> <h3 id="thesis-statement">Thesis statement</h3> <ul> <li>remember the skeleton from the beginning — take it back out</li> <li>make a single sentence that talks about all those points</li> <li>it’s fine to write a sentence that says: “in this essay, I argue that…”</li> <li>then just list those things — done.</li> </ul> <h3 id="quotes">Quotes</h3> <ul> <li>quotes are a great way to make yourself look credible and to add length to your paper</li> <li>you need to talk before and after a quote</li> <li>tell people who you are quoting</li> <li>tell people why they should care</li> </ul> <h3 id="citations">Citations!</h3> <p>Well, citations can be nice, it shows that you researched something about your subject but they can be a double edged sword if you don’t actually reference them in the proper context. Incomplete, out of context or false quotes are bad.</p> Sun, 13 Oct 2019 19:07:11 +0000 https://silentcomics.com/blog/writing/essay-tips-from-prof-w-kuskin/ https://silentcomics.com/blog/writing/essay-tips-from-prof-w-kuskin/ Jekyll blog writing Syntax highlighting with Rouge <p>Jekyll ships with <a href="https://github.com/jneen/rouge">Rouge</a> so if you write:</p> <div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">rougify</span> <span class="n">help</span> <span class="n">style</span> </code></pre></div></div> <p>you get:</p> <div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="ss">usage: </span><span class="n">rougify</span> <span class="n">style</span> <span class="p">[</span><span class="o">&lt;</span><span class="n">theme</span><span class="o">-</span><span class="nb">name</span><span class="o">&gt;</span><span class="p">]</span> <span class="p">[</span><span class="o">&lt;</span><span class="n">options</span><span class="o">&gt;</span><span class="p">]</span> <span class="no">Print</span> <span class="no">CSS</span> <span class="n">styles</span> <span class="k">for</span> <span class="n">the</span> <span class="n">given</span> <span class="n">theme</span><span class="o">.</span> <span class="no">Extra</span> <span class="n">options</span> <span class="n">are</span> <span class="n">passed</span> <span class="n">to</span> <span class="n">the</span> <span class="n">theme</span><span class="o">.</span> <span class="no">To</span> <span class="nb">select</span> <span class="n">a</span> <span class="n">mode</span> <span class="p">(</span><span class="n">light</span><span class="o">/</span><span class="n">dark</span><span class="p">)</span> <span class="k">for</span> <span class="n">the</span> <span class="n">theme</span><span class="p">,</span> <span class="n">append</span> <span class="s1">'.light'</span> <span class="n">or</span> <span class="s1">'.dark'</span> <span class="n">to</span> <span class="n">the</span> <span class="o">&lt;</span><span class="n">theme</span><span class="o">-</span><span class="nb">name</span><span class="o">&gt;</span> <span class="n">respectively</span><span class="o">.</span> <span class="no">Theme</span> <span class="n">defaults</span> <span class="n">to</span> <span class="n">thankful_eyes</span><span class="p">.</span> <span class="nf">options</span><span class="p">:</span> <span class="o">--</span><span class="n">scope</span> <span class="p">(</span><span class="ss">default: </span><span class="p">.</span><span class="nf">highlight</span><span class="p">)</span> <span class="n">a</span> <span class="n">css</span> <span class="n">selector</span> <span class="n">to</span> <span class="n">scope</span> <span class="n">by</span> <span class="n">available</span> <span class="ss">themes: </span><span class="n">base16</span><span class="p">,</span> <span class="n">base16</span><span class="p">.</span><span class="nf">dark</span><span class="p">,</span> <span class="n">base16</span><span class="p">.</span><span class="nf">light</span><span class="p">,</span> <span class="n">base16</span><span class="p">.</span><span class="nf">monokai</span><span class="p">,</span> <span class="n">base16</span><span class="p">.</span><span class="nf">monokai</span><span class="p">.</span><span class="nf">dark</span><span class="p">,</span> <span class="n">base16</span><span class="p">.</span><span class="nf">monokai</span><span class="p">.</span><span class="nf">light</span><span class="p">,</span> <span class="n">base16</span><span class="p">.</span><span class="nf">solarized</span><span class="p">,</span> <span class="n">base16</span><span class="p">.</span><span class="nf">solarized</span><span class="p">.</span><span class="nf">dark</span><span class="p">,</span> <span class="n">base16</span><span class="p">.</span><span class="nf">solarized</span><span class="p">.</span><span class="nf">light</span><span class="p">,</span> <span class="n">bw</span><span class="p">,</span> <span class="n">colorful</span><span class="p">,</span> <span class="n">github</span><span class="p">,</span> <span class="n">gruvbox</span><span class="p">,</span> <span class="n">gruvbox</span><span class="p">.</span><span class="nf">dark</span><span class="p">,</span> <span class="n">gruvbox</span><span class="p">.</span><span class="nf">light</span><span class="p">,</span> <span class="n">igorpro</span><span class="p">,</span> <span class="n">molokai</span><span class="p">,</span> <span class="n">monokai</span><span class="p">,</span> <span class="n">monokai</span><span class="p">.</span><span class="nf">sublime</span><span class="p">,</span> <span class="n">pastie</span><span class="p">,</span> <span class="n">thankful_eyes</span><span class="p">,</span> <span class="n">tulip</span> </code></pre></div></div> <p>you can get the CSS of any of those themes by adding for instance:</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>rougify style base16.monokai.dark &gt; assets/CSS/syntax.css </code></pre></div></div> <p>That will generate a CSS file where you prompted it.</p> <p>You can get a preview of the themes on the <a href="https://spsarolkar.github.io/rouge-theme-preview/">Rouge Theme Preview Page</a>.</p> Tue, 18 Jun 2019 21:36:57 +0000 https://silentcomics.com/jekyll/syntax-highlight-with-rouge/ https://silentcomics.com/jekyll/syntax-highlight-with-rouge/ CSS code snippet Jekyll New theme <p>Time for a blog makeover. The new styling is (almost) done thanks to <a href="http://tachyons.io">TACHYONS</a>. Added functionalities include a search form, <a href="https://gumroad.com/silentcomics">Gumroad</a> integration, <a href="https://photoswipe.com">PhotoSwipe</a> gallery implementation and comics collections. Among the changes, the menu has a logo, and there are a few more fixes just waiting to happen. The pagination now uses <a href="https://github.com/sverrirs/jekyll-paginate-v2">jekyll-paginate-v2</a>. The comment section is also reset, using the <a href="https://github.com/apps/staticman-net">Staticman app</a>.</p> <p>Also added a little plugin to work with <a href="https://github.com/rbuchberger/jekyll-picture-tag">Jekyll Picture Tag</a> for responsive images.</p> <script src="https://gist.github.com/SilentComics/307b1682626dc28350b3ecb88281ff61.js"></script> <p>So instead of having to write all images in Liquid, I can keep a simple markdown image syntax like this:</p> <script src="https://gist.github.com/SilentComics/a2421736d3ab48986289bc80632e115f.js"></script> <p>and don’t even have to write the <code class="language-plaintext highlighter-rouge">/images/</code> path each time. All the pictures will be processed by the Jekyll Picture Tag plugin, each linking to the original image.</p> <p>The blog’s theme as well as the previous one will both be released on GitHub as soon as the documentation is ready.</p> <p>Once the documentation is ready the blog theme’s VS Y2K19 will be released on GitHub: <a href="https://github.com/SilentComics/shizukana">Shizukana Jekyll theme on GitHub</a>;</p> <p>This blog’s previous theme, <a href="https://silentcomics.github.io/silent-mistakes/">Silent Mistakes</a>, a modified version of <a href="https://github.com/mmistakes/minimal-mistakes">minimal-mistake</a>, a Jekyll theme by <a href="http://mademistakes.com">Michael Rose</a>, is released under the <a href="https://choosealicense.com/licenses/mit/">MIT License (MIT)</a>.</p> <div><a href="https://github.com/SilentComics/silent-mistakes/archive/master.zip" class="btn btn--primary tr">Download Silent Mistakes theme</a></div> Mon, 15 Apr 2019 14:32:48 +0000 https://silentcomics.com/jekyll/new-theme/ https://silentcomics.com/jekyll/new-theme/ Jekyll Create a grid page with the first image from each post in WordPress <p>In a <a href="/wordpress/get-the-first-image-from-a-post/" title="Get the first image from each post in WordPress">previous post</a> we used a custom WordPress function <code class="language-plaintext highlighter-rouge">get_first_image</code> to display the first image from all the existing posts within a particular taxonomy (or category) on a given page. This works with pagination, on a static home page or an independent archive page. With this method, we can retrieve all the first images from each post, including galleries. But each thumbnail is now linking to a post image without altering its size. Since having large images is unnecessary, let’s further implement these thumbnails with dynamic resizing. We should spare server resources for users, especially on mobile. Also, if we <a href="/wordpress/previous-and-next-post-in-same-custom-taxonomy/" title="Previous and next post link in the same custom taxonomy">use a custom taxonomy</a>, say “story” for the “comic” custom post type, there is no default category to fall within, so we need to take care of that.</p> <figure> <img src="/images/Strip_four-columns.png" /> <figcaption>Strip theme four columns home page sample</figcaption> </figure> <figure> <img src="/images/Strip_three-columns.png" /> <figcaption>Three columns</figcaption> </figure> <figure> <img src="/images/Strip_two-columns.png" /> <figcaption>Two columns</figcaption> </figure> <script src="https://gist.github.com/SilentComics/0a7ea47942eb759dbb48eac2b7be1bbc.js"></script> <p>Now we can style the post columns in CSS:</p> <figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="c">/* Two columns grid */</span> <span class="nc">.two-columns</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">1.2em</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.two-columns</span><span class="nd">:before</span><span class="o">,</span> <span class="nc">.two-columns</span><span class="nd">:after</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s1">" "</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="n">table</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.two-columns</span><span class="nd">:after</span> <span class="p">{</span> <span class="nl">clear</span><span class="p">:</span> <span class="nb">both</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.two-column</span> <span class="p">{</span> <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">3%</span> <span class="m">1em</span> <span class="m">0</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">48.5%</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.two-column</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">2n</span><span class="o">)</span> <span class="p">{</span> <span class="nl">margin-right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.two-column</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">2n</span><span class="o">+</span><span class="nt">1</span><span class="o">)</span> <span class="p">{</span> <span class="nl">margin-left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">clear</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.two-column</span> <span class="nt">img</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span> <span class="k">@media</span> <span class="n">screen</span> <span class="n">and</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span> <span class="m">552px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">.two-column</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.two-column</span> <span class="nd">:nth-child</span><span class="o">(</span><span class="nt">1n</span><span class="o">)</span> <span class="p">{</span> <span class="nl">margin-right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.two-column</span> <span class="nd">:nth-child</span><span class="o">(</span><span class="nt">1n</span><span class="o">+</span><span class="nt">1</span><span class="o">)</span> <span class="p">{</span> <span class="nl">margin-left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">clear</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.series-title</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span> <span class="nl">font-weight</span><span class="p">:</span> <span class="m">100</span><span class="p">;</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.2</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="c">/* Three columns grid */</span> <span class="nc">.three-columns</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0.6em</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.three-columns</span><span class="nd">:before</span><span class="o">,</span> <span class="nc">.three-columns</span><span class="nd">:after</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s1">" "</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="n">table</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.three-columns</span><span class="nd">:after</span> <span class="p">{</span> <span class="nl">clear</span><span class="p">:</span> <span class="nb">both</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.three-column</span> <span class="p">{</span> <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">2%</span> <span class="m">0.75em</span> <span class="m">0</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">32%</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.three-column</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">3n</span><span class="o">)</span> <span class="p">{</span> <span class="nl">margin-right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.three-column</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">3n</span><span class="o">+</span><span class="nt">1</span><span class="o">)</span> <span class="p">{</span> <span class="nl">margin-left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">clear</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.three-column</span> <span class="nt">img</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span> <span class="k">@media</span> <span class="n">screen</span> <span class="n">and</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span> <span class="m">744px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">.three-column</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.three-column</span> <span class="nd">:nth-child</span><span class="o">(</span><span class="nt">2n</span><span class="o">)</span> <span class="p">{</span> <span class="nl">margin-right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.three-column</span> <span class="nd">:nth-child</span><span class="o">(</span><span class="nt">2n</span><span class="o">+</span><span class="nt">1</span><span class="o">)</span> <span class="p">{</span> <span class="nl">margin-left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">clear</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="k">@media</span> <span class="n">screen</span> <span class="n">and</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span> <span class="m">456px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">.three-column</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.three-column</span> <span class="nd">:nth-child</span><span class="o">(</span><span class="nt">1n</span><span class="o">)</span> <span class="p">{</span> <span class="nl">margin-right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.three-column</span> <span class="nd">:nth-child</span><span class="o">(</span><span class="nt">1n</span><span class="o">+</span><span class="nt">1</span><span class="o">)</span> <span class="p">{</span> <span class="nl">margin-left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">clear</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.series-title</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span> <span class="nl">font-weight</span><span class="p">:</span> <span class="m">100</span><span class="p">;</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.2</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="c">/* Four columns grid */</span> <span class="nc">.four-columns</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0.6em</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.four-columns</span><span class="nd">:before</span><span class="o">,</span> <span class="nc">.four-columns</span><span class="nd">:after</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s1">" "</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="n">table</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.four-columns</span><span class="nd">:after</span> <span class="p">{</span> <span class="nl">clear</span><span class="p">:</span> <span class="nb">both</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.four-column</span> <span class="p">{</span> <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">1.333%</span> <span class="m">1.2rem</span> <span class="m">0</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">24%</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.four-column</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">4n</span><span class="o">)</span> <span class="p">{</span> <span class="nl">margin-right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.four-column</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">4n</span><span class="o">+</span><span class="nt">1</span><span class="o">)</span> <span class="p">{</span> <span class="nl">margin-left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">clear</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.four-column</span> <span class="nt">img</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span></code></pre></figure> <p>Last we call the thumbnails into a specific template — here the two columns option:</p> <figure class="highlight"><pre><code class="language-php" data-lang="php"><span class="cp">&lt;?php</span> <span class="cd">/** * Template Name: Two columns page * * The template for displaying comic series archives pages. * Show the first image of each comic post on a two columns grid. * * @package WordPress * @subpackage Strip */</span> <span class="nx">get_header</span><span class="p">();</span> <span class="cp">?&gt;</span> <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"primary"</span> <span class="err">&lt;</span><span class="na">div</span> <span class="na">class=</span><span class="s">"content"</span> <span class="na">role=</span><span class="s">"main"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"wrap"</span><span class="nt">&gt;</span> <span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">"entry-header"</span><span class="nt">&gt;</span> <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"taxonomy-description"</span><span class="nt">&gt;</span> <span class="cp">&lt;?php</span> <span class="nb">printf</span><span class="p">(</span> <span class="s1">'&lt;a href="%s" class="post-parent-title"&gt;%s&lt;/a&gt;'</span><span class="p">,</span> <span class="nx">esc_url</span><span class="p">(</span> <span class="nx">get_post_type_archive_link</span><span class="p">(</span> <span class="s1">'comic'</span> <span class="p">)</span> <span class="p">),</span> <span class="nx">esc_html</span><span class="p">(</span> <span class="nx">get_the_title</span><span class="p">()</span> <span class="p">)</span> <span class="p">);</span> <span class="cp">?&gt;</span> <span class="nt">&lt;/a&gt;&lt;/h3&gt;</span> <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"page-title"</span><span class="nt">&gt;</span><span class="cp">&lt;?php</span> <span class="nx">the_title</span><span class="p">();</span> <span class="cp">?&gt;</span><span class="nt">&lt;/h1&gt;</span> <span class="nt">&lt;/header&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"two-columns"</span><span class="nt">&gt;</span> <span class="cp">&lt;?php</span> <span class="c1">// get the correct paged figure on a Custom Page That Isn’t Static Home Page.</span> <span class="nv">$paged</span> <span class="o">=</span> <span class="p">(</span> <span class="nx">get_query_var</span><span class="p">(</span> <span class="s1">'paged'</span> <span class="p">)</span> <span class="p">)</span> <span class="o">?</span> <span class="nx">get_query_var</span><span class="p">(</span> <span class="s1">'paged'</span> <span class="p">)</span> <span class="o">:</span> <span class="mi">1</span><span class="p">;</span> <span class="cp">?&gt;</span> <span class="cp">&lt;?php</span> <span class="c1">// Call and run loop in descending order.</span> <span class="nv">$loop</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">WP_Query</span><span class="p">(</span> <span class="k">array</span><span class="p">(</span> <span class="s1">'post_type'</span> <span class="o">=&gt;</span> <span class="s1">'comic'</span><span class="p">,</span> <span class="s1">'story'</span> <span class="o">=&gt;</span> <span class="s1">''</span><span class="p">,</span> <span class="c1">// add story term here if you want this template to only archive a specific story.</span> <span class="s1">'posts_per_page'</span> <span class="o">=&gt;</span> <span class="mi">6</span><span class="p">,</span> <span class="c1">// changes default Blog pages number "reading settings" set in dashboard.</span> <span class="s1">'paged'</span> <span class="o">=&gt;</span> <span class="nv">$paged</span><span class="p">,</span> <span class="c1">// you absolutely need this.</span> <span class="s1">'orderby'</span> <span class="o">=&gt;</span> <span class="s1">'title'</span><span class="p">,</span> <span class="c1">// order by title or date.</span> <span class="s1">'order'</span> <span class="o">=&gt;</span> <span class="s1">'ASC'</span><span class="p">,</span> <span class="p">)</span> <span class="p">);</span> <span class="c1">// Start the loop.</span> <span class="k">if</span> <span class="p">(</span> <span class="nv">$loop</span><span class="o">-&gt;</span><span class="na">have_posts</span><span class="p">()</span> <span class="p">)</span> <span class="o">:</span> <span class="k">while</span> <span class="p">(</span> <span class="nv">$loop</span><span class="o">-&gt;</span><span class="na">have_posts</span><span class="p">()</span> <span class="p">)</span> <span class="o">:</span> <span class="nv">$loop</span><span class="o">-&gt;</span><span class="na">the_post</span><span class="p">();</span> <span class="cp">?&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"two-column"</span><span class="nt">&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"</span><span class="cp">&lt;?php</span> <span class="nx">the_permalink</span><span class="p">();</span> <span class="cp">?&gt;</span><span class="s">"</span> <span class="na">rel=</span><span class="s">"bookmark"</span> <span class="na">title=</span><span class="s">"</span><span class="cp">&lt;?php</span> <span class="nb">printf</span><span class="p">(</span> <span class="nx">esc_html__</span><span class="p">(</span> <span class="s1">'Permanent Link to %s'</span><span class="p">,</span> <span class="s1">'strip'</span> <span class="p">),</span><span class="nx">the_title_attribute</span><span class="p">(</span> <span class="s1">'echo=0'</span> <span class="p">)</span> <span class="p">);</span> <span class="cp">?&gt;</span><span class="s">"</span><span class="nt">&gt;&lt;/a&gt;</span> <span class="cp">&lt;?php</span> <span class="k">if</span> <span class="p">(</span> <span class="nx">get_the_post_thumbnail</span><span class="p">()</span> <span class="o">!==</span> <span class="s1">''</span> <span class="p">)</span> <span class="p">{</span> <span class="k">echo</span> <span class="s1">'&lt;a href="'</span><span class="p">;</span> <span class="nx">the_permalink</span><span class="p">();</span> <span class="k">echo</span> <span class="s1">'" class="thumbnail-wrapper"&gt;'</span><span class="p">;</span> <span class="nx">the_post_thumbnail</span><span class="p">();</span> <span class="k">echo</span> <span class="s1">'&lt;/a&gt;'</span><span class="p">;</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="k">echo</span> <span class="s1">'&lt;a href="'</span><span class="p">;</span> <span class="nx">the_permalink</span><span class="p">();</span> <span class="k">echo</span> <span class="s1">'" class="thumbnail-wrapper"&gt;'</span><span class="p">;</span> <span class="k">echo</span> <span class="s1">'&lt;img src="'</span><span class="p">;</span> <span class="k">echo</span> <span class="nx">esc_html</span><span class="p">(</span> <span class="nx">get_first_image</span><span class="p">(</span> <span class="s1">'strip-medium'</span><span class="p">,</span> <span class="s1">'url'</span> <span class="p">)</span> <span class="p">);</span> <span class="k">echo</span> <span class="s1">'" alt="" /&gt;'</span><span class="p">;</span> <span class="k">echo</span> <span class="s1">'&lt;/a&gt;'</span><span class="p">;</span> <span class="p">}</span> <span class="cp">?&gt;</span> <span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"series-title"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"</span><span class="cp">&lt;?php</span> <span class="nx">the_permalink</span><span class="p">();</span> <span class="cp">?&gt;</span><span class="s">"</span> <span class="na">rel=</span><span class="s">"bookmark"</span> <span class="na">title=</span><span class="s">"</span><span class="cp">&lt;?php</span> <span class="nb">printf</span><span class="p">(</span> <span class="nx">esc_html__</span><span class="p">(</span> <span class="s1">'Permanent Link to %s'</span><span class="p">,</span> <span class="s1">'strip'</span> <span class="p">),</span> <span class="nx">the_title_attribute</span><span class="p">(</span> <span class="s1">'echo=0'</span> <span class="p">)</span> <span class="p">);</span> <span class="cp">?&gt;</span><span class="s">"</span><span class="nt">&gt;</span><span class="cp">&lt;?php</span> <span class="nx">the_title</span><span class="p">();</span> <span class="cp">?&gt;</span><span class="nt">&lt;/a&gt;&lt;/h2&gt;</span> <span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- .column --&gt;</span> <span class="cp">&lt;?php</span> <span class="k">endwhile</span><span class="p">;</span> <span class="cp">?&gt;</span> <span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- .columns --&gt;</span> <span class="cp">&lt;?php</span> <span class="nx">wp_reset_postdata</span><span class="p">();</span> <span class="cp">?&gt;</span> <span class="cp">&lt;?php</span> <span class="nv">$big</span> <span class="o">=</span> <span class="mi">999999999</span><span class="p">;</span> <span class="c1">// need an unlikely integer.</span> <span class="nv">$translated</span> <span class="o">=</span> <span class="nx">__</span><span class="p">(</span> <span class="s1">'Page'</span><span class="p">,</span> <span class="s1">'strip'</span> <span class="p">);</span> <span class="c1">// supply translatable string.</span> <span class="k">echo</span> <span class="nx">wp_kses_post</span><span class="p">(</span> <span class="nx">paginate_links</span><span class="p">(</span> <span class="c1">// Data validation: wp_kses_post see https://developer.wordpress.org/reference/functions/wp_kses_post/.</span> <span class="k">array</span><span class="p">(</span> <span class="s1">'base'</span> <span class="o">=&gt;</span> <span class="nb">str_replace</span><span class="p">(</span> <span class="nv">$big</span><span class="p">,</span> <span class="s1">'%#%'</span><span class="p">,</span> <span class="nx">esc_url</span><span class="p">(</span> <span class="nx">get_pagenum_link</span><span class="p">(</span> <span class="nv">$big</span> <span class="p">)</span> <span class="p">)</span> <span class="p">),</span> <span class="s1">'format'</span> <span class="o">=&gt;</span> <span class="s1">'?paged=%#%'</span><span class="p">,</span> <span class="s1">'current'</span> <span class="o">=&gt;</span> <span class="nb">max</span><span class="p">(</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">get_query_var</span><span class="p">(</span> <span class="s1">'paged'</span><span class="p">,</span> <span class="mi">1</span> <span class="p">)</span> <span class="p">),</span> <span class="s1">'total'</span> <span class="o">=&gt;</span> <span class="nv">$loop</span><span class="o">-&gt;</span><span class="na">max_num_pages</span><span class="p">,</span> <span class="s1">'before_page_number'</span> <span class="o">=&gt;</span> <span class="s1">'&lt;span class="screen-reader-text"&gt;'</span> <span class="o">.</span> <span class="nv">$translated</span> <span class="o">.</span> <span class="s1">' &lt;/span&gt;'</span><span class="p">,</span> <span class="s1">'prev_text'</span> <span class="o">=&gt;</span> <span class="nx">esc_html__</span><span class="p">(</span> <span class="s1">'Previous'</span><span class="p">,</span> <span class="s1">'strip'</span> <span class="p">),</span> <span class="c1">// If you want to change the previous link text.</span> <span class="s1">'next_text'</span> <span class="o">=&gt;</span> <span class="nx">esc_html__</span><span class="p">(</span> <span class="s1">'Next'</span><span class="p">,</span> <span class="s1">'strip'</span> <span class="p">),</span> <span class="c1">// If you want to change the next link text.</span> <span class="s1">'type'</span> <span class="o">=&gt;</span> <span class="s1">'title'</span><span class="p">,</span> <span class="c1">// How you want the return value to be formatted.</span> <span class="s1">'add_fragment'</span> <span class="o">=&gt;</span> <span class="s1">'#result'</span><span class="p">,</span> <span class="c1">// Your anchor.</span> <span class="p">)</span> <span class="p">)</span> <span class="p">);</span> <span class="k">else</span> <span class="o">:</span> <span class="nx">get_template_part</span><span class="p">(</span> <span class="s1">'no-results'</span><span class="p">,</span> <span class="s1">'archive-comic'</span> <span class="p">);</span> <span class="k">endif</span><span class="p">;</span> <span class="cp">?&gt;</span> <span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- .wrap --&gt;</span> <span class="nt">&lt;/main&gt;</span><span class="c">&lt;!-- #content --&gt;</span> <span class="nt">&lt;/section&gt;</span><span class="c">&lt;!-- #primary --&gt;</span> <span class="cp">&lt;?php</span> <span class="nx">get_sidebar</span><span class="p">();</span> <span class="cp">?&gt;</span> <span class="cp">&lt;?php</span> <span class="nx">get_footer</span><span class="p">();</span> <span class="cp">?&gt;</span></code></pre></figure> <p>Do you know a better way or another method? Please leave a comment below.</p> <p class="notice"><a href="https://developer.wordpress.org/reference/functions/wp_set_object_terms/">Function Reference: wp_set_object_terms</a></p> Tue, 09 Jan 2018 00:00:00 +0000 https://silentcomics.com/wordpress/resize-the-first-image-thumbnail-on-a-grid-page/ https://silentcomics.com/wordpress/resize-the-first-image-thumbnail-on-a-grid-page/ php code snippet WordPress Create a directory-tree with the command-line <p class="notice">Update 2020: see also <a href="https://dystroy.org/broot/">Broot</a></p> <p>When you write documentation for your project or site, say a README Table of Content, you may need something like <a href="http://mama.indstate.edu/users/ice/tree/" title="Tree">Tree</a> to generate a directory structure for you. Tree will display a list of directories as trees (with optional color/HTML output) automagically.</p> <p>If you are a Mac user, you can use <code class="language-plaintext highlighter-rouge">Tree</code> in the command line.</p> <p>If you don’t already have <a href="https://brew.sh">Homebrew</a> on your machine, install it first.</p> <p>Then in the command line, simply run</p> <figure class="highlight"><pre><code class="language-text" data-lang="text">brew install tree</code></pre></figure> <p>then you can open a new window</p> <figure class="highlight"><pre><code class="language-text" data-lang="text">CD your-project</code></pre></figure> <p>Then run</p> <figure class="highlight"><pre><code class="language-text" data-lang="text"> tree</code></pre></figure> <p>It will output a nice directory tree within the terminal window that you can just paste into your documentation.</p> <figure class="highlight"><pre><code class="language-text" data-lang="text">Example Jekyll Theme folder/ ├── CNAME ├── LICENSE.txt ├── README.md ├── _config.yml ├── _data │   ├── authors.yml │   ├── comments │   │   ├── a-post-with-comment │   │   │   └── comment-1.yml │   ├── navigation.yml │   └── ui-text.yml ├── _drafts │   ├── something-something.md │   ├── sample-post.md │   └── theme-setup.md ├── _includes │   ├── comment.html │   ├── comments-providers │   │   ├── custom.html │   │   ├── scripts.html │   │   └── staticman.html │   ├── comments.html │   ├── footer.html │   ├── head.html │   └── scripts.html ├── etc.</code></pre></figure> <p>If you are using Markdown, just surround this code with triple backticks<sup id="fnref:1" role="doc-noteref"><a href="#fn:1" class="footnote">1</a></sup> to get the same output.</p> <figure class="highlight"><pre><code class="language-text" data-lang="text">``` ├── CNAME ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── README.md ├── ... ```</code></pre></figure> <h2 id="other-methods">Other methods</h2> <p>Although using Tree in the command-line interface seems easier for me here are some other methods to the same end:</p> <p>☞ <a href="https://www.npmjs.com/package/markdown-magic-directory-tree">Directory tree plugin</a> adds directory tree to markdown files via markdown-magic. → <a href="https://github.com/camacho/markdown-magic-directory-tree">Directory tree plugin GitHub repo</a>. What’s nice is that it lets you control your directory structure depth and which folder or file you choose to ignore.</p> <p>☞ <a href="https://www.npmjs.com/package/md-file-tree">md-file-tree</a> generates markdown list of all the files in a directory. → <a href="https://github.com/michalbe/md-file-tree">md-file-tree GitHub repo</a>. Its Markdown output looks slightly different</p> <p>☞ <a href="https://www.npmjs.com/package/mddir">mddir</a> Mddir generates a markdown file/folder structure for readme files → <a href="https://github.com/JohnByrneRepo/mddir">mddir GitHub repo</a>. Again the output is different.</p> <p>☞ If you are using <a href="https://atom.io">Atom</a>, there is also <a href="https://atom.io/packages/ascii-tree">ASCII Tree</a>, a package to generate ASCII trees to visualize file/folder structure.</p> <p>☞ If you prefer to generate your directory manually, you can use Shawn Chin’s <a href="http://jsfiddle.net/WjAk9/7/embedded/result/">interactive tree builder</a>.</p> <p class="notice">References: <a href="http://mama.indstate.edu/users/ice/tree/" title="Tree">Tree</a>, <a href="https://formulae.brew.sh/formula/tree">Homebrew Formulas</a></p> <div class="footnotes" role="doc-endnotes"> <ol> <li id="fn:1" role="doc-endnote"> <p>see the markdown docs: <a href="https://daringfireball.net/projects/markdown/syntax#code">https://daringfireball.net/projects/markdown/syntax#code</a> <a href="#fnref:1" class="reversefootnote" role="doc-backlink">&#8617;</a></p> </li> </ol> </div> Tue, 12 Dec 2017 00:00:00 +0000 https://silentcomics.com/tools/generate-a-directory-tree/ https://silentcomics.com/tools/generate-a-directory-tree/ Markdown tools The visual web <p>When it started, the web was just hypertext and links<sup id="fnref:1" role="doc-noteref"><a href="#fn:1" class="footnote">1</a></sup>. When the first images appeared, they loaded super slow. Since then, a whole new <em>visual web</em> has emerged. Visual media is growing at an unprecedented rate. Social sites like Pinterest, Instagram, and Tumblr all favour pictures over text. Sites and apps designed for people just to look at things are making images more predominant on the web, if in appearance only. This is still an environment dominated by words<sup id="fnref:2" role="doc-noteref"><a href="#fn:2" class="footnote">2</a></sup> even if images are growing in presence every day. Images are nice, but on the web, they come with a specific set of problems.</p> <h2 id="speed">Speed</h2> <p>To load fast on the web, images should be compressed as large images file will slow down sites. Here is a list of useful <a href="/tools/optimising-images-for-the-web/">image compression tools</a>. Tackling images on small screens can still be an issue for web designers. Mobile devices should not load unnecessary big images. A solution is serving resized images to preserve the intended original layout. A <a href="http://arstechnica.com/information-technology/2014/09/how-a-new-html-element-will-make-the-web-faster/"><code class="language-plaintext highlighter-rouge">&lt;picture element&gt;</code></a> aims to solve this—see also <a href="http://alistapart.com/article/responsive-images-in-practice">Responsive Images in Practice</a>.</p> <h2 id="managing-images">Managing images</h2> <p>There is a growing number of image management systems as well:</p> <ul> <li> <p><a href="http://thumbor.org">thumbor</a> is an open-source smart on-demand image cropping, resizing and filters</p> </li> <li> <p><a href="https://github.com/guardian/grid">grid</a>, The Guardian’s image management service, also open source.</p> </li> <li> <p><a href="http://www.imgix.com/imgix-js">imgx</a>, a toolbox for responsive images.</p> </li> </ul> <h2 id="images-search-and-image-recognition">Images search and image recognition</h2> <p>As the use of images increases, search engines are getting better at images processing and management. Using image recognition coupled to search software, <a href="http://www.tineye.com" title="TinEye">TinEye</a>for instance, reverses the search process. Instead of searching for keywords, you feed it with an image link or an uploaded one. It will tell you where that image is in use, and how many duplicates and variations it finds on the web. It lets illustrators, photographers, and designers track imitations or appropriation of their works. But the underlying technology implications and its potential development exceed that. Large corporations are becoming even more protective of their visual assets. With massive image licensing revenues at stake, the future looks bright for image search.</p> <p><a href="https://www.pinterest.com" title="Pinterest">Pinterest</a> also uses image recognition for visual search, that includes object detection with a whole set of new use-cases. For instance, its application Lens lets you browse the site through your smartphone camera. Google also has a competing app—also called Lens. Visual discovery is serious.</p> <h2 id="new-image-formats">New image formats</h2> <p>To read more about upcoming format for storing digital images, ☞ See <a href="https://images.guide/#choosing-an-image-format">https://images.guide/#choosing-an-image-format</a></p> <h2 id="video-and-more">Video and more</h2> <p>Photography, audio, video, illustration and graphics are taking over our online experience. Augmented and virtual reality are still in their infancy, but are developing fast. Nobody knows what’s next but a large part of the web is now visual. The future web will likely involve more immersive experiences, including AR and VR.</p> <h2 id="further-reading">Further Reading</h2> <h4 id="footnotes">Footnotes</h4> <h5 id="jacob-kastrenakes-the-verge-google-removes-view-image-button-from-search-results-to-make-pics-harder-to-steal-february-15-2018-httpswwwthevergecom201821517017864google-removes-view-image-button-from-search-results">Jacob Kastrenakes, The Verge. “Google removes ‘view image’ button from search results to make pics harder to steal” February 15, 2018 <a href="https://www.theverge.com/2018/2/15/17017864/google-removes-view-image-button-from-search-results">https://www.theverge.com/2018/2/15/17017864/google-removes-view-image-button-from-search-results</a></h5> <h5 id="the-new-york-times-welcome-to-the-post-text-future-february-9-2018--httpswwwnytimescominteractive20180209technologythe-rise-of-a-visual-internethtml">The New York Times. “Welcome to the post-text future” February 9, 2018 <a href="https://www.nytimes.com/interactive/2018/02/09/technology/the-rise-of-a-visual-internet.html">https://www.nytimes.com/interactive/2018/02/09/technology/the-rise-of-a-visual-internet.html</a></h5> <h5 id="graydon-hoare-always-bet-on-text-october-14-2014-httpgraydon2dreamwidthorg193447html">Graydon Hoare. “Always bet on text” October 14, 2014. <a href="http://graydon2.dreamwidth.org/193447.html">http://graydon2.dreamwidth.org/193447.html</a></h5> <div class="footnotes" role="doc-endnotes"> <ol> <li id="fn:1" role="doc-endnote"> <p>See <a href="http://info.cern.ch/hypertext/WWW/TheProject.html">the first website</a> <a href="#fnref:1" class="reversefootnote" role="doc-backlink">&#8617;</a></p> </li> <li id="fn:2" role="doc-endnote"> <p>Tim Caemodt, Kottke. “Facebook is wrong, text is deathless” (June 15 2016) <a href="http://kottke.org/16/06/facebook-is-wrong-text-is-deathless">http://kottke.org/16/06/facebook-is-wrong-text-is-deathless</a> <a href="#fnref:2" class="reversefootnote" role="doc-backlink">&#8617;</a></p> </li> </ol> </div> Sat, 23 Sep 2017 00:00:00 +0000 https://silentcomics.com/design/the-visual-web/ https://silentcomics.com/design/the-visual-web/ web visual design Get the first image from each post in WordPress <p>In this post, let’s write a custom WordPress function <code class="language-plaintext highlighter-rouge">get_first_image</code> to display the first image from all the posts. We can get this to work with pagination, on a static home page or an independent page. With this method we can retrieve all the first images in each post, including gallery posts. We can also get a default picture for post with no image attached.</p> <p>Here is my function snippet:</p> <figure class="highlight"><pre><code class="language-html" data-lang="html">function get_first_image() { $post = get_post(); $first_img = ''; preg_match_all( '/<span class="nt">&lt;img</span><span class="err">.+</span><span class="na">src=</span><span class="s">[\'"]([^\'"]+)[\'"].*</span><span class="nt">&gt;</span>/i', do_shortcode( $post-&gt;post_content, 'gallery' ), $matches ); $first_img = isset( $matches[1][0] ) ? $matches[1][0] : null; if ( empty( $first_img ) ) { return get_template_directory_uri() . '/assets/images/empty.png'; // path to default image. } } </code></pre></figure> <p>You can use it in <code class="language-plaintext highlighter-rouge">function.php</code>:</p> <script src="https://gist.github.com/SilentComics/be47b82859e2f958fc57ee412d4a27b6.js"></script> <p>Now all we need to do is call the function in the page template like so: <code class="language-plaintext highlighter-rouge">echo esc_html( get_first_image() );</code> and style the images or thumbnails.</p> <p>Please leave a comment below if you know a better way or another method.</p> <p class="notice">Reference: <a href="https://css-tricks.com/snippets/wordpress/get-the-first-image-from-a-post/">https://css-tricks.com/snippets/wordpress/get-the-first-image-from-a-post/</a></p> Mon, 03 Jul 2017 00:00:00 +0000 https://silentcomics.com/wordpress/get-the-first-image-from-a-post/ https://silentcomics.com/wordpress/get-the-first-image-from-a-post/ PHP code snippet WordPress Tweaking the built-in WordPress gallery <p>A few simple changes can improve the built-in WordPress gallery behavior without JavaScript and without using a slider plugin:</p> <p>Following is an example of <code class="language-plaintext highlighter-rouge">image.php</code>:</p> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;?php /** * The template for displaying image attachments * * @package WordPress * @subpackage Strip */ get_header(); $content_width = 1920; ?&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"primary"</span> <span class="na">class=</span><span class="s">"content-area image-attachment"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"content"</span> <span class="na">class=</span><span class="s">"site-content"</span> <span class="na">role=</span><span class="s">"main"</span><span class="nt">&gt;</span> <span class="cp">&lt;?php // Start the loop. while ( have_posts() ) : the_post(); ?&gt;</span> <span class="nt">&lt;article</span> <span class="na">id=</span><span class="s">"post-&lt;?php the_ID(); ?&gt;"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"wrap"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"entry-attachment"</span><span class="nt">&gt;</span> <span class="cp">&lt;?php /** * Filter the default strip image attachment size. * * @since strip 1.0 * * @param string $image_size Image size. Default 'full'. */ $image_size = apply_filters( 'strip_attachment_size', 'full' ); echo wp_get_attachment_image( get_the_ID(), $image_size ); ?&gt;</span> <span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- .entry-attachment --&gt;</span> <span class="cp">&lt;?php // image navigation. ?&gt;</span> <span class="nt">&lt;nav</span> <span class="na">role=</span><span class="s">"navigation"</span> <span class="na">id=</span><span class="s">"image-navigation"</span> <span class="na">class=</span><span class="s">"image-navigation"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"previous"</span><span class="nt">&gt;</span><span class="cp">&lt;?php previous_image_link( false, __( '&lt;span class="meta-nav"&gt;&amp;larr;&lt;/span&gt; &lt;span class="text-nav"&gt;Previous panel&lt;/span&gt;', 'strip' ) ); ?&gt;</span><span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"next"</span><span class="nt">&gt;</span><span class="cp">&lt;?php next_image_link( false, __( '&lt;span class="meta-nav"&gt;&amp;rarr;&lt;/span&gt; &lt;span class="text-nav"&gt;Next panel&lt;/span&gt;', 'strip' ) ); ?&gt;</span><span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"post-parent-title"</span><span class="nt">&gt;</span> <span class="cp">&lt;?php printf( '&lt;a href="%s" class="post-parent-title"&gt;%s&lt;/a&gt;', esc_url( get_permalink( $post-&gt;post_parent ) ), esc_html( get_the_title( $post-&gt;post_parent ) ) ); ?&gt;</span> <span class="nt">&lt;/nav&gt;</span> <span class="nt">&lt;/nav&gt;</span><span class="c">&lt;!-- #image-navigation --&gt;&lt;!-- #image-navigation --&gt;</span> <span class="cp">&lt;?php if ( has_excerpt() ) : ?&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"entry-caption"</span><span class="nt">&gt;</span> <span class="cp">&lt;?php the_excerpt(); ?&gt;</span> <span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- .entry-caption --&gt;</span> <span class="cp">&lt;?php endif; ?&gt;</span> <span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- .entry-content --&gt;</span> <span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- .entry-wrap --&gt;</span> <span class="nt">&lt;/article&gt;</span><span class="c">&lt;!-- #post-## --&gt;</span> <span class="cp">&lt;?php // If comments are open or we have at least one comment, load up the comment template (disabled). // if ( comments_open() || '0' !== get_comments_number() ) { // comments_template(); // } ?&gt;</span> <span class="cp">&lt;?php endwhile; // end of the loop. ?&gt;</span> <span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- #content --&gt;</span> <span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- #primary --&gt;</span> <span class="cp">&lt;?php get_footer(); ?&gt;</span></code></pre></figure> <p>Now we can navigate through images with keyboard arrows.</p> <figure class="half"> <a href="/images/single_panel-image-view_01.png"><img src="/images/single_panel-image-view_01.png" /></a> <a href="/images/single_panel-image-view_03.png"><img src="/images/single_panel-image-view_03.png" /></a> <figcaption>i.e. Two images panels.</figcaption> </figure> <h2 id="limitations">Limitations</h2> <p>However, you cannot reuse the same image in different posts since the parent link will direct you to the original post where that image appeared first. This is explained in the <a href="https://codex.wordpress.org/Gallery_Shortcode#Developers_-_Things_to_consider">Codex</a>:</p> <blockquote> <p>The default expected behavior for a gallery that has no explicit IDs stated is to add all images that have the post as post parent assigned. In other words, add all images that were uploaded using the “Add media” button/link on this post edit screen. Keep in mind that this as well means that every attachment added to that post later on will be interpreted to be part of the gallery. No matter if it was displayed as plain attachment or not.</p> </blockquote> <figure class="highlight"><pre><code class="language-html" data-lang="html"> $attachments = get_children( array( 'post_parent' =&gt; $attr['id'], 'post_status' =&gt; 'inherit', 'post_type' =&gt; 'attachment', 'post_mime_type' =&gt; 'image', 'order' =&gt; $attr['order'], 'orderby' =&gt; $attr['orderby'], ) );</code></pre></figure> <p>I also noticed that while testing, a comic post would display all the panels uploaded at the same time, including those that weren’t part of a given post. Now that could create confusion if you were to change your images or changed and re uploaded panels at a different date.</p> <blockquote> <p>an attachment image is attached to its parent post and even has the parent post slug in its URL. This makes it tricky to really have the same attachment in more than one place. — Samuel Wood (<a href="http://ottopress.com">OTTO on WordPress</a>)</p> </blockquote> <p>Probably an edge case, but it is better to avoid re-using the same upload in different posts.</p> <h2 id="links">Links</h2> <h5 id="otto-on-wordpress-photo-gallery-primer-may-25-2011-httpottopresscom2011photo-gallery-primer">Otto on WordPress. “Photo Gallery Primer”, May 25, 2011 <a href="http://ottopress.com/2011/photo-gallery-primer/">http://ottopress.com/2011/photo-gallery-primer/</a></h5> <h5 id="httpwordpressstackexchangecomquestions99460get-children-wp-get-attachment-imagelq1"><a href="http://wordpress.stackexchange.com/questions/99460/get-children-wp-get-attachment-image?lq=1">http://wordpress.stackexchange.com/questions/99460/get-children-wp-get-attachment-image?lq=1</a></h5> <h5 id="httpwordpressstackexchangecomquestions82970gallery-inside-one-post"><a href="http://wordpress.stackexchange.com/questions/82970/gallery-inside-one-post">http://wordpress.stackexchange.com/questions/82970/gallery-inside-one-post</a></h5> <h5 id="smashing-magazine--better-image-management-with-wordpress"><a href="https://www.smashingmagazine.com/2011/05/better-image-management-practices-with-wordpress/">Smashing Magazine — Better Image Management With WordPress</a></h5> <p class="notice">Notes: You can find the WP gallery shortcode in <a href="https://core.trac.wordpress.org/browser/tags/4.2.2/src/wp-includes/media.php#L0">wp-includes/media.php</a>.</p> Fri, 09 Jun 2017 00:00:00 +0000 https://silentcomics.com/wordpress/tweaking-the-WP-built-in-gallery/ https://silentcomics.com/wordpress/tweaking-the-WP-built-in-gallery/ WP gallery PHP code snippet WordPress