Draft:Template:Article: Difference between revisions

From AbhiprayaVedi
No edit summary
No edit summary
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>
<includeonly>{{DISPLAYTITLE:{{{DisplayTitle|{{{Title|}}}}}}}}<!--
{{DISPLAYTITLE:{{{DisplayTitle|{{{Title|}}}}}}}}
--><div class="article-container" data-language="{{{Language|}}}">


<!-- Custom CSS for Modern Design -->
<!-- Article Header - Clean, No Duplication -->
<style>
<div class="article-header">
.article-container {
<div class="author-info"><span class="author-name">{{{Author|}}}</span><span class="date-info">{{#time:d-m-Y|{{{Date|}}}}}</span><span class="category-badge">{{{Category|}}}</span></div>
    max-width: 1200px;
</div>
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


.article-header {
<!-- Introduction - Compact -->
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
<div class="introduction-section">
    color: white;
{{{Introduction|}}}
    padding: 40px;
</div>
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}


.article-meta-box {
<!-- Two Column Layout -->
    background: linear-gradient(135deg, #e0e7ff 0%, #cfd9ff 100%);
<div class="content-wrapper">
    border-left: 5px solid #4c51bf;
    padding: 20px;
    margin: 25px 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}


.introduction-box {
<!-- Main Content -->
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
<div class="main-content">
    border-left: 5px solid #f59e0b;
    padding: 25px;
    margin: 25px 0;
    border-radius: 8px;
    font-size: 1.15em;
    line-height: 1.9;
    color: #78350f;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}


.left-sidebar {
<!-- Image 1 - Left Aligned -->
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
{{#if:{{{Image1|}}}|
    border: 2px solid #fbbf24;
<div class="image-left">
    border-radius: 10px;
[[File:{{{Image1}}}|thumb|400px|{{{Image1Caption|}}}]]
    padding: 20px;
</div>
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
|}}
}


.right-sidebar {
<!-- Article Text -->
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
<div class="article-text">
    border: 2px solid #34d399;
{{{Content|}}}
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(52, 211, 153, 0.2);
}
 
.sidebar-title {
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 1.1em;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0,0,0,0.1);
}
 
.highlight-box {
    background: white;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    border-left: 4px solid #10b981;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
 
.keypoint-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
 
.keypoint-list li {
    padding: 10px;
    margin-bottom: 8px;
    background: white;
    border-radius: 6px;
    border-left: 4px solid #f59e0b;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
 
.keypoint-list li:before {
    content: "▸ ";
    color: #f59e0b;
    font-weight: bold;
    margin-right: 8px;
}
 
.source-box {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #fbbf24;
    border-radius: 8px;
    padding: 18px;
    margin: 30px 0;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15);
}
 
.author-bio-box {
    background: linear-gradient(135deg, #e0e7ff 0%, #cfd9ff 100%);
    padding: 25px;
    margin: 35px 0 25px 0;
    border-top: 4px solid #667eea;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}
 
.article-content {
    font-size: 1.08em;
    line-height: 1.9;
    color: #1f2937;
    text-align: justify;
}
 
.article-content p {
    margin-bottom: 1.2em;
}
 
@media (max-width: 768px) {
    .article-layout {
        flex-direction: column !important;
    }
   
    .left-sidebar, .right-sidebar {
        flex: 1 1 auto !important;
        margin-bottom: 20px;
    }
}
</style>
 
<div class="article-container">
 
<!-- Article Header -->
<div class="article-header">
<h1 style="margin: 0 0 15px 0; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">{{{DisplayTitle|{{{Title|}}}}}}</h1>
<div style="font-size: 1.1em; opacity: 0.95;">
{{#if:{{{OriginalAuthor|}}}|
<strong>യഥാർത്ഥ രചയിതാവ്:</strong> {{{OriginalAuthor|}}} | <strong>പരിഭാഷ:</strong> {{{Author|}}}
|
<strong>രചയിതാവ്:</strong> {{{Author|}}}
}}
| <strong>തീയതി:</strong> {{{Date|}}} | <strong>വിഭാഗം:</strong> {{{Category|}}}
</div>
</div>
</div>


<!-- Main Content Area with Sidebars -->
<!-- Additional Images -->
<div class="article-layout" style="display: flex; gap: 25px; margin: 20px 0;">
{{#if:{{{Image2|}}}|
 
<div class="content-image">
<!-- Left Sidebar - Key Points -->
[[File:{{{Image2}}}|thumb|center|650px|{{{Image2Caption|}}}]]
{{#if:{{{KeyPoint1|}}}|
<div class="left-sidebar" style="flex: 0 0 220px;">
<div class="sidebar-title" style="color: #92400e;">📌 പ്രധാന പോയിന്റുകൾ</div>
<ul class="keypoint-list">
{{#if:{{{KeyPoint1|}}}|<li>{{{KeyPoint1|}}}</li>}}
{{#if:{{{KeyPoint2|}}}|<li>{{{KeyPoint2|}}}</li>}}
{{#if:{{{KeyPoint3|}}}|<li>{{{KeyPoint3|}}}</li>}}
{{#if:{{{KeyPoint4|}}}|<li>{{{KeyPoint4|}}}</li>}}
</ul>
</div>
</div>
|}}
|}}


<!-- Main Content Column -->
<!-- Source Attribution -->
<div class="main-content-column" style="flex: 1; min-width: 0;">
{{#if:{{{SourceName|}}}|
 
<div class="source-attribution">
<!-- Thumbnail -->
<strong>സ്രോതസ്സ്:</strong> {{{SourceName|}}}
{{#if:{{{Thumbnail|}}}|
{{#if:{{{OriginalAuthor|}}}| <strong>യഥാർത്ഥ രചയിതാവ്:</strong> {{{OriginalAuthor|}}}}}
<div style="float: right; margin: 0 0 20px 20px;">
{{#if:{{{SourceURL|}}}| • [{{{SourceURL|}}} യഥാർത്ഥ ലേഖനം]}}
[[File:{{{Thumbnail}}}|thumb|350px|{{{ThumbnailCaption|}}}]]
</div>
</div>
|}}
|}}


<!-- Introduction Section -->
<div class="introduction-box">
{{{Introduction|}}}
</div>
</div>


<!-- Main Article Content -->
<!-- Right Sidebar -->
<div class="article-content">
<div class="right-sidebar">
{{#if:{{{Image1|}}}|
<!-- Content with embedded image -->
{{{Content|}}}


<div style="margin: 35px 0; clear: both;">
<!-- Author Infobox -->
[[File:{{{Image1}}}|thumb|center|700px|{{{Image1Caption|}}}]]
<div class="author-infobox">
{{#if:{{{Thumbnail|}}}|
<div class="author-photo">
[[File:{{{Thumbnail}}}|frameless|280px]]
</div>
</div>
|
|}}
<!-- Content without image -->
<div class="author-name-box">[[{{{Author|}}}|{{{Author|}}}]]</div>
{{{Content|}}}
{{#if:{{{Author_Bio|}}}|
}}
<div class="author-bio">
</div>
{{{Author_Bio|}}}
 
<!-- Additional Images -->
{{#if:{{{Image2|}}}|
<div style="margin: 35px 0;">
<div style="margin: 25px 0;">
[[File:{{{Image2}}}|thumb|center|650px|{{{Image2Caption|}}}]]
</div>
{{#if:{{{Image3|}}}|
<div style="margin: 25px 0;">
[[File:{{{Image3}}}|thumb|center|650px|{{{Image3Caption|}}}]]
</div>
}}
</div>
</div>
|}}
|}}
</div>
</div>


<!-- Right Sidebar - Highlights -->
<!-- Highlights -->
{{#if:{{{Highlight1|}}}|
<div class="right-sidebar" style="flex: 0 0 240px;">
<div class="sidebar-title" style="color: #065f46;">💡 പ്രത്യേക ശ്രദ്ധയ്ക്ക്</div>
{{#if:{{{Highlight1|}}}|
{{#if:{{{Highlight1|}}}|
<div class="highlight-box">
<div class="highlight-box">
{{{Highlight1|}}}
<div class="highlight-title">💡</div>
<div class="highlight-text">{{{Highlight1|}}}</div>
</div>
</div>
}}
|}}
 
{{#if:{{{Highlight2|}}}|
{{#if:{{{Highlight2|}}}|
<div class="highlight-box">
<div class="highlight-box">
{{{Highlight2|}}}
<div class="highlight-title">💡</div>
<div class="highlight-text">{{{Highlight2|}}}</div>
</div>
</div>
}}
|}}
{{#if:{{{Highlight3|}}}|
 
<div class="highlight-box">
<!-- Key Points as Floating Box -->
{{{Highlight3|}}}
{{#if:{{{KeyPoint1|}}}|
</div>
<div class="keypoints-float">
}}
<div class="keypoints-header">📌</div>
<ul class="keypoints-list">
{{#if:{{{KeyPoint1|}}}|<li>{{{KeyPoint1|}}}</li>}}
{{#if:{{{KeyPoint2|}}}|<li>{{{KeyPoint2|}}}</li>}}
{{#if:{{{KeyPoint3|}}}|<li>{{{KeyPoint3|}}}</li>}}
{{#if:{{{KeyPoint4|}}}|<li>{{{KeyPoint4|}}}</li>}}
</ul>
</div>
</div>
|}}
|}}
Line 238: Line 96:
</div>
</div>


<!-- Source Attribution -->
{{#if:{{{SourceName|}}}|
<div class="source-box">
<div style="font-weight: bold; color: #92400e; margin-bottom: 8px; font-size: 1.1em;">📰 സ്രോതസ്സ് (Source)</div>
<div style="color: #78350f; line-height: 1.7;">
<strong>പ്രസിദ്ധീകരണം:</strong> {{{SourceName|}}}
{{#if:{{{OriginalDate|}}}|<br/><strong>യഥാർത്ഥ തീയതി:</strong> {{{OriginalDate|}}}}}
{{#if:{{{SourceURL|}}}|<br/><strong>ലിങ്ക്:</strong> [{{{SourceURL|}}} യഥാർത്ഥ ലേഖനം കാണുക]}}
{{#if:{{{TranslationType|}}}|<br/><strong>തരം:</strong> {{{TranslationType|}}}}}
{{#if:{{{PermissionNote|}}}|<br/><em>{{{PermissionNote|}}}</em>}}
</div>
</div>
</div>
</div>
|}}


<!-- Author/Translator Bio -->
<!-- ================================================================
{{#if:{{{Author_Bio|}}}|
    CATEGORIES
<div class="author-bio-box">
   
<div style="font-size: 1.3em; color: #4338ca; font-weight: bold; margin-bottom: 15px;">
    NOTE on Malayalam DEFAULTSORT bug:
{{#if:{{{OriginalAuthor|}}}|
    MediaWiki's DEFAULTSORT cannot sort Malayalam Unicode text correctly —
✍️ പരിഭാഷകനെക്കുറിച്ച് (About the Translator)
    it only reads the first character, so categories show truncated names.
|
   
✍️ രചയിതാവിനെക്കുറിച്ച് (About the Author)
    FIX: We use the "sort key" parameter directly on each [[Category:]] link.
    The sort key is the DisplayTitle passed explicitly, which makes the full
    title appear correctly in the category listing.
    ================================================================ -->
 
[[Category:{{{Category|}}}|{{{DisplayTitle|{{{Title|}}}}}}]]
[[Category:Articles|{{{DisplayTitle|{{{Title|}}}}}}]]
{{#if:{{{Language|}}}|[[Category:{{{Language}}} articles|{{{DisplayTitle|{{{Title|}}}}}}]]|}}
 
<!-- English-to-Malayalam parallel categories -->
{{#switch:{{{Category|}}}
|Politics=[[Category:രാഷ്ട്രീയം|{{{DisplayTitle|{{{Title|}}}}}}]]
|Society=[[Category:സമൂഹം|{{{DisplayTitle|{{{Title|}}}}}}]]
|Culture=[[Category:സംസ്കാരം|{{{DisplayTitle|{{{Title|}}}}}}]]
|Science=[[Category:ശാസ്ത്രം|{{{DisplayTitle|{{{Title|}}}}}}]]
|Literature=[[Category:സാഹിത്യം|{{{DisplayTitle|{{{Title|}}}}}}]]
|Cinema=[[Category:സിനിമ|{{{DisplayTitle|{{{Title|}}}}}}]]
|Environment=[[Category:പരിസ്ഥിതി|{{{DisplayTitle|{{{Title|}}}}}}]]
|Economics=[[Category:സമ്പദ്‌വ്യവസ്ഥ|{{{DisplayTitle|{{{Title|}}}}}}]]
|Opinion=[[Category:അഭിപ്രായം|{{{DisplayTitle|{{{Title|}}}}}}]]
}}
}}
</div>
<div style="line-height: 1.8; color: #312e81;">
{{{Author_Bio|}}}
</div>
</div>
|}}
</div>


<!-- Categories -->
[[Category:{{{Category|}}}]]
[[Category:Articles]]
{{#if:{{{OriginalAuthor|}}}|
{{#if:{{{OriginalAuthor|}}}|
[[Category:Articles by {{{OriginalAuthor|}}}]]
[[Category:Articles by {{{OriginalAuthor|}}}|{{{DisplayTitle|{{{Title|}}}}}}]]
[[Category:Translations]]
[[Category:Translations|{{{DisplayTitle|{{{Title|}}}}}}]]
[[Category:Translated by {{{Author|}}}]]
[[Category:Translated by {{{Author|}}}|{{{DisplayTitle|{{{Title|}}}}}}]]
|
|
[[Category:Articles by {{{Author|}}}]]
[[Category:Articles by {{{Author|}}}|{{{DisplayTitle|{{{Title|}}}}}}]]
}}
}}
</includeonly>
</includeonly>


<noinclude>
<noinclude>
== Article Template Documentation ==
== Ver3: Fix for Category Display Names ==
 
=== The Malayalam DEFAULTSORT Problem ===
 
`{{DEFAULTSORT:}}` does NOT work correctly with Malayalam (or any Unicode script that is non-Latin). MediaWiki's sort key mechanism only reads the first Unicode code point, which is why categories were showing only the first letter/character of the title.
 
=== The Fix ===
 
Instead of using `DEFAULTSORT`, we now pass the sort key '''directly on each category link''' using the pipe syntax:
 
<pre>
[[Category:Articles|{{{DisplayTitle|{{{Title|}}}}}}]]
</pre>
 
This tells MediaWiki: "place this page in the category, and display it under the sort key equal to the DisplayTitle." Since MediaWiki renders the sort key as the display label in category listings, the full Malayalam title now appears correctly.


This template creates a modern, beautifully formatted article page with gradient hues and improved mobile responsiveness.
=== How it works ===


=== New Features ===
{| class="wikitable"
* Modern gradient color scheme with purple, yellow, and green hues
! Parameter !! Example value
* Improved mobile responsiveness
|-
* Enhanced typography and spacing
| Page name || <code>Something-In-The-Air</code>
* Shadow effects for depth
|-
* Better visual hierarchy
| DisplayTitle || <code>Something in the Air?</code>
* Smooth hover effects
|-
| Category shows || '''Something in the Air?''' ✓
|}


=== Usage ===
For Malayalam:
Same parameters as before, but with enhanced visual presentation.
{| class="wikitable"
! Parameter !! Example value
|-
| Page name || <code>Kerala-Climate-Change</code>
|-
| DisplayTitle || <code>കേരളത്തിലെ കാലാവസ്ഥാ വ്യതിയാനം</code>
|-
| Category shows || '''കേരളത്തിലെ കാലാവസ്ഥാ വ്യതിയാനം''' ✓
|}


[[Category:Templates]]
[[Category:Templates]]
</noinclude>
</noinclude>

Latest revision as of 18:56, 10 April 2026


Ver3: Fix for Category Display Names

The Malayalam DEFAULTSORT Problem

`` does NOT work correctly with Malayalam (or any Unicode script that is non-Latin). MediaWiki's sort key mechanism only reads the first Unicode code point, which is why categories were showing only the first letter/character of the title.

The Fix

Instead of using `DEFAULTSORT`, we now pass the sort key directly on each category link using the pipe syntax:

[[Category:Articles|{{{DisplayTitle|{{{Title|}}}}}}]]

This tells MediaWiki: "place this page in the category, and display it under the sort key equal to the DisplayTitle." Since MediaWiki renders the sort key as the display label in category listings, the full Malayalam title now appears correctly.

How it works

Parameter Example value
Page name Something-In-The-Air
DisplayTitle Something in the Air?
Category shows Something in the Air?

For Malayalam:

Parameter Example value
Page name Kerala-Climate-Change
DisplayTitle കേരളത്തിലെ കാലാവസ്ഥാ വ്യതിയാനം
Category shows കേരളത്തിലെ കാലാവസ്ഥാ വ്യതിയാനം