Usable Shortcodes for Template Median UI

{tocify} $title={Table of contents}

In this article, I will introduce you to pre-formatted Shortcodes that can be added to the Median UI Template. Note that these Shortcodes only work if you use Median UI 1.6, higher or lower versions cannot use.

Download Template Median UI 1.6 here

The way to add these codes is very simple, you just need to add Posts or Pages and then switch to HTML View to add them, pay attention to change the parts you color .

Add captioned images

<table class="tr-caption-container">
  <tbody>
    <tr>
      <td>
        <div class="zmImg"><img alt="Thẻ Alt" class="fullImg" src="URL hình ảnh" onclick="return false"></div>
      </td>
    </tr>
    <tr>
      <td class="tr-caption">Chú thích viết tại đây</td>
    </tr>
  </tbody>
</table>

Demo

Demo more images with captions

Images with grid layout

It will display more images, save more space and look better than displaying 1 image in 1 row.

<div class="psImg grImg">
  <div class="zmImg"><img alt="Image Alt tags 1" class="lazy loaded" data-src="URL 1" src="URL 1" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Image Alt tags 2" class="lazy loaded" data-src="URL 2" src="URL 2" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Image Alt tags 3" class="lazy loaded"data-src="URL 3" src="URL 3" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Image Alt tags 4" class="lazy loaded" data-src="URL 4" src="URL 4" onclick="return false" lazied=""></div>
</div>

Many images are collapsed

When you have a lot of images but only want to show certain photos, users need to click see all to display them all.

<input class="inImg hidden" id="for-hideImage" type="checkbox">
<div class="psImg hdImg">
  <div class="zmImg"><img alt="Image Alt tags 1" class="lazy loaded" data-src="URL 1" src="URL 1" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Image Alt tags 2" class="lazy loaded" data-src="URL 2" src="URL 2" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Image Alt tags 3" class="lazy loaded" data-src="URL 3" src="URL 3" onclick="return false" lazied=""></div>
  <div class="btImg">
    <div class="zmImg"><img alt="Image Alt tags 4" class="lazy loaded" data-src="URL 4" src="URL 4" onclick="return false" lazied=""></div>
    
    <!--[ Button image to activate ]-->
    <label for="for-hideImage" aria-label="Show all">Show all</label>

  </div>
  <!--[ Hide the rest image here ]-->
  <div class="psImg shImg">
    <div class="zmImg"><img alt="Image Alt tags 5" class="lazy loaded" data-src="URL 5" src="URL 5" onclick="return false" lazied=""></div>
    <div class="zmImg"><img alt="Image Alt tags 6" class="lazy loaded" data-src="URL 6" src="URL 6" onclick="return false" lazied=""></div>
    <div class="zmImg"><img alt="Image Alt tags 7" class="lazy loaded" data-src="URL 7" src="URL 7" onclick="return false" lazied=""></div>
    <div class="zmImg"><img alt="Image Alt tags 8" class="lazy loaded" data-src="URL 8" src="URL 8" onclick="return false" lazied=""></div>
  </div>
</div>

Images with scrolling layout

With this layout, your photos will display up to 3 images per row on the Desktop, can display multiple rows. On Mobile photos will display in a single row and can be dragged horizontally to see all photos.

<!--[ Scroll Image ]-->
<div class="psImg scImg scrlH">
  <div class="zmImg"><img alt="Image Alt tags 1" class="lazy loaded" data-src="URL 1" src="URL 1" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Image Alt tags 2" class="lazy loaded" data-src="URL 2" src="URL 2" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Image Alt tags 3" class="lazy loaded" data-src="URL 3" src="URL 3" onclick="return false" lazied=""></div>
</div>

Tab post

<!--[ Active function ]-->
<input class='tbIn hidden' id='fTabs-1' type='radio' name='postTabs' checked>
<input class="tbIn hidden" id="fTabs-2" name="postTabs" type="radio" />
<input class="tbIn hidden" id="fTabs-3" name="postTabs" type="radio" />

<!--[ Tabs header/title ]-->
<div class="tbHd scrlH">
  <!--[ Change atribute data-text='...' to replace tabs title ]-->
  <label data-text="Tab 1"></label>
  <label data-text="Tab 2"></label>
  <label data-text="Tab 3"></label>
</div>

<div class="tbCn">
  <!--[ Tabs content ]-->
  <div class="tbText-1">Tabs content 1
    

  </div>
  
  <!--[ Tabs content ]-->
  <div class="tbText-2">Tabs content 2
  </div>
  <!--[ Tabs content ]-->
  <div class="tbText-3">Tabs content 3
  </div>
</div>
    
  
  
    

Demo

Contents tab 1

Contents tab 2

Contents tab 3

Create related posts

However, here is how to create related posts manually. We will use it in case we want to display the article as we want at any position in the article.

<div class="pRelate notranslate">
  <!--[ Related title ]-->
  <b>Related posts:</b>

  <ul>
    <li><a href="URL 1">Template Median UI AMP 1.6</a></li>
    <li><a href="URL 2">Font Template Median UI</a></li>
    <li><a href="URL 3">Short code Template Median UI</a></li>
  </ul>
</div>

Demo

Related posts:

• Template Median UI AMP 1.6
• Font Template Median UI
• Short code Template Median UI

Paragraph

You just need <hr>to add anywhere you want to break a paragraph with a 3-dot vinegar like below.

---

Indent at the beginning of a line

Here's an example of an auto-indented paragraph in Median UI. Use the code below to do this.

<p class="pIndent">Content/p>

Big letters at the beginning of the line

DThis is an example of a Drop Cap, I don't know what it's called in Vietnamese, so I'll just call it big letters. Use the code below to do this.

<p><span class="dropCap">C</span>ontent</p>

Excerpt

This is an example of a quote, this is usually used to quote sources from elsewhere, but can also be used to decorate the article in a normal way.

<blockquote class="s-1 notranslate">Content</blockquote>

Board

The biggest headache when using tables is that on mobile, it will look very ugly when there are too many columns or too long rows. In Median UI 1.6 this problem has been fixed. The table will be dragged horizontally on both mobile and desktop when the row is too long or many columns.

<div class="table">
  <table style="white-space: nowrap;">
    <thead>
      <tr>
        <th>No</th>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Data table 1</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Data table 2</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Data table 3</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Data table 4</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
    </tbody>
  </table>
</div>

Demo

No	Column 1	Column 2	Column 3	Column 4	Column 5
1	Data table 1	0.000.000	0.000.000	0.000.000	0.000.000
2	Data table 2	0.000.000	0.000.000	0.000.000	0.000.000
3	Data table 3	0.000.000	0.000.000	0.000.000	0.000.000
4	Data table 4	0.000.000	0.000.000	0.000.000	0.000.000

Manual Table of Contents

Table of Content (TOC) will be added automatically under H1 - H6 tags as you can see on the right side of this article. However, you can also add a hand if you don't want it to automatically display all.

With this manual you need to add id=...on each title tag like<h2 id="Blockquote">

<details class="sp toc" open="">
  <summary data-show="Show" data-hide="Hide">Contents</summary>  
  <div class="toC">
    <ol>
      <li><a href="#Image_with_Caption_and_Auto_Lightbox">Image with Caption</a></li>
      <li><a href="#Manual_Related_Post">Manual Related Post</a></li>
      <li><a href="#Post_Break">Post Break</a></li>
      <li><a href="#Blockquote">Blockquote</a></li>
    </ol>

    <!--[ Sample with subheading ]-->
    <p>With sub heading</p>
    <ol>
      <li><a href="javascript:;">Heading title</a>
        <ol>
          <li><a href="javascript:;">Subheading 1</a></li>
          <li><a href="javascript:;">Subheading 2</a></li>
          <li><a href="javascript:;">Subheading 3</a></li>
        </ol>
      </li>
    </ol>
  </div>
</details>
<style>
  .fixH {display: none !important;}
</style>

Demo

Contents

1. Image with Caption
2. Manual Related Post
3. Post Break
4. Blockquote

With sub heading

1. Heading_title
   1. Subheading 1
   2. Subheading 2
   3. Subheading 3

Semi-automatic table of contents

This table of contents will also automatically get from the H1 - H6 tags, but semi-automatically because it must add code to the position you want to display.

<details class='sp toc'>
  <summary data-show='Show' data-hide='Hide'>Table of Contents</summary>  
  <div class='toC' id='toContent'></div>
</details>
<!--[ Script to activate ToC ]-->
<script>document.addEventListener('DOMContentLoaded', () =>
  new TableOfContents({
      from: document.querySelector('#postBody'),
      to: document.querySelector('#toContent')
  }).generateToc()
);</script>

Demo

Table of Contents

1. Add captioned images
2. Images with grid layout
3. Many images are collapsed
4. Images with scrolling layout
5. Tab post
6. Create related posts
7. Paragraph
8. Indent at the beginning of a line
9. Big letters at the beginning of the line
10. Excerpt
11. Board
12. Manual Table of Contents
13. Semi-automatic table of contents
14. Write code
15. Hide content
16. Accordion / Toggle Menu
17. Notes (notes)
18. External Link
19. Button
20. Download Link
21. Lazy Youtube
22. Citation of source

Write code

If you want to display the code in the article, you can do it in 3 ways. The first way is to insert codelike this with the <code>code</code>. The second way we will do the following, corresponding to each piece of code is also how it displays:

However, it should be noted that it must be converted <to <and >into >before adding it.

<div class="pre preH"><pre>Code here</pre></div>

<div class="pre html"><pre>HTML here</pre></div>

<div class="pre js"><pre>JS here</pre></div>

<div class="pre css"><pre>CSS here</pre></div>

There is also a third way is to add Multi Tabs Code as follows:

<div class="pre tb">
  <!--[ Active function ]-->
  <input class="prei hidden" id="preT-1" type="radio" name="preTab" checked="" wfd-invisible="true">
  <input class="prei hidden" id="preT-2" type="radio" name="preTab" wfd-invisible="true">
  <input class="prei hidden" id="preT-3" type="radio" name="preTab" wfd-invisible="true">
  <!--[ Header/title ]-->
  <div class="preH tbHd scrlH">
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for="preT-1" data-text="HTML"></label>
    <label for="preT-2" data-text="CSS"></label>
    <label for="preT-3" data-text="JS"></label>
  </div>

  <!--[ Content ]-->
  <div class="preC-1" wfd-invisible="true">
    <pre>HTML here</pre>
  </div>
  <div class="preC-2">
    <pre>CSS here</pre>
  </div>
  <div class="preC-3" wfd-invisible="true">
    <pre>JS here</pre>
  </div>
</div>

CSS here

JS here

Hide content

<details class="sp notranslate">
  <summary data-show="Show" data-hide="Show">Content:</summary>
  <p>This is the demo content for the hidden content section. This feature is available in Median UI 1.6.</p><div class="widget HTML" data-version="2" id="HTML02">
<div class="widget-content">
<div class="adB" data-text="Ads go here"></div>
<script wfd-invisible="true">/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById('postBody'); var midAd02 = document.getElementById('HTML02');var showAd02 = tgt.getElementsByTagName('p'); if (showAd02.length > 0) {insertAfter(midAd02,showAd02[20]);}; /*]]>*/</script>
</div>
</div>
</details>

Demo

Content:

This is the demo content for the hidden content section. This feature is available in Median UI 1.6.

Accordion / Toggle Menu

<div class="showH"> 
  <!--[ Accordion line 1 ]--> 
  <details class="ac"> 
    <summary>Accordion line 1</summary> 
    <div class="aC"> 
      <p>Epcot is an amusement park at Walt Disney World Resort that features exciting attractions, international pavilions, and fireworks. Award-winning and seasonal specials.</p> 
    </div> 
  </details> 
  
  <!--[ Accordion line 2 ]--> 
  <details class="ac"> 
    <summary>Accordion line 2</summary> 
    <div class="aC"> 
      <p>Epcot is an amusement park at Walt Disney World Resort with interesting attractions, international pavilion and fireworks. 
    Award-winning and special seasonal events.</p> </div>
  Award-winning and special seasonal events.</p> </details>
   
  <!--[ Accordion line 3 ]--> 
  <details class="ac"> 
    <summary>Accordion line 3</summary> 
    <div class="aC"> 
      <p>Epcot is an amusement park The location at Walt Disney World Resort features exciting attractions, international pavilions, and fireworks. Award-winning and seasonal specials.</p> 
    </div> 
  </details> 
  
  <!--[ Accordion line 4 ]--> 
  <details class="ac alt"> 
    <summary>Accordion line 4</summary> 
    <div class="aC"> 
      <p>Epcot is an amusement park at Walt Disney World Resort with interesting attractions, 
    Award-winning and special seasonal events.</p> </div>
  </details>
</div>

Demo

Accordion line 1

Epcot is an amusement park at Walt Disney World Resort that features exciting attractions, international pavilions, and fireworks. Award-winning and special seasonal events.

Accordion line 2

Epcot is an amusement park at Walt Disney World Resort that features exciting attractions, international pavilions, and fireworks. Award-winning and special seasonal events.

Accordion line 3

Epcot is an amusement park at Walt Disney World Resort that features exciting attractions, international pavilions, and fireworks. Award-winning and special seasonal events.

Accordion line 4

Epcot is an amusement park at Walt Disney World Resort that features exciting attractions, international pavilions, and fireworks. Award-winning and special seasonal events.

Notes (notes)

Epcot is an amusement park at Walt Disney World Resort that features exciting attractions, international pavilions, and fireworks. Award-winning and special seasonal events.

<p class="note notranslate">Epcot is an amusement park at Walt Disney World Resort that features exciting attractions, international pavilions, and fireworks. Award-winning and special seasonal events.</p>

Warning!
Epcot is an amusement park at Walt Disney World Resort that features exciting attractions, international pavilions, and fireworks. Award-winning and special seasonal events.

<p class="note wr notranslate"><b>Warning!</b><br>Epcot is an amusement park at Walt Disney World Resort that features exciting attractions, international pavilions, and fireworks. Award-winning and special seasonal events.</p>

External Link

An indication to the user that it is a link out.

<a class="extL" href="javascript:;">Sample external link</a>

Demo

Sample external link

Button

Button

<a class="button" href="javascript:;">Button</a>

Download

<a class="button ln" href="javascript:;"><i class="icon dl"></i>Download</a>

Download

<a class="button" href="javascript:;"><i class="icon dl"></i>Download</a>

Demo Download

<div class="btnF">
  <a class="button ln" href="javascript:;">Demo</a>
  <a class="button" href="javascript:;"><i class="icon dl"></i>Download</a>
</div>

Download Link

file_name.zip 200kb

<div class="dlBox">
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class="fT" data-text="zip"></span>
  <div class="fN">
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class="fS">200kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class="button" aria-label="Download" href="javascript:;"><i class="icon dl"></i></a>
</div>

Lazy Youtube

Embed Youtube easily and Lazy loads on arrival.

<div class="lazyYt" data-embed="mNOdyNNRSrM">
  <div class="play">
    <svg viewBox="0 0 213.7 213.7"><polygon class="t" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon><circle class="c" cx="106.8" cy="106.8" r="103.3"></circle></svg>
  </div>
<img class="lazy loaded" data-src="https://img.youtube.com/vi/mNOdyNNRSrM/sddefault.jpg" src="https://img.youtube.com/vi/mNOdyNNRSrM/sddefault.jpg" alt="Youtube video" lazied=""></div>

Citation of source

Used to cite the source at the bottom of the page.

Source:
www.themerum.com

<p class="pRef">Source:<br>www.themerum.com</p>