Create an easy recipe override for your Joomla site

Food is something that we all need. Let’s create an override for your Joomla site that uses Custom Fields to generate an easy recipe that displays food recipes.

We all need food, the market for good recipes is rising rapidly. We all don’t like to eat or make the same food over and over. If you have an eye for good food you can use Joomla to display your recipes for others to view.

If you like to make good food and like to share your recipes with others, you can easily do this with Joomla, by making a simple override for the mod_article_category (Article - Category Module).

This code was uploaded to CodePen.io by Angela Delise (https://codepen.io/angeladelise/pen/JjXJqgO). But can easily be adapted to a Joomla override using Custom Fields.

PHP Code

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

defined('_JEXEC') or die;

?>


<div class="recipes">


<?php foreach ($list as $item) : ?>
      <!-- Price Table -->
      <?php $customFields = 
			FieldsHelper::getFields('com_content.article', $item, true);
			foreach ($customFields as $customField){
			$customFields[$customField->name] = $customField;
			}?>

<div class="card">
    <div class="card__body">
      <img src="/images/overrides/recipes/
<?php echo $customFields['recipe-image']->value; ?>" alt="
<?php echo $customFields['recipe-image-alttext']->value; ?>" 
class="card__image">
      <h2 class="card__title"><?php echo $item->title; ?></h2>
      <p class="card__description">
<?php echo $customFields['recipe-description']->value; ?></p>
    </div>
    <button class="card__btn">
<a class="" href="/<?php echo $item->link; ?>">View Recipe
</button>
  </div>
  <?php endforeach; ?>
</div>

CSS Code

:root {
  /*   color variables */
  --clr-primary: #d50000;
  --clr-primary-hover: #29e6a7;
  --clr-primary-dark: #039d69;
  --clr-gray100: #f0f7f8;
  --clr-gray200: #cfd8dc;
  --clr-gray300: #a7b7be;
  --clr-gray400: #6b7e86;
  --clr-gray500: #425a65;
  /*   border radius */
  --radius: 0.2rem;
}

.recipes *,
.recipes *::before,
.recipes *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.recipes {
  max-width: 1200px;
  font-family: Oxygen, sans-serif;
  margin: 2rem;
  display:flex;
  flex-wrap: wrap;
  grid-gap: 2rem;
  justify-content: center;
}
.recipes .card {
  max-width: 300px;
  
  
  box-shadow: 0px 2px 20px var(--clr-gray200);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 200ms ease-in;
}
.recipes .card__image {
  height: 12rem;
  width: 100%;
  object-fit: cover;
}
.recipes .card__title {
  padding: 1rem;
}
.recipes .card__description {
  padding: 0 1rem;
  overflow: hidden;
  line-height: 2rem;
  max-height: 8rem;
  -webkit-box-orient: vertical;
  display: block;
  display: -webkit-box;
  overflow: hidden !important;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
}
.recipes .card__btn {
  padding: 1rem;
  font-family: inherit;
  font-weight: bold;
  font-size: 1rem;
  margin: 1rem;
  border: 2px solid var(--clr-primary);
  background: transparent;
  color: var(--clr-primary);
  border-radius: var(--radius);
  transition: background 200ms ease-in, 
	color 200ms ease-in;
}
.recipes .card:hover {
  transform: scale(1.02);
}
.recipes .card:hover, .recipes .card__btn {
  background: var(--clr-primary);
  color: white;
}