<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Content on example</title><link>https://foxihd.github.io/hugo-foxx/en/tags/content/</link><description>Recent Posts in Content on example</description><generator>Hugo 0.161.1</generator><language>en-GB</language><lastBuildDate>Tue, 19 May 2026 16:10:01 +0000</lastBuildDate><atom:link href="https://foxihd.github.io/hugo-foxx/en/tags/content/index.xml" rel="self" type="application/rss+xml"/><item><title>Authoring Cover Images and Audio Articles</title><link>https://foxihd.github.io/hugo-foxx/en/post/authoring-cover-images-and-audio-article/</link><pubDate>Sat, 22 Feb 2025 00:00:00 +0000</pubDate><dc:creator>Author Name</dc:creator><guid>https://foxihd.github.io/hugo-foxx/en/post/authoring-cover-images-and-audio-article/</guid><description>A guide on adding cover images and audio articles</description><content:encoded>&lt;h2 id="adding-cover-images"&gt;Adding Cover Images&lt;/h2&gt;
&lt;h3 id="assign-the-cover-images"&gt;Assign The Cover Images&lt;/h3&gt;
&lt;p&gt;To add a cover image to your article, you have two options:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Front Matter Method&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;You can use either &lt;code&gt;cover&lt;/code&gt; or &lt;code&gt;images&lt;/code&gt; parameter for the images source.
And &lt;code&gt;alt&lt;/code&gt;, &lt;code&gt;coverAlt&lt;/code&gt; or &lt;code&gt;imagesAlt&lt;/code&gt; parameter for alt text.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-yaml" data-lang="yaml"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nn"&gt;---&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nt"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;My Article&amp;#34;&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nt"&gt;images&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;images/my-cover.jpg&amp;#34;&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nt"&gt;alt&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;Description of the images&amp;#34;&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nn"&gt;---&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;ol start="2"&gt;
&lt;li&gt;Page Bundle Method&lt;/li&gt;
&lt;/ol&gt;
&lt;ul&gt;
&lt;li&gt;Create a folder for your post&lt;/li&gt;
&lt;li&gt;Name your image &lt;code&gt;cover.*&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Place it in the same folder as your content&lt;/li&gt;
&lt;li&gt;Set the alt text in your post frontmatter&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id="place-the-cover"&gt;Place The Cover&lt;/h3&gt;
&lt;p&gt;You can place your featured images in various layout, anywhere on article content with &lt;code&gt;{{&amp;lt; figure &amp;gt;}}&lt;/code&gt; shortcode:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-toml" data-lang="toml"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;figure&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;cover&amp;#34;&lt;/span&gt; &lt;span class="nx"&gt;caption&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;alt&amp;#34;&lt;/span&gt; &lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;This is freedom of authoring!&lt;/p&gt;

 
 &lt;figure &gt;
 &lt;input id="fig-873ba95f40751c50553ab2667dc36c7c-0" class="marginpar-ctrl" type="checkbox" aria-controls="the-fig-873ba95f40751c50553ab2667dc36c7c-0" hidden&gt;
 &lt;label for="fig-873ba95f40751c50553ab2667dc36c7c-0"&gt;&lt;/label&gt;
 &lt;span id="the-fig-873ba95f40751c50553ab2667dc36c7c-0" class="marginpar abs"&gt;
 
 Cat named Cooper with styrofoam on his fur due to electrostatic charge.
 
 &lt;/span&gt;
 
 &lt;img src="https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_and_styrofoam_%E2%80%93_electrostatic_charge_%28235112299%29.jpg"
 alt="Cat named Cooper with styrofoam on his fur due to electrostatic charge."
 title="Cat named Cooper with styrofoam on his fur due to electrostatic charge."aria-describedby="fig-873ba95f40751c50553ab2667dc36c7c-0"
 loading="lazy"
 &gt;
 &lt;/figure&gt;
&lt;h2 id="adding-audio-articles"&gt;Adding Audio Articles&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;Front Matter Method&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-yaml" data-lang="yaml"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nn"&gt;---&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nt"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;My Article&amp;#34;&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nt"&gt;audio&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;audio/my-audio.ogg&amp;#34;&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nn"&gt;---&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;ol start="2"&gt;
&lt;li&gt;Page Bundle Method&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;You can upload multiple audio format with this method:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Create a folder for your post&lt;/li&gt;
&lt;li&gt;Name your audio &lt;code&gt;audio.*&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Place it in the same folder as your content&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="page-bundle-method-examples"&gt;Page Bundle Method Examples&lt;/h2&gt;
&lt;p&gt;Here&amp;rsquo;s how your folder structure should look:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;content/
└── posts/
 └── my-article/
 ├── index.md
 ├── cover.jpg
 ├── audio.mp3
 └── audio.ogg
&lt;/code&gt;&lt;/pre&gt;</content:encoded><category>Authoring</category><enclosure url="https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_and_styrofoam_%E2%80%93_electrostatic_charge_%28235112299%29.jpg" length="0" type="image/jpeg"/></item></channel></rss>