Skip to content

Instantly share code, notes, and snippets.

@sanderpotjer
Last active May 5, 2023 03:08
  • Star 14 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save sanderpotjer/5488c2a10dceeee7db7d to your computer and use it in GitHub Desktop.
Template override for improved Joomla article submission form
<?php
/**
* @package Article Form override for Joomla 3
* @copyright Copyright (c) 2014 Sander Potjer - www.perfectwebteam.nl
* @license GNU General Public License version 3 or later
*/
defined('_JEXEC') or die;
JHtml::_('behavior.keepalive');
JHtml::_('behavior.calendar');
JHtml::_('behavior.formvalidation');
JHtml::_('formbehavior.chosen', 'select');
// Create shortcut to parameters.
$params = $this->state->get('params');
// Get Category ID
if($this->item->catid)
{
// Existing article
$catid = $this->item->catid;
}
else
{
// New Article
$catid = $params->get('catid');
}
// Get Article ID
if($this->item->id)
{
// Existing article
$id = $this->item->id;
}
else
{
// New Article
$id = '00';
}
// Generate preview URL to article
$url = JRoute::_(ContentHelperRoute::getCategoryRoute($catid));
?>
<script type="text/javascript">
Joomla.submitbutton = function(task)
{
if (task == 'article.cancel' || document.formvalidator.isValid(document.getElementById('adminForm')))
{
<?php echo $this->form->getField('articletext')->save(); ?>
Joomla.submitform(task);
}
}
</script>
<style>
#jform_title {
display: block;
width: 100%;
min-height: 40px;
font-size: 18px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.toggle-editor {
display: none;
}
.chzn-container {
width: 100% !important;
}
.btn-group {
width: 49%;
}
.btn-group .btn {
width: 100%;
}
</style>
<div class="edit item-page<?php echo $this->pageclass_sfx; ?>">
<?php if ($params->get('show_page_heading', 1)) : ?>
<div class="page-header">
<h1>
<?php echo $this->escape($params->get('page_heading')); ?>
</h1>
</div>
<?php endif; ?>
<form action="<?php echo JRoute::_('index.php?option=com_content&a_id='.(int) $this->item->id); ?>" method="post" name="adminForm" id="adminForm" class="form-validate form-vertical">
<!-- Visible fieldset -->
<fieldset>
<div class="row-fluid">
<!-- Left column -->
<div class="span8">
<div class="tab-content">
<div class="tab-pane active" id="editor">
<div class="control-group">
<div class="controls">
<?php echo $this->form->getInput('title'); ?>
</div>
</div>
<div class="control-group">
<div class="controls">
<p><?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_PUBLICATION') ?> <?php echo $url; ?>/<?php echo $id; ?>-<strong id="alias"><?php echo $this->item->alias; ?></strong></p>
</div>
</div>
<div class="control-group">
<div class="controls">
<?php echo $this->form->getInput('articletext'); ?>
</div>
</div>
<div class="alert alert-info">
<?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_READMOREDESC') ?>
</div>
</div>
</div>
</div><!-- End Left column -->
<!-- Right column -->
<div class="span4">
<div class="well">
<h3 class="page-header"><?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_PUBLICATIONDETAILS') ?></h3>
<?php echo $this->form->renderField('state'); ?>
<?php echo $this->form->renderField('access'); ?>
<?php echo $this->form->renderField('publish_up'); ?>
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn" onclick="Joomla.submitbutton('article.cancel')">
<span class="icon-cancel"></span>&#160;<?php echo JText::_('JCANCEL') ?>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success" onclick="Joomla.submitbutton('article.save')">
<span class="icon-ok"></span>&#160;<?php echo JText::_('JSAVE') ?>
</button>
</div>
</div>
</div>
<div class="well">
<h3 class="page-header"><?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_IMAGE') ?></h3>
<div class="control-group">
<div class="controls">
<?php echo $this->form->getInput('image_intro', 'images'); ?>
</div>
</div>
</div>
<div class="well">
<h3 class="page-header"><?php echo JText::_('JTAG') ?></h3>
<div class="control-group">
<div class="controls">
<?php echo $this->form->getInput('tags'); ?>
</div>
</div>
</div>
</div><!-- Right column -->
</div>
</fieldset><!-- End Visible fieldset -->
<!-- Hidden fieldset -->
<fieldset class="hidden">
<?php echo $this->form->getInput('catid'); ?>
<?php echo $this->form->getInput('alias'); ?>
<?php echo JHtml::_('form.token'); ?>
<input type="hidden" name="task" value="" />
<input type="hidden" name="return" value="<?php echo $this->return_page; ?>" />
<?php if ($this->params->get('enable_category', 0) == 1) :?>
<input type="hidden" name="jform[catid]" value="<?php echo $this->params->get('catid', 1); ?>" />
<?php endif; ?>
</fieldset><!-- End Hidden fieldset -->
</form>
</div>
<script type="text/javascript">
// Add title placeholder
jQuery("#jform_title").attr("placeholder", "<?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_TITLEPLACEHOLDER') ?>");
// Transform title to alias while typing
jQuery("#jform_title").keyup(function ()
{
var title = jQuery(this).val();
alias = title.toLowerCase().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-');
jQuery("#jform_alias").val(alias);
jQuery("#alias").html(alias);
});
// Allow alias editing on click
jQuery('#alias').click(function ()
{
var replaceWith = jQuery('<input id="temp" name="temp" type="text"></input>');
var connectWith = jQuery('#jform_alias');
var elem = jQuery(this);
elem.hide();
elem.after(replaceWith);
replaceWith.val(elem.text());
replaceWith.focus();
replaceWith.blur(function ()
{
if (jQuery(this).val() != "")
{
connectWith.val(jQuery(this).val()).change();
elem.text(jQuery(this).val());
}
jQuery(this).remove();
elem.show();
});
// Only allow valid alias characters
jQuery("#temp").bind('keypress', function (event)
{
var regex = new RegExp("^[a-z0-9\-]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key))
{
event.preventDefault();
return false;
}
});
});
</script>
JFIELD_ACCESS_LABEL="Visible for"
OVERRIDE_COM_CONTENT_FORM_IMAGE="Image"
OVERRIDE_COM_CONTENT_FORM_PUBLICATION="This article will be published on"
OVERRIDE_COM_CONTENT_FORM_PUBLICATIONDETAILS="Publication details"
OVERRIDE_COM_CONTENT_FORM_READMOREDESC="<strong>Read More:</strong> use the \"Read More\" button to split an article. Place the cursor in the article where the \"Read More\" button needs to be added, and click on the \"Read More\" button above."
OVERRIDE_COM_CONTENT_FORM_TITLEPLACEHOLDER="Enter your blog post title"
@goslingcools
Copy link

Very nice Sander! Also the timed different methods!

@micker
Copy link

micker commented Mar 16, 2015

hello it realy strange ... if i use this override + j3.4 changing catégorie doesn't work
it always the first in dropdown list
do you have an idea ?

@Gerlof
Copy link

Gerlof commented Jan 18, 2016

Hoi Sander, ik kom in deze override een bug tegen als het gaat om tags.

Tags die bij het maken van het bericht via de override worden toegevoegd, verschijnen wel als tags bij het uiteindelijke bericht zelf en in de tagcloud-module, maar niet in het overzicht met gelinkte berichten (wordt getoond na klik op de betreffende tag).

Het lijkt er dus op dat er geen (volledige) relatie wordt gelegd tussen tags die zijn aangemaakt/geselecteerd tijdens het maken van een bericht via de override en het bericht zelf.
Als ik bijv. via de Administrator de tags in het bericht verwijder en opnieuw toevoeg, wordt het bericht wel getoond in het overzicht met berichten die aan de tag gekoppeld zijn.

Ik ga eens verder kijken wat de oorzaak zou kunnen zijn (vergelijken core-versie van edit.php met de override), maar misschien dat jij meteen weet waar het probleem zit.

Groeten,

Gerlof

@Bodge-IT
Copy link

Hi Sander, I have also implemented this override, thanks for the excellent work. However I am unable to "Insert" an image using the image loader for intro image.
Error I get is:
TypeError: window.parent.jInsertFieldValue is not a function

Any ideas?

@brianteeman
Copy link

Thanks for this Sander

One thing I noticed is that you are not setting the language anywhere which means that even on a monolingual web site it will then be displayed in article manager with a language of 'undefined"

If you add this line then it will be stored as ALL which is the default value
<input type="hidden" name="jform[language]" value="*" />

@pepperstreet
Copy link

pepperstreet commented Apr 24, 2021

Just noticed the ALIAS field live-typing and edit-on-click feature. Cool idea!
It seems not to work with german special characters like äöü ÄÖÜ ß
Probably there are other languages or special characters that are not taken into acount.
I am not a JavaScript Guy, so I would appreciate any tip or help on it ;)

FYI, here is a related StackOverFlow topic with some solutions and an interesting JS Gist link in the comments:

Thanks for reading.
Best regards.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment