Show Posts In Articles In Joomla - Nicepage Documentation

<!DOCTYPE html> <html lang="en"> <head> <title>Show Posts In Articles In Joomla - Nicepage Documentation</title> <link rel="shortcut icon" href="//csite.nicepage.com/favicon.ico" type="image/x-icon"> <meta charset="utf-8" /> <meta name="Keywords" content=" "> <meta name="Description" content="You will need to install the Nicepage Editor Extension. Please watch the video about the installation of the Joomla Extension for more information. "> <meta property="og:type" content="article"> <meta property="og:url" content="https://nicepage.com/doc/83209/show-posts-in-articles-in-joomla"> <meta property="og:title" content="Show Posts In Articles In Joomla - Nicepage Documentation"> <meta property="og:image" content="https://static.nicepage.com/images/site/nicepage.jpg"> <meta property="og:description" content="You will need to install the Nicepage Editor Extension. Please watch the video about the installation of the Joomla Extension for more information. "> <meta property="og:site_name" content="Nicepage.com" /> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width"> <script src="//capp.nicepage.com/1662e8971b75e227453abf2b0c0bb260dcad244d/main-libs.js" ></script> <link href="//capp.nicepage.com/1662e8971b75e227453abf2b0c0bb260dcad244d/main-libs.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:200,300,400,700,800,900&subset=latin" rel="preload" as="font" /> <script> window.isAuthenticated = 0; window.useExternalGtmCode = 0; window.clientUserId = 0; window.clientUserName = ''; window.userCountryCode = ''; window.logPageEvent = 1; window.userHasAdsParams = 0; window.utmSourceFromReferrer = 0; window.currentLang = ''; window.baseUrl = 'html-templates'; window.currentUrl = ''; window.np_userId = ''; window.isAmplitudeInitialized = false; window.sha256Email = ''; function getCookieOrLocalStorage(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) { return c.substring(nameEQ.length, c.length); } } var lsValue = localStorage.getItem(name); return !!lsValue; } function sendAnalyticsData(eventType, props, cb) { var json = { data: {} }; json.userToken = np_userId; json.data.adsParams = $.cookie('AdsParameters'); json.data.ga = $.cookie('_ga'); json.data.gac = $.cookie('_gac_UA-88868916-2'); json.data.userAgent = navigator.userAgent; json.data.eventType = eventType; json.data.props = props; $.ajax({ 'type': 'POST', 'url': '/Feedback/SendAdsLog', 'contentType': 'application/json; charset=utf-8', 'data': JSON.stringify(json), 'dataType': 'json', 'complete': cb || function() {} }); } function initializeAmplitudeUser() { if (isAmplitudeInitialized) { return; } isAmplitudeInitialized = true; if (clientUserId > 0) { identifyAmplitudeUser(clientUserId, clientUserName); } else { identifyAmplitudeUser(null); } } function sendAmplitudeAnalyticsData(eventName, eventProperties, userProperties, callback_function) { initializeAmplitudeUser(); if (userProperties) { if(userProperties.utm_source || userProperties.utm_campaign) { var identify = new amplitude.Identify(); identify.setOnce("utm_campaign", userProperties.utm_campaign); identify.setOnce("utm_source", userProperties.utm_source); identify.setOnce("utm_content", userProperties.utm_content); identify.setOnce("utm_group", userProperties.utm_group); identify.setOnce("utm_term", userProperties.utm_term); identify.setOnce("utm_page", userProperties.utm_page); identify.setOnce("utm_page2", userProperties.utm_page); identify.setOnce("referrer", userProperties.referrer); amplitude.getInstance().identify(identify); userProperties.utm_source_last = userProperties.utm_source; userProperties.utm_campaign_last = userProperties.utm_campaign; userProperties.utm_content_last = userProperties.utm_content; userProperties.utm_group_last = userProperties.utm_group; userProperties.utm_term_last = userProperties.utm_term; userProperties.utm_page_last = userProperties.utm_page; } var userProps = objectWithoutProperties(userProperties, ["utm_campaign", "utm_source","utm_content", "utm_term", "utm_page", "utm_group", "referrer"]); amplitude.getInstance().setUserProperties(userProps); } if (!eventProperties) { eventProperties = {}; } eventProperties.WebSite = 'true'; eventProperties.IsAuthenticated = window.isAuthenticated; eventProperties.country_code = getCountryCode(); eventProperties.lang = window.currentLang || ''; var fullPageUrl = window.location.pathname.split('?')[0]; eventProperties.full_page_url = fullPageUrl; eventProperties.page_url = clearPageUrl(fullPageUrl); if (typeof callback_function === 'function') { amplitude.getInstance().logEvent(eventName, eventProperties, callback_function); } else { amplitude.getInstance().logEvent(eventName, eventProperties); } } function identifyAmplitudeUser(userId, token) { if (userId) { amplitude.getInstance().setUserProperties({ "Token": token, "UserId": userId }); } var identify = new amplitude.Identify(); amplitude.getInstance().identify(identify); if (userId) { amplitude.getInstance().setUserId(userId); } } function getUtmParamsFromUrl() { var hash = window.location.hash; var url = new URL(window.location.href); if (hash && hash.indexOf('utm_') >= 0) { url = new URL(window.location.origin + window.location.pathname + hash.replace('#', '?')); } if (!url.searchParams) { return ''; } return getUtmParams(url); } function hasGoogleIdFromUrl() { var url = new URL(window.location.href); if (!url.searchParams) { return false; } return !!url.searchParams.get('gclid'); } function sendAnalyticsFromUrl(referrer, pageType) { var urlIsAvailable = typeof URL === "function" || (navigator.userAgent.indexOf('MSIE') !== -1 && typeof URL === 'object'); if (!urlIsAvailable) { return; } var utmParams = getUtmParamsFromUrl(); if (!utmParams) { return; } var gclidFromUrl = utmParams.gclid; var utmParamsFromUrl = !!utmParams.utmSource || !!utmParams.utmCampaign || !!utmParams.gclid; if (!utmParamsFromUrl && userHasAdsParams) { utmParams = getUtmParamsFromCookie(); } var canLog = canLogToAmplitude(pageType); if (utmParamsFromUrl || utmSourceFromReferrer) { var fullPageUrl = window.location.pathname.split('?')[0]; var pageUrl = clearPageUrl(fullPageUrl); var userProps = { "utm_source": utmParams.utmSource, "utm_campaign": utmParams.utmCampaign, "utm_content": utmParams.utmContent, "utm_group": utmParams.utmGroup, "utm_term": utmParams.utmTerm, "utm_page": getUtmPageValue(pageUrl), "utm_lang": window.currentLang || '', "referrer": referrer }; if (gclidFromUrl) { var landingUrl = pageUrl.startsWith('/') && pageUrl !== '/' ? pageUrl.substr(1) : pageUrl; userProps.landing_page = landingUrl; var event = { 'Page': landingUrl, 'Url': window.location.href, 'utm_campaign_event': utmParams.utmCampaign, 'utm_group_event': utmParams.utmGroup } sendAmplitudeAnalyticsData('Landing Page', event, userProps); } else { var eventProps = { "utm_source": utmParams.utmSource, "utm_campaign": utmParams.utmCampaign, "utm_content": utmParams.utmContent, "utm_group": utmParams.utmGroup, "utm_term": utmParams.utmTerm }; if (utmParams.utmSource === "elastic") { sendAmplitudeAnalyticsData('Email Click', eventProps); } if (canLog) { sendAmplitudeAnalyticsData('Campaign', eventProps, userProps); } } } if (logPageEvent && canLog || (pageType === 'Pricing Page' && window.isValidCountry(true))) { var pageEventProps = { 'type': pageType, 'accepted_country': isValidCountry(), 'force_log': !canLog }; if (utmParams.gclid) { pageEventProps.googleClickId = utmParams.gclid; } sendAmplitudeAnalyticsData('Page View', pageEventProps); } } document.addEventListener('DOMContentLoaded', function () { if (location.href.indexOf('/frame/') === -1 && window.location.href.indexOf('skipCookie') === -1) { PureCookie.initCookieConsent(); } setCountryCode('https://location.nicepagesrv.com/country'); setUserIdCookie(); var referrer = ''; var pageType = 'Doc Article'; sendAnalyticsFromUrl(referrer, pageType); }); </script> <script> // Define dataLayer and the gtag function. window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } var consentDefaultValue = 'granted'; gtag('consent', 'default', { 'ad_storage': consentDefaultValue, 'ad_user_data': consentDefaultValue, 'ad_personalization': consentDefaultValue, 'analytics_storage': consentDefaultValue }); if (hasGoogleIdFromUrl()) { useExternalGtmCode = 1; } </script>  <script> if (useExternalGtmCode) { (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://load.api9.nicepage.com/nldlswob.js?st='+i+dl+'';f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','W76XGFR'); } else { (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-W76XGFR'); } </script>   <script> if(window.hideFacebookPixelCode !== true) { !function (f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments) }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s) }(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js'); var fbInitOptions = { em: '' }; if (clientUserId > 0) { fbInitOptions.external_id = clientUserId; } fbq('init', '251025992170426', fbInitOptions); fbq('track', 'PageView'); } </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=251025992170426&ev=PageView&noscript=1" /></noscript>   <script type="text/javascript"> (function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script") ;r.type="text/javascript" ;r.integrity="sha384-d/yhnowERvm+7eCU79T/bYjOiMmq4F11ElWYLmt0ktvYEVgqLDazh4+gW9CKMpYW" ;r.crossOrigin="anonymous";r.async=true ;r.src="https://cdn.amplitude.com/libs/amplitude-5.2.2-min.gz.js" ;r.onload=function(){if(!e.amplitude.runQueuedFunctions){ console.log("[Amplitude] Error: could not load SDK")}} ;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i) ;function s(e,t){e.prototype[t]=function(){ this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}} var o=function(){this._q=[];return this} ;var a=["add","append","clearAll","prepend","set","setOnce","unset"] ;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[] ;return this} ;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"] ;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c ;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"] ;function v(e){function t(t){e[t]=function(){ e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}} for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){ e=(!e||e.length===0?"$default_instance":e).toLowerCase() ;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]} ;e.amplitude=n})(window,document); amplitude.getInstance().init("878f4709123a5451aff838c1f870b849"); </script> <script> var shareasaleSSCID=shareasaleGetParameterByName("sscid");function shareasaleSetCookie(e,a,r,s,t){if(e&&a){var o,n=s?"; path="+s:"",i=t?"; domain="+t:"",S="";r&&((o=new Date).setTime(o.getTime()+r),S="; expires="+o.toUTCString()),document.cookie=e+"="+a+S+n+i+"; SameSite=None;Secure"}}function shareasaleGetParameterByName(e,a){a||(a=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var r=new RegExp("[?&]"+e+"(=([^&#]*)|&|#|$)").exec(a);return r?r[2]?decodeURIComponent(r[2].replace(/\+/g," ")):"":null}shareasaleSSCID&&shareasaleSetCookie("shareasaleSSCID",shareasaleSSCID,94670778e4,"/"); </script> <link rel="preconnect" href="https://images01.nicepagecdn.com" /> <link rel="preconnect" href="https://csite.nicepage.com" />  <script> window.serverSettings = { fbAppId: '290410448063109', googleAppId: '13150095650-mo8psu2colep6uv90a2mu6r87u87s35a.apps.googleusercontent.com' }; </script> <script src="https://accounts.google.com/gsi/client?hl=en" async></script> <script src="//csite.nicepage.com/Scripts/Site/auth-common.js?version=1662e8971b75e227453abf2b0c0bb260dcad244d" defer></script> <script> var T = new Object(); T['Post.Delete'] = 'Delete'; T['Loading'] = 'Loading'; T['Attachment.File.Limit.Error'] = 'You can attach only 5 files'; T['Attachment.General.Error'] = 'There is an error with the file or the file size exceeds the allowed limit (20MB). Try putting the file in a shared location and sending a link instead.'; T['Attachment.Insert'] = 'Insert Attachment'; T['Report.Spam.Success'] = 'Thank you for Report!'; </script> <link rel="canonical" href="https://nicepage.com/doc/83209/show-posts-in-articles-in-joomla" /> <style> @media (min-width: 1400px) { .container { width: 1370px; } } .col-sticky { position: sticky; top: 10px; } .col-widgets { max-height: calc(100vh - 50px); overflow-x: hidden; overflow-y: auto; } </style> <script> function getAcnhor() { return (document.URL.split('#').length > 1) ? document.URL.split('#')[1] : null; } function updateWaypoints() { var list = document.querySelector('.doc-waypoint-list'); if (!list) { return; } var items = list.querySelectorAll('.doc-waypoint-item'); if (!items.length) { return; } var i, active = 0; var scroller = document.documentElement; var height = scroller.clientHeight; var isScrollEnd = Math.abs(scroller.scrollTop + scroller.clientHeight - scroller.scrollHeight) < 1; var top = 30; // heading top offest var viewHeight = height * 0.5; // find visible anchor in viewport for (i = 0; i < items.length; i++) { var item = items[i]; var id = item.getAttribute('data-id'); if (!id) { continue; } var heading = document.getElementById(id); if (!heading) { continue; } var rect = heading.getBoundingClientRect(); if (!rect) { continue; } if (rect.top < -top) { // scrolled under top active = i; // or last scrolled } else if (rect.top + rect.height < viewHeight) { // in the upper half active = i; break; } } // check active anchor visible in viewport var anchor = getAcnhor(); if (anchor) { for (i = 0; i < items.length; i++) { var item = items[i]; var id = item.getAttribute('data-id'); if (!id || id !== anchor) { continue; } var heading = document.getElementById(id); if (!heading) { continue; } var rect = heading.getBoundingClientRect(); if (!rect) { continue; } if (rect.top >= -top && (rect.top + rect.height < viewHeight || isScrollEnd)) { // is visible in the upper half active = i; } break; } } // set active item for (i = 0; i < items.length; i++) { var item = items[i]; if (i === active) { if (!item.classList.contains('active')) { item.classList.add('active'); } } else { if (item.classList.contains('active')) { item.classList.remove('active'); } } } } var ticking; function onScroll() { if (!ticking) { window.requestAnimationFrame(function () { updateWaypoints(); ticking = false; }); ticking = true; } } function onClick(event) { if (event && event.target && event.target.closest('.doc-waypoint-item')) { onScroll(); // updateWaypoints(); } } function scrollToAnchorWaypoint() { var anchor = getAcnhor(); if (!anchor) { return; } var list = document.querySelector('.doc-waypoint-list'); if (!list) { return; } var items = list.querySelectorAll('.doc-waypoint-item'); if (!items.length) { return; } for (var i = 0; i < items.length; i++) { var item = items[i]; var id = item.getAttribute('data-id'); if (!id || id !== anchor) { continue; } var heading = document.getElementById(id); if (!heading) { continue; } heading.scrollIntoView({behavior: 'smooth', block: 'start'}); break; } } // try to disable default browser scroll position restore history.scrollRestoration = 'manual'; //try #1 (all browser, exclude IE11) document.documentElement.scrollTop = 0; // try #2 (all browser) document.addEventListener("DOMContentLoaded", function initWaypoints() { setTimeout(function () { // skip default scroll restoration, if triggered scrollToAnchorWaypoint(); setTimeout(function () { // skip scroll to anchor document.addEventListener('scroll', onScroll); document.addEventListener('click', onClick); // May be navigate without scroll onScroll(); // updateWaypoints(); }, 500); }, 250); }); </script> <script src="//capp.nicepage.com/1662e8971b75e227453abf2b0c0bb260dcad244d/forum-main-libs.js" defer></script> <link href="//capp.nicepage.com/1662e8971b75e227453abf2b0c0bb260dcad244d/forum-main-libs.css" rel="stylesheet" />  <!— Pinterest Tag —>  <!— end Pinterest Tag —> <style> .navbar { margin-bottom: 0; } </style> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { if (typeof IOlazy === 'function') { var lazy = new IOlazy(); } }); </script> </head> <body>  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W76XGFR" height="0" width="0" style="display: none; visibility: hidden"></iframe></noscript>  <div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0&appId=290410448063109" nonce="zGb432eF"></script> <div class="wrap wrap-fluid"> <div id="top-navbar" class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand clearfix" href="https://nicepage.com"><img class="pull-left" width="123" height="40" alt="Nicepage.com" src="//csite.nicepage.com/Images/logo-w.png" /></a> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="logon-block nav navbar-nav nav-list navbar-left u-unstyled" style="font-size: 14px;"> <li class="dropdown"> <a href="/download">Download</a> </li> <li class="dropdown"> <a href="/features">400+ Features</a> </li> <li class="dropdown"> <a aria-expanded="false" role="button" data-toggle="dropdown" class="dropdown-toggle template-menu-item" href="/html-templates">15,000+ Templates <span class="caret"></span></a> <ul role="menu" class="dropdown-menu dropdown-menu-hover u-unstyled"> <li><a href="/website-templates" class="templates-url" data-urls="website-templates;templates">Website Templates</a></li> <li><a href="/website-design" class="templates-url">Website Designs</a></li> <li><a href="/wordpress-themes">WordPress Themes</a></li> <li><a href="/joomla-templates">Joomla Templates</a></li> <li><a href="/html-templates" class="templates-url" data-urls="html-templates;html5-template;css-templates">HTML Templates</a></li> </ul> </a> </li> <li class="dropdown"> <a aria-expanded="false" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#"> Website Builders <span class="caret"></span> </a> <ul role="menu" class="dropdown-menu dropdown-menu-hover u-unstyled"> <li><a class="builder-link" href="/html-website-builder">HTML Website Builder</a></li> <li><a class="builder-link" href="/wordpress-website-builder">WordPress Website Builder</a></li> <li><a class="builder-link" href="/joomla-page-builder">Joomla Page Builder</a></li> </ul> </li> <li class="dropdown"> <a href="/premium?code=bf24">Pricing</a> </li> <li><a href="/forum">Forums</a></li> <li class="dropdown"> <a href="/blog">Blog</a> </li> <li class="dropdown"> <a aria-expanded="false" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Help<span class="caret"></span></a> <ul role="menu" class="dropdown-menu dropdown-menu-hover u-unstyled"> <li><a href="/doc/1318/video-lessons">Video Tutorials</a></li> <li><a href="/doc">Documentation</a></li> <li><a href="/Forum/Topic/Create">Contact Support</a></li> </ul> </li> </ul> <ul class="logon-block nav navbar-nav nav-list navbar-right u-unstyled"> <li><a href="/Editor/Account/LogOn">Sign In</a></li><li class="divider-vertical"></li><li><a href="https://nicepage.com/Editor/Account/Register">Register</a></li><li class="divider-vertical"></li> </ul> </div> </div> </div> <section class="container-fluid" style="padding: 0; margin-bottom: 0;"> <a href="/premium?code=bf24"> <img style="margin: 0 auto; display: block; width: 100%;" alt="Black Friday Sale! Save up to 50% off!" src="https://images02.nicepagecdn.com/cd46d0ff82086185e4d7aa0f/688183eae375568a98de87aa/coupon_34_1800-bf-87a8.jpg"/> </a> </section> <section id="" class="container"> <div id="jsquickmessage" style="display:none;"></div> <article class="article-containter"> <div class="row"> <div class="col-md-8"> <ol class="breadcrumb"> <li><a href="/doc">Home</a></li> <li><a href="/doc/c/joomla">Joomla</a></li> <li class="active">Show Posts In Articles In Joomla</li> </ol> </div> <div class="col-md-4"> <div style="margin-top: 10px;" > <a class="youtube-subscribe-btn" href="//youtube.com/c/nicepage?sub_confirmation=1" target="_blank"> <img src="//csite.nicepage.com/Images/Site/subscribe.png" alt="Subscribe on Youtube" style="width: 135px; vertical-align: bottom; margin-right: 5px;" /> </a> <div style="display: inline-block;"> <div class="fb-like" data-href="https://www.facebook.com/nicepageapp" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div> </div> </div> </div> </div> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-12"> <h1> Show Posts In Articles In Joomla </h1> </div> </div> <div class="row"> <div class="col-md-12"> <div class="postbody"> <div id="postcontent-83209" class="postcontent"> <p>For this tutorial, you will need to install the Nicepage Editor Extension. Please watch the video about the <a href="/doc/70240/install-joomla-extension">installation of the Joomla Extension</a> for more information. </p> <h3> </h3> <div style="background: #f3f3f3; padding: 15px"><pre style="font-family: Roboto;"> The following video tutorial was made with one of the previous versions. We are updating the videos. </pre></div> <h3> </h3> <iframe style="width: 100%; aspect-ratio: 16 / 9;" frameborder="0" src="https://www.youtube.com/embed/oLb3lsGhSU8"></iframe> <h3> </h3> <h2 id="add-blog-posts-element">Add Blog Posts Element</h2> <p>You can output Blog Articles to your other Joomla Articles using the Nicepage Joomla Extension. </p> <ol> <li>Open the Joomla Administrator.</li> <li>Go to Content -> Articles.</li> <li>Add several Articles to the "News" Category.</li> <li>Add the new Nicepage Article.</li> <li>In the Top Panel, click Nicepage -> New Page. </li> <li>Start with the Blank Article.</li> <li>Add a Blank Block.</li> <li>Click the small round plus in the Block center or Add Element.</li> <li>Select the Blog Posts Element. </li> <li>In the Property Panel, enter the "News" Category Name to show the News on your website.</li> <li>Click the Save icon.</li> <li>Close the Editor.</li> <li>Click the Save button.</li> <li>Click the Preview Page button to preview.</li> </ol> <h2 id="modify-blog-posts-element">Modify Blog Posts Element</h2> <p>You can stylize the Blog Posts Element using the Nicepage Joomla Extension. </p> <ol> <li>Switch back to the Article: Edit Page.</li> <li>Click the "Edit with Nicepage" button.</li> <li>Select the Blog Posts Element.</li> <li>Click the small plus above the Headline.</li> <li>Select the Metadata.</li> <li>To show another Element, go to the Property Panel.</li> <li>Check the "Category" Box to present the Category on the Metadata.</li> <li>Click the Save icon.</li> <li>Switch to the browser tab with the Article Preview.</li> <li>Refresh the page.</li> </ol> <p>Now you see the Blog Articles with the Published Date and Category. Add the Blog Posts Element to the Desktop Application and import the Content to Joomla. </p> <p>You have learned how to: </p> <ul> <li>Add the Blog Posts Element to Articles with the Nicepage Joomla Extension.</li> <li>Modify the Blog Posts Element using the Nicepage Joomla Extension.</li> </ul> <h2 id=""></h2> <span class="post-content-quote" id="post-content-83209">For this tutorial, you will need to install the Nicepage Editor Extension. Please watch the video about the [installation of the Joomla Extension](page:70240) for more information. ### <div style="background: #f3f3f3; padding: 15px"><pre style="font-family: Roboto;"> The following video tutorial was made with one of the previous versions. We are updating the videos. </pre></div> ### <iframe style="width: 100%; aspect-ratio: 16 / 9;" frameborder="0" src="https://www.youtube.com/embed/oLb3lsGhSU8"></iframe> ### ## Add Blog Posts Element You can output Blog Articles to your other Joomla Articles using the Nicepage Joomla Extension. 1. Open the Joomla Administrator. 2. Go to Content -> Articles. 3. Add several Articles to the "News" Category. 4. Add the new Nicepage Article. 5. In the Top Panel, click Nicepage -> New Page. 6. Start with the Blank Article. 7. Add a Blank Block. 8. Click the small round plus in the Block center or Add Element. 9. Select the Blog Posts Element. 10. In the Property Panel, enter the "News" Category Name to show the News on your website. 11. Click the Save icon. 12. Close the Editor. 13. Click the Save button. 14. Click the Preview Page button to preview. ## Modify Blog Posts Element You can stylize the Blog Posts Element using the Nicepage Joomla Extension. 1. Switch back to the Article: Edit Page. 2. Click the "Edit with Nicepage" button. 3. Select the Blog Posts Element. 4. Click the small plus above the Headline. 5. Select the Metadata. 6. To show another Element, go to the Property Panel. 7. Check the "Category" Box to present the Category on the Metadata. 8. Click the Save icon. 9. Switch to the browser tab with the Article Preview. 10. Refresh the page. Now you see the Blog Articles with the Published Date and Category. Add the Blog Posts Element to the Desktop Application and import the Content to Joomla. You have learned how to: - Add the Blog Posts Element to Articles with the Nicepage Joomla Extension. - Modify the Blog Posts Element using the Nicepage Joomla Extension. ## </span> </div> </div> </div> </div> </div> <div class="col-md-4 col-sticky"> <div class=" sidebar-container col-widgets"> <div class="row"> <div class="col-md-12"> <h3>In this article</h3> </div> </div> <div class="row"> <div class="col-md-12"> <div> <ul class="doc-article-list doc-waypoint-list"> <li class="doc-waypoint-item" data-id="add-blog-posts-element"> <a href="#add-blog-posts-element">Add Blog Posts Element</a> </li> <li class="doc-waypoint-item" data-id="modify-blog-posts-element"> <a href="#modify-blog-posts-element">Modify Blog Posts Element</a> </li> </ul> </div> </div> </div> <div class="row"> <div class="col-md-12"> <h3><a class="doc-category-caption" href="/doc/c/joomla">Joomla</a></h3> </div> </div> <div class="row"> <div class="col-md-12"> <ul class="doc-article-list"> <li> <a href="/doc/70107/install-joomla-template-and-articles" class=""> <svg id="icon-video" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M5,4.6v6.9C5,12,5.5,12.2,5.9,12l5.8-3.4c0.3-0.2,0.3-0.7,0-0.9L5.9,4.1C5.5,3.8,5,4.1,5,4.6z"/> </svg> Install Joomla Template And Articles </a> </li> <li> <a href="/doc/70240/install-joomla-extension" class=""> <svg id="icon-video" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M5,4.6v6.9C5,12,5.5,12.2,5.9,12l5.8-3.4c0.3-0.2,0.3-0.7,0-0.9L5.9,4.1C5.5,3.8,5,4.1,5,4.6z"/> </svg> Install Joomla Extension </a> </li> <li> <a href="/doc/72666/update-joomla-template-from-app" class=""> <svg id="icon-video" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M5,4.6v6.9C5,12,5.5,12.2,5.9,12l5.8-3.4c0.3-0.2,0.3-0.7,0-0.9L5.9,4.1C5.5,3.8,5,4.1,5,4.6z"/> </svg> Update Joomla Template From App </a> </li> <li> <a href="/doc/73583/export-and-update-joomla-content-from-app" class=""> <svg id="icon-video" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M5,4.6v6.9C5,12,5.5,12.2,5.9,12l5.8-3.4c0.3-0.2,0.3-0.7,0-0.9L5.9,4.1C5.5,3.8,5,4.1,5,4.6z"/> </svg> Export And Update Joomla Content From App </a> </li> <li> <a href="/doc/191171/joomla-5-support" class=""> <svg id="icon-document" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M13,4H3v1h10V4L13,4z"/> <path fill="#4184F4" d="M13,7H3v1h10V7L13,7z"/> <path fill="#4184F4" d="M10,10H3v1h7V10L10,10z"/> </svg> Joomla 5 Support </a> </li> <li> <a href="/doc/77605/position-in-joomla-header-footer" class=""> <svg id="icon-video" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M5,4.6v6.9C5,12,5.5,12.2,5.9,12l5.8-3.4c0.3-0.2,0.3-0.7,0-0.9L5.9,4.1C5.5,3.8,5,4.1,5,4.6z"/> </svg> Position In Joomla Header / Footer </a> </li> <li> <a href="/doc/76349/position-in-joomla-sidebar" class=""> <svg id="icon-video" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M5,4.6v6.9C5,12,5.5,12.2,5.9,12l5.8-3.4c0.3-0.2,0.3-0.7,0-0.9L5.9,4.1C5.5,3.8,5,4.1,5,4.6z"/> </svg> Position In Joomla Sidebar </a> </li> <li> <a href="/doc/76324/position-in-joomla-article" class=""> <svg id="icon-video" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M5,4.6v6.9C5,12,5.5,12.2,5.9,12l5.8-3.4c0.3-0.2,0.3-0.7,0-0.9L5.9,4.1C5.5,3.8,5,4.1,5,4.6z"/> </svg> Position In Joomla Article </a> </li> <li> <a href="/doc/76096/custom-position-in-joomla-article" class=""> <svg id="icon-video" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M5,4.6v6.9C5,12,5.5,12.2,5.9,12l5.8-3.4c0.3-0.2,0.3-0.7,0-0.9L5.9,4.1C5.5,3.8,5,4.1,5,4.6z"/> </svg> Custom Position In Joomla Article </a> </li> <li> <a href="/doc/81605/edit-header-footer-in-joomla" class=""> <svg id="icon-video" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M5,4.6v6.9C5,12,5.5,12.2,5.9,12l5.8-3.4c0.3-0.2,0.3-0.7,0-0.9L5.9,4.1C5.5,3.8,5,4.1,5,4.6z"/> </svg> Edit Header / Footer In Joomla </a> </li> <li> <a href="/doc/83209/show-posts-in-articles-in-joomla" class="link-current"> <svg id="icon-video" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#808080" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#808080" d="M5,4.6v6.9C5,12,5.5,12.2,5.9,12l5.8-3.4c0.3-0.2,0.3-0.7,0-0.9L5.9,4.1C5.5,3.8,5,4.1,5,4.6z"/> </svg> Show Posts In Articles In Joomla </a> </li> <li><a href="/doc/c/joomla">show more »</a></li> </ul> </div> </div> </div> </div> </div> </article> <script> $(function () { var loadingTime = new Date(); var timeoutMsec = 3 * 1000; var longTimeoutMsec = 10 * 1000; var imgNode = "<img src='//static.nicepage.com/images/social/icont-attention.png'/>"; var calculateScrollPercents = function() { var s = $(window).scrollTop(), d = $(document).height(), c = $(window).height(); var scrollPercent = (s / (d - c)) * 100; return scrollPercent; }; var showStickyFooter = function () { if (calculateScrollPercents() > 20 && !$('.subscribe-modal').hasClass('show')) { $('.subscribe-modal').addClass('show'); } }; var isEmail = function(email) { var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; return regex.test(email); }; var hideTooltip = function () { var emailInput = $('.email-input'); if (emailInput.data('ui-tooltip')) {//if tooltip has been initialized emailInput.tooltip('option', 'content', '').tooltip('close').tooltip('disable'); } } var timerId = null; var hasScrollbar = document.body.scrollHeight > document.body.clientHeight; if (!hasScrollbar) { timerId = setTimeout(function () { $('.subscribe-modal').addClass('show'); clearTimeout(timerId); timerId = null; }, longTimeoutMsec); } var emailInput = $('.email-input'); emailInput.attr("title", " "); emailInput .tooltip({ tooltipClass: 'top', position: { my: 'left top+10', at: 'left bottom' } }) .tooltip("disable") .on('mouseout focusout', function (event) { event.stopImmediatePropagation(); }) .on('input', hideTooltip); $('.subscribe-close').on('click', function () { $('.subscribe-modal').removeClass('show'); $.cookie("HideStickyFooter", 1, { expires: 180 }); }); $('.subscribe-btn').on('click', function (e) { e.preventDefault(); $('.error').hide(); var email = $('.email-input').val(); if (!isEmail(email)) { var tooltipContent = 'Enter a valid email address'; $('.email-input') .tooltip('option', 'content', imgNode + "<span style='margin-left: 10px;'>" + tooltipContent + '</span>') .tooltip('enable') .tooltip('open'); return; } $('#subscribe-form').submit(); }); $(window).on('scroll', function() { if ($.cookie("HideStickyFooter")) return; hideTooltip(); var currentTime = new Date(); if (currentTime.getTime() - loadingTime.getTime() > timeoutMsec) { if (!timerId) showStickyFooter(); } else if (!timerId) { timerId = setTimeout(function () { showStickyFooter(); clearTimeout(timerId); timerId = null; }, timeoutMsec - (currentTime - loadingTime)); } if (calculateScrollPercents() < 20 && $('.subscribe-modal').hasClass('show')) { $('.subscribe-modal').removeClass('show'); if (timerId) { clearTimeout(timerId); timerId = null; } } }); }); </script> <div class="subscribe-modal" data-backdrop="false"> <button type="button" class="subscribe-close"></button> <div class="content subscribe-form-holder"> <h1>Join Us</h1> <p>Get free website builder. Easy drag-and-drop.<br/> Choose from 15,000+ Templates.</p> <form method="post" id="subscribe-form" action="/Editor/Account/RegisterByEmail?returnUrl=%2Fdoc%2F83209%2Fshow-posts-in-articles-in-joomla&source=Article"> <input class="email-input" type="text" name="email" placeholder="Enter your email address"> <input class="subscribe-btn" type="submit" value="Join"> </form> </div> <div class="subscribe-success"> <div class="content"> <h2>Thanks for subscribing!</h2> </div> </div> </div> </section> <div id="push"></div> </div> <div class="footer"> <div class="footer-top"> <div class="container"> <style> .footer-top a { color: #ddd !important; font-size: 16px; } </style> <div class="row"> <div class="col-md-2 col-sm-6 col-xs-12"> <h6>Company</h6> <ul> <li><a href="/Terms">Terms of Use</a></li> <li><a href="/Privacy">Privacy Policy</a></li> <li><a href="/Agreement">License Agreement</a></li> <li><a href="/About">About Us</a></li> <li><a href="/partners">Partners</a></li> <li><a href="/Abuse">Abuse</a></li> <li><a href="/Forum/Topic/Create">Contact Support</a></li> </ul> </div> <div class="col-md-2 col-sm-6 col-xs-12"> <h6>Product</h6> <ul> <li><a href="/doc/frequently-asked-questions-16656">FAQ</a></li> <li><a href="/download">Download</a></li> <li><a href="/features">400+ Features</a></li> <li><a href="/affiliates">Affiliates</a></li> <li><a href="/doc">Documentation</a></li> <li><a href="/forum">Forum</a></li> <li><a href="/blog">Blog</a></li> </ul> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <h6><a href="/templates">Themes & Templates</a></h6> <ul> <li><a href="/website-templates">Website Templates</a></li> <li><a href="/wordpress-themes">WordPress Themes</a></li> <li><a href="/html-templates">HTML Templates</a></li> <li><a href="/css-templates">CSS Templates</a></li> <li><a href="/joomla-templates">Joomla Templates</a></li> <li><a href="/html5-template">HTML5 Templates</a></li> <li><a href="/one-page-template">One Page Templates</a></li> </ul> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <h6>Nicepage</h6> <ul> <li><a href="/website-builder">Website Builder</a></li> <li><a href="/html-website-builder">HTML Website Builder</a></li> <li><a href="/wordpress-website-builder">WordPress Website Builder</a></li> <li><a href="/joomla-page-builder">Joomla Page Builder</a></li> <li><a href="/wysiwyg-html-editor">WYSIWYG HTML Editor</a></li> <li><a href="/static-site-generator">Static Site Generator</a></li> <li><a href="/html-code">HTML Code Generator</a></li> </ul> </div> <div class="col-md-2 col-sm-6 col-xs-12"> <h6>Web Design</h6> <ul> <li><a href="/website-design">Website Designs</a></li> <li><a href="/web-page-design">Web Page Designs</a></li> <li><a href="/ecommerce-templates">eCommerce Designs</a></li> <li><a href="/landing-page">Landing Pages</a></li> <li><a href="/homepage-design">Homepage Designs</a></li> <li><a href="/website-mockup">Website Mockup</a></li> </ul> </div> </div> </div> </div> <div class="footer-bottom"> <div class="container"> <div class="row"> <div id="footer-links" class="footer-inline col-sm-12 pull-right"> <div style="white-space: nowrap; float: left; text-align: left;"> <div class="row"> <div class="col-sm-3"> <a href="https://facebook.com/nicepageapp" rel="noreferrer" target="_blank" style="margin-right: 10px;"> <svg x="0px" y="0px" viewBox="0 0 112.2 112.2" style="width: 24px;"> <circle fill="#3B5998" cx="56.1" cy="56.1" r="55"></circle> <path fill="#FFFFFF" d="M73.5,31.6h-9.1c-1.4,0-3.6,0.8-3.6,3.9v8.5h12.6L72,58.3H60.8v40.8H43.9V58.3h-8V43.9h8v-9.2 c0-6.7,3.1-17,17-17h12.5v13.9H73.5z"></path> </svg><span style="position: relative;top: -7px;margin-left: 5px;">Facebook</span></a> </div> <div class="col-sm-3"> <a href="https://twitter.com/NicepageApp" rel="noreferrer" target="_blank" style="margin-right: 10px;"> <svg x="0px" y="0px" viewBox="0 0 112.2 112.2" style="width: 24px;"> <circle fill="#55ACEE" class="st0" cx="56.1" cy="56.1" r="55"/> <path fill="#FFFFFF" d="M83.8,47.3c0,0.6,0,1.2,0,1.7c0,17.7-13.5,38.2-38.2,38.2C38,87.2,31,85,25,81.2c1,0.1,2.1,0.2,3.2,0.2 c6.3,0,12.1-2.1,16.7-5.7c-5.9-0.1-10.8-4-12.5-9.3c0.8,0.2,1.7,0.2,2.5,0.2c1.2,0,2.4-0.2,3.5-0.5c-6.1-1.2-10.8-6.7-10.8-13.1 c0-0.1,0-0.1,0-0.2c1.8,1,3.9,1.6,6.1,1.7c-3.6-2.4-6-6.5-6-11.2c0-2.5,0.7-4.8,1.8-6.7c6.6,8.1,16.5,13.5,27.6,14 c-0.2-1-0.3-2-0.3-3.1c0-7.4,6-13.4,13.4-13.4c3.9,0,7.3,1.6,9.8,4.2c3.1-0.6,5.9-1.7,8.5-3.3c-1,3.1-3.1,5.8-5.9,7.4 c2.7-0.3,5.3-1,7.7-2.1C88.7,43,86.4,45.4,83.8,47.3z"/> </svg><span style="position: relative;top: -7px;margin-left: 5px;">Twitter</span></a> </div> <div class="col-sm-3"> <a href="https://youtube.com/nicepage?sub_confirmation=1" rel="noreferrer" target="_blank" style="margin-right: 10px;"> <svg x="0px" y="0px" viewBox="0 0 112.2 112.2" style="width: 24px;"> <circle fill="#D22215" cx="56.1" cy="56.1" r="55"></circle> <path fill="#FFFFFF" d="M74.9,33.3H37.3c-7.4,0-13.4,6-13.4,13.4v18.8c0,7.4,6,13.4,13.4,13.4h37.6c7.4,0,13.4-6,13.4-13.4V46.7 C88.3,39.3,82.3,33.3,74.9,33.3L74.9,33.3z M65.9,57l-17.6,8.4c-0.5,0.2-1-0.1-1-0.6V47.5c0-0.5,0.6-0.9,1-0.6l17.6,8.9 C66.4,56,66.4,56.8,65.9,57L65.9,57z"></path> </svg><span style="position: relative;top: -7px;margin-left: 5px;">YouTube</span></a> </div> <div class="col-sm-3"> <a href="https://www.pinterest.com/nicepagecom/pins" rel="noreferrer" target="_blank" style="margin-right: 10px;"> <svg x="0px" y="0px" viewBox="0 0 112.2 112.2" style="width: 24px;"> <circle fill="#CB2027" cx="56.1" cy="56.1" r="55"></circle> <path fill="#FFFFFF" d="M61.1,76.9c-4.7-0.3-6.7-2.7-10.3-5c-2,10.7-4.6,20.9-11.9,26.2c-2.2-16.1,3.3-28.2,5.9-41 c-4.4-7.5,0.6-22.5,9.9-18.8c11.6,4.6-10,27.8,4.4,30.7C74.2,72,80.3,42.8,71,33.4C57.5,19.6,31.7,33,34.9,52.6 c0.8,4.8,5.8,6.2,2,12.9c-8.7-1.9-11.2-8.8-10.9-17.8C26.5,32.8,39.3,22.5,52.2,21c16.3-1.9,31.6,5.9,33.7,21.2 C88.2,59.5,78.6,78.2,61.1,76.9z"></path> </svg><span style="position: relative;top: -7px;margin-left: 5px;">Pinterest</span></a> </div> </div> </div>  <div class="copy">© 2024 Nicepage Free Website Builder Software - All Rights Reserved</div> </div> </div> </div> </div> </div> </body> </html>

CINXE.COM

Show Posts In Articles In Joomla - Nicepage Documentation