Please login or register.

Login with username, password and session length
Advanced search  
Pages: [1] 2

Author Topic: [MOD] Article Image  (Read 4744 times)

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
[MOD] Article Image
« on: July 31, 2010, 04:06:53 PM »

A few of us have been thinking about this mod on our own now and then - Sven had a dream about it, it was mentioned in another thread which I can't find right now and then I found myself needing it. So, after solving my initial problems I thought I could publish it, in case there are more people who wants to be able to add an image to an article, like a lead image, a title image if you will (but not replacement for the title). And here it is.

Purpose To add a field in the Article panel for entering an image url. The main use is so that we can have an image "outside" of the article body. Initially I only needed the one field but discussions while working out the mod lead me to see that there's also use for a second field - for the image's alt text - so the full mod shows how to get both those fields in place. There are other ways of doing this, which I'll return to after the mod code.

My guess is that this is useful mostly for news-oriented sites and blogs

Demo? Not much of a demo since the mod only adds an img instance and I haven't done a whole bunch of different positioning/styling between article index view and full article view, but the mod is now in use on http://frdk.com/ - this usage was the original idea I had which prompted the mod but there are many other ways you can use it.

---------------
THE MOD CORRECTED - Point 2.5: $artimg and $alt_text should be within quotes! My fault.

Because we will be adding stuff that affects most of the snews files, including the database, it is recommended that you make a backup of your files before beginning.

0. DATABASE
We're adding two new text fields to the article admin panel, so we need to make room for them in the db, to start with. Like so:
Code: [Select]
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

Note that "collate" should match the collation value that is set for your other db fields.

1. LANG FILE
In each of your lang files - if you have more than one - add these two items to the "article structure" block:
Code: [Select]
$l['image'] = 'Article Image';
$l['img_alt'] = 'Alt text';

2. SNEWS.PHP

2.1. Function form_articles($contents): After the first switch, add the following after $frm_sef_title (we will add the image and alt bits after sef title throughout so you can use that as a marker):
Code: [Select]
$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'];

2.2. After the second switch, add:
Code: [Select]
$frm_artimg = $_SESSION[_SITE.'temp']['image'];
$frm_alt_text = $_SESSION[_SITE.'temp']['img_alt'];

2.3. Still in form_articles, further down, find the html_input block for add articles, and add the following (directly before html_input('textarea',...):
Quote from: corrected
echo html_input('text', 'image', 'ai', $frm_artimg, l('image'), '', '', '', '', '', '', '', '', '', '');
echo html_input('text', 'img_alt', 'alt', $frm_alt_text, l('img_alt'), '', '', '', '', '', '', '', '', '', '');

2.4. Function processing(): In the first block, add:
Code: [Select]
$artimg = clean($_POST['image']);
$alt_text = clean($_POST['img_alt']);

2.5. Further down, find case (isset($_POST['add_article'])): and in the mysql_query parts below it, add:
Code: [Select]
image, img_alt,and
Quote
'$artimg', '$alt_text',
respectively
Update: Make sure that the second part variables both are within single quote marks - I missed that originally... Sorry.

2.6. Still further down, find mysql_query("UPDATE "._PRE.'articles'." SET, and add:
Code: [Select]
image = '$artimg',
img_alt = '$alt_text',

2.7. 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":
Code: [Select]
a.image AS aimg,a.img_alt AS aalt,

2.8. Same function, find the $title part. First we add the selectors, then where they should appear, like so:
(a) after $title = $r['title']; add:
Code: [Select]
$artimg = $r['aimg'];
$alt_text = $r['aalt'];

(b) change original if(!$_ID) {} to:
Code: [Select]
if(!$_ID) {
if($artimg) {echo $link.$uri.'/'.$r['asef'].'/"><img 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:
Code: [Select]
else {
echo '<h2>'.$title.'</h2>';
if($artimg && ($_POS != 3)) {echo '<img src="'.$artimg.'" alt="'.$alt_text.'" />';}
elseif(!$artimg && ($_POS != 3)) {echo '';}
}

And that is the end of the code modifications. This mod will then give you two new fields in the Article (new/edit) panel - one labelled "Article image" and the other labelled "Alt text", where you can input the url to your image as well as its alt text. If you leave the alt text field empty, the printed source will be
Quote
<img src="image-url/name.type" alt=""
. (If you don't enter a url in the article image field then no img tag will be published, so nothing to worry about there.) I'll try and have representative screen grabs ready soonest so you can see how it works before trying it. (Or, simply try it. ;))

At the beginning I mentioned there are other ways of doing this. A simple method is to tap in to the existing $r['asef'] and $_DESCR variables. It's untested but doing something like the following might suit those who want a simpler solution (just make sure that $_DESCR is among the globals for articles() function):

Code: [Select]
if (!$_ID)  {
echo '<div class="indexpost">
<p class="date">'.$link.$uri.'/"><strong>Published: '.$a_date_format.'</strong></p>
<img src="image-folder/'.$r['asef'].'" alt="'.$_DESCR.'" />
<h2>'.$link.$uri.'/'.$r['asef'].'/">'.$title.'</a></h2>';
} else {
echo '<div class="article">
<p class="date">Published: '.$a_date_format.'</p>
<h2>'.$title.'</h2>
<img src="'.$r['asef'].'" alt="'.$_DESCR.'" />
</div>';
}

An alternative to using $_DESCR for the alt text might be to use $title instead, although there are some concerns that may be bad SEO practice (even if the same might be true for using $_DESCR), so ... I'm leaving the choice up to you. 8)

The mod has been tested and verified as working.
Credits to Sven, Keyrocks and philmoz for testing, fault finding and suggestions.
Enjoy!

// UPDATE //
The if(!$_ID) {...} else {...} bits in article contains a filter for if $_POS !=3. That filter has been corrected in the code above, like this:
Code: [Select]
($_POS != 3)
« Last Edit: August 20, 2012, 01:59:16 PM by Fred K »
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: [MOD] Article Image
« Reply #1 on: July 31, 2010, 06:00:14 PM »

So naturally I had to make a silly mistake ... but it's been corrected and verified again. Sorry.
Here are a couple of screenshots of the Admin panel and the result:

Admin panel:


Article index view:

Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: [MOD] Article Image
« Reply #2 on: August 01, 2010, 12:17:18 AM »

Thanks for tackling this one Fred.
I had not given it much thought while I was testing it yesterday morning to figure out why it wasn't working.
But... now that you've posted it as a finished mod... I am already loving it.

I have a half-dozen paid staff that handle the content on a day-to-day basis on this community portal site which has been running well using a really heavily modified version of my old 1.6 MEMU package.

It's currently using a modified version of Mattonik's Image Links Panel mod which gives the editors a list of links to choose (from the folder they are uploaded to) and click a link from, and a full HTML link to the image gets generated in the text-area. This is just fine for me but not so good for the paid staff who know very little about HTML and have been pestering me to move to FCK Editor. I did that last winter but once a few of them got playing with it, they went overboard using FCK's styling and got into trouble with it. So I disabled it. They are still having problems with HTML... most often accidentally dropping a closing tag or missing part of a tag... and they always call me to fix it when the get a screw-up. (end of long story)

This Article Image mod of yours suddenly looks like a real worthwile solution for those low on the HTML knowledge scale. It would allow them to simply paste in the file-paths and have the image show up with the article without fiddling with HTML. Love it.

And... it's leading me to think of other stuff I could add fields for to make their lives easier too. Funny how one discovery can lead to others.  8)
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: [MOD] Article Image
« Reply #3 on: August 01, 2010, 11:08:41 AM »

This Article Image mod of yours suddenly looks like a real worthwile solution for those low on the HTML knowledge scale. It would allow them to simply paste in the file-paths and have the image show up with the article without fiddling with HTML. Love it.
+1

Really a great Mod.
Bravo Mr Fred.
Et un Karma pour Monsieur !

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: [MOD] Article Image
« Reply #4 on: August 02, 2010, 02:01:34 AM »

Merci Philippe, thanks Doug. I'll see if I get anywhere with the modal dialogue version - I think that might be a better solution, especially for HTML-impaired folks.

As for additional fields, you should take a look at the new WIP Jason's just posted ... it'll give you some tools to play with when it's operational. Here: http://snewscms.com/forum/index.php?topic=9219.0
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: [MOD] Article Image
« Reply #5 on: August 02, 2010, 04:02:25 PM »

I've added the mod to http://frdk.com/ so you can see the actual output (on articles). I have a more elaborate thing coming for another site but this gives you an idea of how it can be used.
Logged

sibas

  • Sr. Member
  • ****
  • Karma: 23
  • Posts: 451
    • www.simply4all.net
Re: [MOD] Article Image
« Reply #6 on: August 10, 2010, 03:29:53 PM »

Great mod!! I was also dream for this  ;D
karma++
Logged

infomix

  • Newbie
  • *
  • Karma: 7
  • Posts: 19
Re: [MOD] Article Image
« Reply #7 on: November 27, 2010, 01:57:18 PM »

Nice mod, it was exactly what i was looking and now i'm using on my site. Thanks :)
Well, but i need to point two minor corrections:

Step 2.3 - second line
Code: [Select]
echo html_input('text', 'img_alt', 'alt', $frm_artimg, l('img_alt'), '', '', '', '', '', '', '', '', '', '');
$frm_alt_text instead $frm_artimg

Step 2.8 (b) - fourth line
Code: [Select]
echo '<h2>'.$link.$uri.'/'.$r['asef'].'/">'.$title.'</a></h2>';
Just missed the css class "big" in element <h2> (Not exactly necessary to fix this)
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: [MOD] Article Image
« Reply #8 on: November 27, 2010, 04:11:37 PM »

You're right about 2.3 infomix - sorry about that miss. It will be corrected.
2.8 - yeah, I originally wrote the mod using a modified version of snews where class="big" wasn't used so I assume it simply slipped through the cracks of my spindly fingers.

Karma for pointing out the mistakes. ;)
Logged

infomix

  • Newbie
  • *
  • Karma: 7
  • Posts: 19
Re: [MOD] Article Image
« Reply #9 on: November 30, 2010, 07:26:09 AM »

Thanks  :), here's my implementation of this mod


Before my post, I even tried sending a karma for you, but i don't know how to (snews forum - newbie detected  ;D)
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: [MOD] Article Image
« Reply #10 on: November 30, 2010, 06:52:28 PM »

I like the way you've implemented Fred's Article Image mod.
Looking at your image, it might be faily easy to use sNews as an online store, using each article to feature a product with its own photo and description.
A Karma to you!  :)
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: [MOD] Article Image
« Reply #11 on: December 23, 2010, 09:39:10 AM »

(...)

At the beginning I mentioned there are other ways of doing this. A simple method is to tap in to the existing $r['asef'] and $_DESC variables. It's untested but doing something like the following might suit those who want a simpler solution (just make sure that $_DESC is among the globals for articles() function):

Code: [Select]
if (!$_ID)  {
echo '<div class="indexpost">
<p class="date">'.$link.$uri.'/"><strong>Published: '.$a_date_format.'</strong></p>
<img src="image-folder/'.$r['asef'].'" alt="'.$_DESC.'" />
<h2>'.$link.$uri.'/'.$r['asef'].'/">'.$title.'</a></h2>';
} else {
echo '<div class="article">
<p class="date">Published: '.$a_date_format.'</p>
<h2>'.$title.'</h2>
<img src="'.$r['asef'].'" alt="'.$_DESC.'" />
</div>';
}
:-\
Hello Fred
I tried it by adding $_DESC to the article funk global variables and it didn’t work.
Also I’ve tried by adding description_meta to the 1st query and no way: I always have an empty alt. ???
Since you’ve posted the Mod did you try to call the article’s description to be printed into the alt attribut of the image ?

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: [MOD] Article Image
« Reply #12 on: December 23, 2010, 04:30:56 PM »

$_DESC is wrong, my fault. It's $_DESCR. Look in the globals section and you'll see it:
Code: [Select]
if(!empty($R['description_meta']))  $_DESCR = $R['description_meta']; else $_DESCR = $R['description'];
Tried it, works just fine, but in my opinion it shouldn't be used since description keywords usually does not describe the image. I know I mentioned it might be an economic alternative, but I'm having second thoughts on that, for the above reason. Alt text -as you know- should describe the image and not be primarily used as an SEO tool for the article. Though that is just my opinion.

Sorry for the mislead. Use $_DESCR.
Unfortunately it seems I can't edit the original post myself. Anyway: use $_DESCR, not $_DESC.
« Last Edit: December 23, 2010, 04:33:21 PM by Fred K (agentsmith) »
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: [MOD] Article Image
« Reply #13 on: December 24, 2010, 03:46:34 PM »

$_DESC is wrong, my fault. It's $_DESCR. Look in the globals section and you'll see it:
Code: [Select]
if(!empty($R['description_meta']))  $_DESCR = $R['description_meta']; else $_DESCR = $R['description'];
Tried it, works just fine, but in my opinion it shouldn't be used since description keywords usually does not describe the image. I know I mentioned it might be an economic alternative, but I'm having second thoughts on that, for the above reason. Alt text -as you know- should describe the image and not be primarily used as an SEO tool for the article. Though that is just my opinion.
Not as I intend to use it. But As I still can’t make it work and I’m not able to show you yet.
Sorry for the mislead. Use $_DESCR.
I tried it too. But I think I have a bug somewhere as I just can extract the default description.
Unfortunately it seems I can't edit the original post myself.
:-\ On my side too I can’t edit any post.  ???

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: [MOD] Article Image
« Reply #14 on: December 24, 2010, 05:57:51 PM »

Check that you have included $_DESCR in the globals for articles()...
(If you have, then yes, probably a bug at your end.)

Merry xmas. ;)
Logged
Pages: [1] 2