The main idea behind the mod is to give publishers an option to add a title image to an article but without having to put a full <img ... > code in the article body. The main reason for constructing the mod is that I tend to use mods like the Vasile Rusnac’s Latest News With Intro mod which shortens the article. Mods like that are extremely useful in news sites but come with some inherent problems as long code bits affect the amount of article text that’s actually published. Another reason is that being able to add a title image in an unobtrusive and simple manner is useful for editors/publishers that don’t have a lot of HTML knowledge. All they need to do is paste an image source link into a field, add a short description if needed, and that’s it. No coding required. We’ll do that for them.

The first thing we need to do with this mod is to add two fields to the database, so backup your files and let’s get to it.

1. Go to your database admin interface (I’m assuming PHPMyAdmin here) and add two fields in the articles table, with this data:

ALTER TABLE `articles` ADD `image` VARCHAR( 255 ) CHARACTER SET utf8 COLLATE utf8_bin NULL
ALTER TABLE `articles` ADD `img_alt` VARCHAR( 255 ) CHARACTER SET utf8 COLLATE utf8_bin NULL

Save the change. Note that the collate value should match the value that is set for your other fields in the db that has collation.

2. Go to your sNews installation’s lang folder and open the lang file (by default sNews comes with just one lang file – EN.php). Locate the article structure block and add the following to it.

$l['image'] = 'Article Image';
$l['img_alt'] = 'Alt text';

3. Save and close the file. Then open up your snews.php file. The first thing we need to do here is to add the text field handlers, so find the function form_articles($contents). After the first switch, add this:

$frm_artimg = $_SESSION[_SITE.'temp']['image'] ? $_SESSION[_SITE.'temp']['image'] : $r['image'];
$frm_alt_text = $_SESSION[_SITE.'temp']['img_alt'] ? $_SESSION[_SITE.'temp']['img_alt'] : $r['img_alt'];

4. Then, after the next switch in the same function (just a few lines down), add:

$frm_artimg = $_SESSION[_SITE.'temp']['image'];
$frm_alt_text = $_SESSION[_SITE.'temp']['img_alt'];

5. Further down in the same function, find the html_input block for add articles, and add the following:

echo html_input('text', 'image', 'ai', $frm_artimg, l('image'), '', '', '', '', '', '', '', '', '', '');
echo html_input('text', 'img_alt', 'alt', $frm_alt_text, l('img_alt'), '', '', '', '', '', '', '', '', '', '');

6. Next, in function processing(), add the following into the first block:

$artimg = clean($_POST['image']);
$alt_text = clean($_POST['img_alt']);

7. Further down in processing(), find case (isset($_POST['add_article'])): and in the mysql_query parts below it, add:

image, img_alt, and '$artimg', '$alt_text', respectively.

8. Still further down, find mysql_query("UPDATE "._PRE.'articles'." SET, and add:

image = '$artimg',
img_alt = '$alt_text',

9. Go back up to function articles(). In the beginning of the function there are 3 instances of $query_articles = 'SELECT. In each of these blocks, add the following, for example before "text":

a.image AS aimg,a.img_alt AS aalt,

10. Same function, find the $title part. First we add the selectors, then where they should appear, like so:
(a) after $title = $r['title']; add:

$artimg = $r['aimg'];
$alt_text = $r['aalt'];

(b) change original if(!$_ID) {} to:

if(!$_ID) { if($artimg) {echo $link.$uri.'/'.$r['asef'].'/"><img class="full" src="'.$artimg.'" alt="'.$alt_text.'" /></a>';}
elseif(!$artimg && $_POS != 3) {echo '';}
echo '<h2 class="big">'.$link.$uri.'/'.$r['asef'].'/">'.$title.'</a></h2>';}

(c) and change original else {} directly after that part, to this:

else { echo '<h2>'.$title.'</h2>';
if($artimg && $_POS != 3) {echo '<img class="full" src="'.$artimg.'" alt="'.$alt_text.'" />';}
elseif(!$artimg && $_POS != 3) {echo '';}
}

11. Save your sNews file, then login to your Admin panel and choose to Create or Edit an article. If you have done the steps above correctly, there should now be two new fields – one labelled “Article Image” and one labelled “Alt text”. Test them and make sure they work correctly. As the mod is written, you will get an image next to the article title when the article image field is used (the alt text field is optional).

The next step, how to position and style the article image, is entirely up to you.