How do i create newspaper like show?

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Post Reply
shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 172
Joined: Sat Nov 17, 2018 1:52 pm

How do i create newspaper like show?

Post by shaibustephen » Tue Sep 17, 2019 3:19 am

I want to create newspaper-like slideshow on the home page of my site so that every leading and featured article can appear there. To do this, i want to customise my featured.php in the html folder. Please, how do i create slide show to have a dynamic carousel-item -active and carousel-item in the featured.php. This is the sample carousel https://bootsnipp.com/snippets/9xGW.

What changes can i make to the below or which other areas should the appropriate thing be done?
View the featured.php code below

Code: Select all

<?php
/**
 * @package     Joomla.Site
 * @subpackage  com_content
 *
 * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');

JHtml::_('behavior.caption');

// If the page class is defined, add to class as suffix.
// It will be a separate class if the user starts it with a space
?>
<div class="blog-featured text-center<?php echo $this->pageclass_sfx; ?>" itemscope itemtype="https://schema.org/Blog">
<?php if ($this->params->get('show_page_heading') != 0) : ?>
<div class="page-header">
	<h1>
	<?php echo $this->escape($this->params->get('page_heading')); ?>
	</h1>
</div>
<?php endif; ?>
<?php if ($this->params->get('page_subheading')) : ?>
	<h2> 
		<?php echo $this->escape($this->params->get('page_subheading')); ?>
	</h2>
<?php endif; ?>
<?php $leadingcount = 0; ?>
<?php if (!empty($this->lead_items)) : ?>
<div class="items-leading clearfix">
	<?php foreach ($this->lead_items as &$item) : ?>
		<div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?> clearfix"
			itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
			<div class="col-md-6 offset-md-3">
			<?php
				$this->item = &$item;
				echo $this->loadTemplate('item');
			?>
			<div class="border"></div>
			</div><!--offset-->
		</div>
		<?php
			$leadingcount++;
		?>
	<?php endforeach; ?>
</div>
<?php endif; ?>
<?php
	$introcount = count($this->intro_items);
	$counter = 0;
?>
<?php if (!empty($this->intro_items)) : ?>
	<?php foreach ($this->intro_items as $key => &$item) : ?>

		<?php
		$key = ($key - $leadingcount) + 1;
		$rowcount = (((int) $key - 1) % (int) $this->columns) + 1;
		$row = $counter / $this->columns;

		if ($rowcount === 1) : ?>

		<div class="items-row my-5 cols-<?php echo (int) $this->columns; ?> <?php echo 'row-' . $row; ?> row ">
		<?php endif; ?>
			<div class="item column-<?php echo $rowcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?> col-md-<?php echo round(12 / $this->columns); ?>"
				itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
				<div class="blog-box">
			<?php
					$this->item = &$item;
					echo $this->loadTemplate('item');
			?>
			</div>
			</div>
			<?php $counter++; ?>

			<?php if (($rowcount == $this->columns) or ($counter == $introcount)) : ?>

		</div>
		<?php endif; ?>

	<?php endforeach; ?>
<?php endif; ?>

<?php if (!empty($this->link_items)) : ?>
	<div class="items-more">
	<?php echo $this->loadTemplate('links'); ?>
	</div>
<?php endif; ?>

<?php if ($this->params->def('show_pagination', 2) == 1  || ($this->params->get('show_pagination') == 2 && $this->pagination->pagesTotal > 1)) : ?>
	<div class="pagination">

		<?php if ($this->params->def('show_pagination_results', 1)) : ?>
			<p class="counter pull-right">
				<?php echo $this->pagination->getPagesCounter(); ?>
			</p>
		<?php endif; ?>
				<?php echo $this->pagination->getPagesLinks(); ?>
	</div>
<?php endif; ?>

</div>
Last edited by Per Yngve Berg on Sat Sep 21, 2019 12:57 pm, edited 1 time in total.
Reason: Added code tags for readability

User avatar
john-doe
Joomla! Guru
Joomla! Guru
Posts: 909
Joined: Tue Apr 19, 2011 7:39 pm
Location: Colombia
Contact:

Re: How do i create newspaper like show?

Post by john-doe » Sat Sep 21, 2019 12:46 am

shaibustephen wrote:
Tue Sep 17, 2019 3:19 am
I want to create newspaper-like slideshow on the home page of my site so that every leading and featured article can appear there. To do this, i want to customise my featured.php in the html folder. Please, how do i create slide show to have a dynamic carousel-item -active and carousel-item in the featured.php. This is the sample carousel https://bootsnipp.com/snippets/9xGW.

What changes can i make to the below or which other areas should the appropriate thing be done?
TIP: Please if you want to post a larg chunk of code, group it under code tags!

Greetings.

It is not as easy to simply change inside featured.php and just like that.

Let me try to explain this in a simple language:

Featured Articles can be overriden if you have an HTML folder on your template and inside one called com_content and other featured which has default.php and default_item.php.

If you see the Featured Articles' Settings you see how many articles are 'Leading' and how many others in columns.
Featured Settings.jpg
Now, where are they? On this Chunk of code:

Code: Select all

<?php $leadingcount = 0; ?>
<?php if (!empty($this->lead_items)) : ?>
<div class="items-leading clearfix">
<?php foreach ($this->lead_items as &$item) : ?>
<div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?> clearfix"
itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<div class="col-md-6 offset-md-3">
<?php
$this->item = &$item;
echo $this->loadTemplate('item');
?>
<div class="border"></div>
</div><!--offset-->
</div>
<?php
$leadingcount++;
?>
<?php endforeach; ?>
</div>
<?php endif; ?>
But you need to take into account a couple of things:

First the head of the leading can be replaced with the first three tags of the carousel (do not forget to set properly the closings, and erase the previous tags closings because you might get lost and the template might seem broken for a stray closing tag).

Then the for each lists the Leading items you defined on the list.

Then you have to edit default_item.php so you can arrange it for a single item.

You need as well a couple of Array callings so you can retrieve the titles of the articles for the side list.

The operation is extensive to explain but I hope this could give you a lead.
You do not have the required permissions to view the files attached to this post.
www.aldemar-hernandez.com - Custom templates and design services.

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 172
Joined: Sat Nov 17, 2018 1:52 pm

Re: How do i create newspaper like show?

Post by shaibustephen » Sat Oct 19, 2019 3:38 am

i followed your direction. I still have little problem. How do i configure my code as shown below to get ''carousel-item active'' ''carousel-item''?
<div class="carousel-item active">
?
</div><!---carousel item-->
<div class="carousel-item">
?
</div><!---carousel item-->
<?php
$this->item = &$item;
echo $this->loadTemplate('item');
?>

What should i put at the ? for it to pull up different post items. That is to pull out image and intro text of each category post or article?

User avatar
john-doe
Joomla! Guru
Joomla! Guru
Posts: 909
Joined: Tue Apr 19, 2011 7:39 pm
Location: Colombia
Contact:

Re: How do i create newspaper like show?

Post by john-doe » Sat Oct 19, 2019 4:06 am

shaibustephen wrote:
Sat Oct 19, 2019 3:38 am
i followed your direction. I still have little problem. How do i configure my code as shown below to get ''carousel-item active'' ''carousel-item''?

What should i put at the ? for it to pull up different post items. That is to pull out image and intro text of each category post or article?
I got this solution from a Bootstrap Carousel i made a couple of days ago.

Code: Select all

<?php foreach ($this->intro_items as $key => &$item) : ?>
			<?php $rowcount = ((int) $key % (int) $this->columns) + 1; ?>
			<?php if ($rowcount === 1) : ?>
				<?php $row = $counter / $this->columns; ?><?php $paginas = array(); ?>
				<div class="carousel-item <?php if ($row == "0"){echo 'active'; } ?>"><div class="row">
			<?php endif; ?>
           	
			<div class="col-md-<?php echo round(12 / $this->columns); ?>">
				<div class="item column-<?php echo $rowcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>"
					itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
					<?php
					$this->item = &$item;
					echo $this->loadTemplate('item');
					?>
				</div>
				<!-- end item -->
				<?php $counter++; ?>
                  
			</div><!-- end span -->
            <?php array_push ($paginas, $filas); ?>
			<?php if (($rowcount == $this->columns) or ($counter == $introcount)) : ?>
			<?php  $filas++;?>  </div></div><!-- end row -->  
			<?php endif; ?>
		<?php endforeach; ?>
This is the exact extract from the solution i did there. The solution i did based on the column block instead of the leading items (since for that solution i needed more than a single item).
If you see the carousel item line it has an if clause which verifies that the row vale begins definitively on 0, throwing the string active on it and if such value is not 0 simply is not summoned. So your solution might be something like this:

Code: Select all

<?php foreach ($this->lead_items as &$item) : ?>
<div class="carousel-item <?php if ($leadingcount === 0){echo "active";} ?>">
<div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?> clearfix"
itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<div class="col-md-6 offset-md-3">
<?php
$this->item = &$item;
echo $this->loadTemplate('item');
?>
<div class="border"></div>
</div><!--offset-->
</div>
</div><!--carousel item-->
<?php
$leadingcount++;
?>
<?php endforeach; ?>
www.aldemar-hernandez.com - Custom templates and design services.

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 172
Joined: Sat Nov 17, 2018 1:52 pm

Re: How do i create newspaper like show?

Post by shaibustephen » Sat Oct 19, 2019 11:52 pm

i added it to featured.php and got error message. kindly look at the screenshot on the nature of the error message. Also, view the attached default of the featured folder and help me correct it. I want aleast four carousel items on it.

I really appreciate your prompt response
You do not have the required permissions to view the files attached to this post.

User avatar
john-doe
Joomla! Guru
Joomla! Guru
Posts: 909
Joined: Tue Apr 19, 2011 7:39 pm
Location: Colombia
Contact:

Re: How do i create newspaper like show?

Post by john-doe » Sun Oct 20, 2019 12:46 am

shaibustephen wrote:
Sat Oct 19, 2019 11:52 pm
i added it to featured.php and got error message. kindly look at the screenshot on the nature of the error message. Also, view the attached default of the featured folder and help me correct it. I want aleast four carousel items on it.

I really appreciate your prompt response
If i need to correct the file i'll need the whole (structure of the) template in order to do the override properly.
www.aldemar-hernandez.com - Custom templates and design services.

User avatar
john-doe
Joomla! Guru
Joomla! Guru
Posts: 909
Joined: Tue Apr 19, 2011 7:39 pm
Location: Colombia
Contact:

Re: How do i create newspaper like show?

Post by john-doe » Sun Oct 20, 2019 12:50 am

And this does not make sense . Line 33 is a closing div tag and the error says about a leading count on such line.

I would need as well the untouched template something is fishy
You do not have the required permissions to view the files attached to this post.
www.aldemar-hernandez.com - Custom templates and design services.

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 172
Joined: Sat Nov 17, 2018 1:52 pm

Re: How do i create newspaper like show?

Post by shaibustephen » Sun Oct 20, 2019 1:05 am

here below is an untouched template
You do not have the required permissions to view the files attached to this post.

User avatar
john-doe
Joomla! Guru
Joomla! Guru
Posts: 909
Joined: Tue Apr 19, 2011 7:39 pm
Location: Colombia
Contact:

Re: How do i create newspaper like show?

Post by john-doe » Sun Oct 20, 2019 1:17 am

I see what is happening:

The custom code is BEFORE of the leading count calling. Your default.php must work this way. Check it out carefully

Code: Select all

<?php
/**
 * @package     Joomla.Site
 * @subpackage  com_content
 *
 * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');

JHtml::_('behavior.caption');

// If the page class is defined, add to class as suffix.
// It will be a separate class if the user starts it with a space
?>

<div class="blog-featured<?php echo $this->pageclass_sfx; ?>" itemscope itemtype="https://schema.org/Blog">
<?php if ($this->params->get('show_page_heading') != 0) : ?>
<div class="page-header">
	<h1>
	<?php echo $this->escape($this->params->get('page_heading')); ?>
	</h1>
</div>
<?php endif; ?>
<?php if ($this->params->get('page_subheading')) : ?>
	<h2> 
		<?php echo $this->escape($this->params->get('page_subheading')); ?>
	</h2>
<?php endif; ?>
<?php $leadingcount = 0; ?>
<?php if (!empty($this->lead_items)) : ?>
<div class="items-leading clearfix">
    <?php foreach ($this->lead_items as &$item) : ?>
<div class="carousel-item <?php if ($leadingcount === 0){echo "active";} ?>">
<div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?> clearfix"
itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<div class="col-md-6 offset-md-3">
<?php
$this->item = &$item;
echo $this->loadTemplate('item');
?>
<div class="border"></div>
</div><!--offset-->
</div>
</div><!--carousel item-->
<?php
$leadingcount++;
?>
<?php endforeach; ?>
    
	<?php /*foreach ($this->lead_items as &$item) : ?>
		<div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?> clearfix"
			itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
			<?php
				$this->item = &$item;
				echo $this->loadTemplate('item');
			?>
		</div>
		<?php
			$leadingcount++;
		?>
	<?php endforeach; */?>
</div>
<?php endif; ?>
<?php
	$introcount = count($this->intro_items);
	$counter = 0;
?>
<?php if (!empty($this->intro_items)) : ?>
	<?php foreach ($this->intro_items as $key => &$item) : ?>

		<?php
		$key = ($key - $leadingcount) + 1;
		$rowcount = (((int) $key - 1) % (int) $this->columns) + 1;
		$row = $counter / $this->columns;

		if ($rowcount === 1) : ?>

		<div class="items-row cols-<?php echo (int) $this->columns; ?> <?php echo 'row-' . $row; ?> row-fluid row">
		<?php endif; ?>
			<div class="item column-<?php echo $rowcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?> col-md-<?php echo round(12 / $this->columns); ?>"
				itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
			<?php
					$this->item = &$item;
					echo $this->loadTemplate('item');
			?>
			</div>
			<?php $counter++; ?>

			<?php if (($rowcount == $this->columns) or ($counter == $introcount)) : ?>

		</div>
		<?php endif; ?>

	<?php endforeach; ?>
<?php endif; ?>

<?php if (!empty($this->link_items)) : ?>
	<div class="items-more">
	<?php echo $this->loadTemplate('links'); ?>
	</div>
<?php endif; ?>

<?php if ($this->params->def('show_pagination', 2) == 1  || ($this->params->get('show_pagination') == 2 && $this->pagination->pagesTotal > 1)) : ?>
	<div class="pagination">

		<?php if ($this->params->def('show_pagination_results', 1)) : ?>
			<p class="counter pull-right">
				<?php echo $this->pagination->getPagesCounter(); ?>
			</p>
		<?php endif; ?>
				<?php echo $this->pagination->getPagesLinks(); ?>
	</div>
<?php endif; ?>

</div>

On the Menu item place 4 leading articles. If you have more, try with them.
www.aldemar-hernandez.com - Custom templates and design services.


Post Reply

Return to “Templates for Joomla! 3.x”