Friday , December 20 2024

Display video instead of preview in K2 Joomla material

The task is to display a video from YouTube on the K2 material page instead of the uploaded image.

The output of the image on the site is like this:

<?php if($this->item->params->get('itemImage') && !empty($this->item->image)): ?>
		  <!-- Item Image -->
		  <div class="itemImageBlock">
			  <span class="itemImage">
			  	<a class="modal" rel="{handler: 'image'}" href="<?php echo $this->item->imageXLarge; ?>" title="<?php echo JText::_('K2_CLICK_TO_PREVIEW_IMAGE'); ?>">
			  		<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" />
			  	</a>
			  </span>

			  <?php if($this->item->params->get('itemImageMainCaption') && !empty($this->item->image_caption)): ?>
			  <!-- Image caption -->
			  <span class="itemImageCaption"><?php echo $this->item->image_caption; ?></span>
			  <?php endif; ?>

			  <?php if($this->item->params->get('itemImageMainCredits') && !empty($this->item->image_credits)): ?>
			  <!-- Image credits -->
			  <span class="itemImageCredits"><?php echo $this->item->image_credits; ?></span>
			  <?php endif; ?>

			  <div class="clr"></div>
		  </div>
		  <?php endif; ?>

In the admin panel, I created an additional field for K2, called it videolink. On the page, I displayed in this field a link to a video on youtube, in the format https://www.youtube.com/watch?here_id_video (important: the domain youtu.be/*** will give an error and you need to use the first option).

After testing different conditions, in the item.php output file around the code above, I added a condition with a replacement:

<?php if(isset($this->item->extraFields->videolink->value) === true  && empty($this->item->extraFields->videolink->value) === false): ?>
<div class="itemExtraFieldsValue">
<iframe width="350" height="197" src="<?php echo $this->item->extraFields->videolink->value; ?>" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="clr"></div>

<?php else: ?>

/*here is the code with the output of the picture, I published it at the beginning of the post*/

<?php endif; ?>

If you need to display the video in the list of materials in the category, use this article: Display video instead of preview in K2 Joomla category.

About admin

Hi there! My name is Iryna, I am a web developer from Ukraine. While working on freelance projects I often face different technical issues and in this blog I publish articles on how to solve them. I am also interested in digital drawing and in this blog you will find brief tutorials that helped me and hopefully can help you as well.

Check Also

How to get a link in an email where the form is filled out via Chronoforms

This task is very simple, for normal CMS. For Joomla, I publish the solution in …

Leave a Reply

Your email address will not be published. Required fields are marked *