fbpx
Welcome, Guest
Username: Password: Remember me

TOPIC: [Tutorial] Latest Joomla Articles on the home page.

[Tutorial] Latest Joomla Articles on the home page. 1 year 2 months ago #22601

  • alakentu
  • alakentu's Avatar
  • Offline
  • New Member
  • Helping help me!
  • Posts: 12
  • Thank you received: 1
  • Karma: 1
[Tutorial] Latest Joomla Articles on the home page.

Hi.

This tutorial is about getting the latest Joomla articles on our cover if you don't want or don't use the latest portfolio module.

I covered this in the topic: Render Joomla Articles inside JD Builder!

As promised must be paid, here is the hack I have done to achieve what I needed and give a beautiful style to what I am creating with the help of its templates and components. Here we go.

Inside the HTML folder we already have the main files to do the hack, the module in question is: mod_articles_latest.

We will download the fancybox from the author's page: https://fancyapps.com/fancybox/. We will extract the files and place them inside the CSS and JS/VENDOR folders respectively.

Previously we must activate the module in the joomla backend, with the following parameters:
  • Module tab:
    • Category: the one you want
    • Count: 12
    • Show Title: Show
    • Position: Leave blank
    • Status: Published
  • Menu Assignment Tab:
    • Module Assignment Only on selected pages
    • Menu Selection: HOME only
  • Advanced tab:
    • Layout: ---From jd_boston_astroid Template > "builder"
      Note that this design must be, since it will be where we will hack.
    • Header Class: " text-center text-secondary"
      Note that you have a small space, you must have it like this.
We go to the JD Builder component and set the configuration like this:
JD Builder > Pages > Home
Scroll to Latest Portfolio section
  • In Section Settings:
    • First: In the Layout section, we set the Content Width to Contained (Boxed).
    • Then: We go to the "Advanced tab" and in the "Info" section we change the name "Latest Portfolio" to "Latest Articles".
  • In Latest Portfolio Settings or Element Settings, we will establish the following:
    • First: In the Content section, we changed the name from "LATEST PORTFOLIO" to "LATEST ARTICLES", we did not change anything else.
    • Then: We go to the "Advanced tab" and in the "Info" section we change the name "LATEST PORTFOLIO" to "LATEST ARTICLES".
  • In LATEST PORTFOLIO (JOOMLA MODULE) or Element Settings, we will establish the following:
    • First: In the "General" section is the "Module" parameter, we look for the module that we have just established: Latest Articles [ID].
    • Then: We go to the "Advanced tab" and in the "Info" section we change the name "LATEST PORTFOLIO (JOOMLA MODULE)" to "LATEST ARTICLES (JOOMLA MODULE)".
That's it around here, we save and close.

We started hacking the files...

As I said before we already have an override of the module in the HTML folder. We will locate the file "builder.php" and open it with the editor of your choice. After defined:
defined('_JEXEC') or die;

We add the following code:
$app 	  = JFactory::getApplication();
$doc   	  = JFactory::getDocument();
$tpl_path = JUri::base() . 'templates/' . $app->getTemplate();
NOTE: This is done to be able to add the necessary javascript and css files, and I did it this way because I tried to add them from the template index and it gave me an error.

We will change everything within the <article><ALL CONTENT></article> tags with this code:
<div class="pull-none item-image item-overlay-wrapper clearfix">
	<img class="builder-layout-image" src="<?php echo $image->image_intro ?>" alt="" itemprop="thumbnailUrl">
	<div class="item-image-overlay">
		<div class="item-vertical-middle">
			<div>
				<div class="item-btns">
					<a class="btn-zoom" href="<?php echo $image->image_fulltext; ?>" data-fancybox="images"><?php echo JText::_('TPL_PARTHUMAN_IMG_CONTENT_ZOOM'); ?></a>
					<a class="btn-view" href="<?php echo $item->link; ?>"><?php echo JText::_('TPL_PARTHUMAN_IMG_CONTENT_VIEW'); ?></a>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="card-body has-image">
	<div class="article-title item-title">
		<div class="page-header">
			<h2 itemprop="name">
				<a href="<?php echo $item->link; ?>" itemprop="url">
					<?php echo $item->title; ?>
				</a>
			</h2>
		</div>
	</div>
	<dl class="article-info muted">
		<dd class="createdby" itemprop="author" itemscope itemtype="https://schema.org/Person">
			<i class="far fa-user"></i>
			<span itemprop="name"><?php echo ($item->created_by_alias ?: $item->author); ?></span>
		</dd>
		<dd class="category-name">
			<i class="far fa-folder"></i>
			<a href="<?php echo JRoute::_("index.php?option=com_content&view=category&layout=$item->category_title&id=$item->catid"); ?>" itemprop="genre"><?php echo $item->category_title; ?></a>
		</dd>
		<dd class="create">
			<i class="far fa-calendar-plus"></i>
			<time datetime="<?php echo JHtml::_('date', $item->created, 'c'); ?>" itemprop="dateCreated">
				<span><?php echo JText::sprintf('COM_CONTENT_CREATED_DATE_ON', JHtml::_('date', $item->created, JText::_('DATE_FORMAT_LC3'))); ?></span>
			</time>
		</dd>
		<dd class="hits">
			<i class="far fa-eye"></i>
			<meta itemprop="interactionCount" content="UserPageVisits:<?php echo $item->hits; ?>" />
			<?php echo JText::sprintf('COM_CONTENT_ARTICLE_HITS', $item->hits); ?>
		</dd>
	</dl>
	<?php echo $item->introtext; ?>
	<div class="readmore">
		<a class="btn btn-primary readmore-btn" href="<?php echo $item->link; ?>" itemprop="url" aria-label="Read more:  <?php echo $item->title; ?>">
			<?php echo JText::_('TPL_PARTHUMAN_READ_MORE'); ?>
		</a>
	</div>
</div>	

In that same file, at the end of all the html code, we will add this:
<link rel="stylesheet" type="text/css" href="<?php echo $tpl_path; ?>/css/jquery.fancybox.min.css"/>
<script type="text/javascript" src="<?php echo $tpl_path; ?>/js/vendor/jquery.fancybox.min.js"></script>
<script>
(function( $ ) {
	$(function() {
		$('[data-fancybox="images"]').fancybox({
			afterLoad : function(instance, current) {
				var pixelRatio = window.devicePixelRatio || 1;

				if ( pixelRatio > 1.5 ) {
					current.width  = current.width  / pixelRatio;
					current.height = current.height / pixelRatio;
				}
			}
		});
		$('[data-fancybox]').fancybox({
			keyboard: false,
			arrows: false,
			infobar: false,
			smallBtn: false,
			toolbar: false,
			protect: true
		});
	});
})(jQuery);
</script>

We must edit the template language files and add the following: en-GB.tpl_jd_boston_astroid.ini and your native language:
TPL_ASTROID_READ_MORE="Read more..."
TPL_ASTROID_IMG_CONTENT_ZOOM="Zoom"
TPL_ASTROID_IMG_CONTENT_VIEW="View"
COM_CONTENT_CREATED_DATE_ON="Created: %s"
COM_CONTENT_ARTICLE_HITS="Hits: %s"

We will go to the following path: jd_boston_astroid > scss > boston > template-elements. We will edit the file "_joomla-articles.scss". We will add at the end of all this code:
/** Lastest Articules Module Hack **/
.item-overlay-wrapper {
	position: relative;
	overflow: hidden;
	.builder-layout-image {
		display: block;
		max-width: 100%;
		height: auto;
		float: left;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
		-webkit-transition: all 400ms;
		transition: all 400ms;
	}
	.item-image-overlay {
		color: $white !important;
		opacity: 0;
		transition: opacity 400ms;
		-webkit-transition: opacity 400ms;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		padding: 10px;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		z-index: 2;
		&:before {
			top: 0;
			left: 0;
			width: 100%;
			content: "";
			height: 100%;
			opacity: 0.5;
			position: absolute;
			background: $primary;
		}
	}
}
.item {
	&:hover {
		.item-image-overlay {
		  opacity: 1;
		}
		.builder-layout-image {
			-webkit-transform: scale3d(1.15, 1.15, 1);
			transform: scale3d(1.15, 1.15, 1);
		}
		.item-btns {
			a {
				opacity: 1;
				-webkit-transform: scale3d(1, 1, 1);
				transform: scale3d(1, 1, 1);
			}
		}
	}

	.item-vertical-middle {
		height: 100%;
		width: 100%;
		display: table;
		> div {
			display: table-cell;
			vertical-align: middle;
		}
	}

	.item-btns a {
		display: inline-block;
		padding: 7px 12px;
		margin: 3px;
		font-size: 12px;
		letter-spacing: 2px;
		line-height: 1;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		background: transparent;
		color: #fff;
		border: 1px solid #fff;
		border-radius: 100px;
		text-decoration: none;
		text-transform: uppercase;
		opacity: 0;
		-webkit-transform: scale3d(0, 0, 0);
		transform: scale3d(0, 0, 0);
		-webkit-transition: all 400ms;
		transition: all 400ms;
	}
	.item-btns a:hover {
		background: #333;
		border-color: #333;
	}
}

With this we are finished, if any of you do not find the hack please let me know to help you, I will be on the lookout for your answers.

I hope it is a good help for everyone.

Best regards
Please do not spam that you see I see and does not help anyone!
Last Edit: 1 year 2 months ago by alakentu. Reason: Change $template for $tpl_path. If set $template get a joomla error!
The administrator has disabled public write access.
The following user(s) said Thank You: admin

[Tutorial] Latest Joomla Articles on the home page. 1 year 2 months ago #22626

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 4448
  • Thank you received: 642
  • Karma: 116
That's helpful. Thank You! I am sure someone would find it useful!
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.

[Tutorial] Latest Joomla Articles on the home page. 1 year 2 months ago #22632

  • alakentu
  • alakentu's Avatar
  • Offline
  • New Member
  • Helping help me!
  • Posts: 12
  • Thank you received: 1
  • Karma: 1
admin wrote:
That's helpful. Thank You! I am sure someone would find it useful!

Thank you very much for your support.

I am working on other details in the Boston template, then I will give the results. In addition to developing a module to display the latest tweets of any user with a scroll effect. It is coming soon.
Please do not spam that you see I see and does not help anyone!
The administrator has disabled public write access.
Moderators: chandandeep
Time to create page: 0.320 seconds