News Article Display

The display of article content is very important to most PostNuke websites. Styles and themes let you customize the appearance of content on your site to a great deal, but there are some instances in which code limitations might be an issue for you. The good news is the code is available for you to edit to suit your needs. The following sections discuss three commonly requested changes to how PostNuke handles article display.

Theme-Based Topic Graphics

A feature commonly requested in the community is the ability to offer multiple themes to site users while also better integrating article topic images into the differing themes. By default, PostNuke topic images are contained in the global directory location /images/topics/. A user can switch themes, but the same topic icons are used for every theme. If you have customized your topic icons to best fit with a given theme, they are unlikely to look as good when applied to a different design.

The solution to this problem, of course, is to hack PostNuke's source to reference topics by theme. All it takes is the creation of a folder named "topics" under each theme's images directory and the editing of each reference to a topic icon path within PostNuke.

You can start by creating a set of topic icons designed to work with different themes. Look at the images displayed in Figure 22.1. The example icons are simple, standalone designs with differing colors backing the central image. The themes in this case are perhaps designed to give users a choice of color while keeping the general layout the same. You could just as easily create a number of completely different designs with different topic icons, but this example keeps it simple.

Figure 22.1. Theming your topics for a more polished design.

The images in the example are part of the book's online materials, so you can download them for use with this walk-through. Alternatively, create your own set of new images and apply them to your custom themes.

First set up each of your themes. If you are making color variants of a single theme, rename the theme to reflect the change, "mytheme-blue," for example. Activate all of the themes using the Xanthia Theme Engine administration page. Test the different themes to be certain they are all working before you begin with the hack steps.

Tip

Xanthia theme users can create color variants of a given theme easily by simply editing the xaninit.php file in the root folder of the copied theme. Change the color codes in the CreatePalette function, and when the copy is added, it displays the new colors.

Next add a directory to each of your themes. It should look like this:

 /themes/mytheme/images/topics/ 

You should mirror the directory structure used by the rest of PostNuke, so make the directory name simply "topics" and use all lowercase letters. The path must be identical across all active themes, and remember PHP is case sensitive.

Copy each topic icon into its respective companion theme's directory. Each image must have the same filename for the system to work, so if you are using the sample icons, rename them at this time to remove the color reference in the filenames. For example, rename icon-mainboard-purple.gif to just icon-mainboard.gif.

There are five pages where topic icons are displayed. To complete the hack, edit the five files that make the calls to the global directory. Each edit is outlined in the following sections.

Active Topics Page

First, you can fix the Active Topics page. This is the page reached through the Topics link in the Main Menu. Open your text editor and load this file for editing:

 /modules/Topics/index.php 

Scroll down in your editor to around line 80 where you should see the following echo statement:

 echo "<td align=\"center\">\n"     ."<a class=\"pn-normal\" href=\"modules.php?op=modload&amp;name=News&amp;file=index&amp;catid=&amp;topic=". pnVarPrepForDIsplay($topicid)     ."\"><img src=\"". pnVarPrepForDIsplay($tipath)."". pnVarPrepForDIsplay($topicimage)     ."\" alt=\" ".pnVarPrepForDIsplay($topictext)."\" /></a><br />\n"     ."<span class=\"pn-normal\">".pnVarPrepForDIsplay($topictext)."</span>\n"     ."</td>\n"; 

This is the line that displays the image. Duplicate the line and comment out the backup copy. In the middle of the statement is the key <img> tag. Just after the source attribute begins, add in a call to the theme path. The additional code you are adding is themes/".pnUserGetTheme()."/. The changed statement looks like this:

 echo "<td align=\"center\">\n"     ."<a class=\"pn-normal\" href=\"modules.php?op=modload&amp;name=News&amp;file=index&amp;catid=&amp;topic=". pnVarPrepForDIsplay($topicid)     ."\"><img src=\"themes/".pnUserGetTheme()."/". pnVarPrepForDIsplay($tipath)."". pnVarPrepForDIsplay($topicimage)     ."\" alt=\" ".pnVarPrepForDIsplay($topictext)."\" /></a><br />\n"     ."<span class=\"pn-normal\">".pnVarPrepForDIsplay($topictext)."</span>\n"     ."</td>\n"; 

Tip

The $tipath variable is still used in the sample code, which translates to images/topics/. If you use a different naming convention for your theme images, you need to replace the $tipath call with the different path as a hard-coded line here.

In your browser, load the Active Topics page. You should see the specialized icons you added to your theme (see Figure 22.2). Test your other themes by adding &theme=mytheme2 to the end of your URL in your browser's location bar, where "mytheme2" is replaced by the theme name you want to test. Submit the URL change and test your other themes.

Figure 22.2. Two themes with different topic icons.

News Article Pages

Next take a look at the display of news articles. The topic icon appears on the news home page with the short text and on the full article page after a click-through. Both of these pages are fixed using the same change.

Open this file in your editor:

 /modules/News/funcs.php 

Scroll down roughly two thirds of the way through the file to about line 352 where you see this set of lines:

 // Link to topic image if there is a topic if (isset($info['tid']) && !empty($info['tid'])) {     $searchtopic = '<a  href="modules.php?op=modload&amp;name=News&amp;file=index&amp;catid=&amp;topic='.$info['tid '].'"><img src="/books/1/160/1/html/2/'.pnConfigGetVar('tipath').$info['topicimage'].'" style="padding:5px;" alt="'.$info['topictext'].'" /></a>'; } else {     $searchtopic = ''; } 

Similar to the previous change, seek out the <img> tag and add the same themes/'.pnUserGetTheme().'/ code just after the source attribute. Note the quotes in the additional code have changed to single; the PHP code you are editing now uses single quotes for its echo statements, and it's a good idea to keep it consistent. For a refresher on the differences between single and double quotes, review Chapter 19, "Dynamic PHP and PostNuke."

The lines with completed changes look like this:

 // Link to topic image if there is a topic if (isset($info['tid']) && !empty($info['tid'])) {     $searchtopic = '<a  href="modules.php?op=modload&amp;name=News&amp;file=index&amp;catid=&amp;topic='.$info['tid '].'"><img src="/books/1/160/1/html/2/themes/'.pnUserGetTheme().'/'.pnConfigGetVar('tipath').$info['topicimage'].'" style="padding:5px;" alt="'.$info['topictext'].'" /></a>'; } else {     $searchtopic = ''; } 

Note

Depending on how your theme is configured, you might not see any topic icons on the news home page; some themes don't display topics on the home page. The hack instructions in this section change the icon call itself, but the call always needs to be performed in your theme for an icon to appear, regardless of the image's path.

Review your new article pages in the different themes to be certain they are working. You should now see screens similar to that shown in Figure 22.3.

Figure 22.3. Customizing your site's article topics.

Submit News Preview

When users submit news articles, they are required to preview their entry before being able to submit the article for review in the wait queue. The preview screen displays the chosen topic icon with the story.

To change this page, open the main Submit News index in your editor:

 /modules/Submit_News/index.php 

Scroll to about line 199 and look for this echo statement:

 echo "<img src=\"$tipath$topicimage\" align=\"right\" alt=\"$topictext\" />"; 

Comment out a copy of the line for backup, and add the same theme path code to the live line that you've been using: themes/".pnUserGetTheme()."/.

The changed line should match the following:

 echo "<img src=\"themes/".pnUserGetTheme()."/$tipath$topicimage\" align=\"right\" alt=\"$topictext\" />"; 

A test of the submit page should show a change's icon, like the one shown in Figure 22.4.

Figure 22.4. Previewing the custom theme topics.

Add Story Preview

The preview screen for the Add Story module also uses the topic icons. Open the module's functions files, and scroll to about line 98:

 /modules/NS-AddStory/addstory_functions.php 

The line you are looking for is quite short and should be easy to spot:

 echo "<img src=\"$tipath$topicimage\" alt=\"\" />"; 

Copy the line, comment out the backup, and add the theme path to the statement as follows:

 echo "<img src=\"themes/".pnUserGetTheme()."/$tipath$topicimage\" alt=\"\" />"; 

You should browse to the Add News form and test the preview to be certain the code change was done properly.

Topics Administration Menu

Though the general public might never see them, icons are also displayed in the Topics Administration menu. To complete the theme-based icon changes, open the Topics Administration file in your editor:

 /modules/Topics/admin.php 

At about line 69, you see this statement:

 if (pnSecAuthAction(0, 'Topics::Topic', "$topicname::$topicid", ACCESS_EDIT)) {     echo "<a href=\"admin.php?module=".$GLOBALS['module']."&amp;op=topicedit&amp;topic\"><img src=\"$tipath$topicimage\" alt=\"\" /></a><br />"         ."<a href=\"admin.php?module=".$GLOBALS['module']."&amp;op=topicedit&amp;topic\"><span class=\"pn-normal\"><strong>".pnVarPrepForDisplay ($topictext)."</strong></span></a></td>"; } else {     echo "<img src=\"".pnVarPrepForDisplay($tipath)."".pnVarPrepForDisplay($topicimage)."\" alt=\"\" /><br />"         ."<span class=\"pn-normal\"><strong>".pnVarPrepForDisplay($topictext)."</strong> </span></a></td>"; } 

The if statement is performing a security check, but the topic image is displayed in both branches. You need to add the theme path to both <img> tags to complete this change. After the source begins, add this code: themes/".pnUserGetTheme()."/. The if statement with the changed lines looks like this:

 if (pnSecAuthAction(0, 'Topics::Topic', "$topicname::$topicid", ACCESS_EDIT)) {     echo "<a href=\"admin.php?module=".$GLOBALS['module']."&amp;op=topicedit&amp;topic\"><img src=\"themes/".pnUserGetTheme(). "/$tipath$topicimage\" alt=\"\" /></a><br />"         ."<a href=\"admin.php?module=".$GLOBALS['module']."&amp;op=topicedit&amp;topic\"><span class=\"pn-normal\"><strong>".pnVarPrepForDis- play($topictext)."</strong></span></a></td>"; } else {     echo "<img src=\"themes/".pnUserGetTheme()."/".pnVarPrepForDisplay($tipath)."".pnVarPrepForDisplay($to picimage)."\" alt=\"\" /><br />"         ."<span class=\"pn-normal\"><strong>".pnVarPrepForDisplay($topictext)."</strong> </span></a></td>"; } 

With this last change, all of the topics displayed throughout your PostNuke site will be tied to your theme. Be certain that any additional themes you add also provide support for the personalized topics.

Advanced Theme-Based Articles

The previous examples are meant to walk through the basic changes required to customize article components for theme display. After you are comfortable with the code, consider how this feature can be used to enhance your PostNuke site design.

You can very easily set up different paths to display different images for different pages. The preview icons could be simple and small compared to the Admin icons. The public articles could be completely integrated into your article blocks. You could also define sets of images to be used with your articlesone image for an icon, another to tile in the article's background, and so on.

PostNuke is designed to provide a foundation for rapid website development, but you need not ever feel the application limits design options. Making extensive hacks to the PostNuke source still takes a great deal less time than it would to build a comparable system with the changes from scratch.

Article Title and Links

Most PostNuke sites revolve around their news and articles. PostNuke does a great job formatting articles 95% of the time using modular theme systems. But every so often, some element is just not accessible, and it's time for a hack. The following sections examine what can be done to format those article elements hard-coded in PostNuke.

Custom Article Title Style

Although you can change nearly everything about a new post visually, the title text of a post is a link assigned the global style class pn-title. You can edit the pn-title class in your theme style sheet to change the title, but that also changes the appearance of every other reference to the class.

You might notice that there are calls to the pn-title class in many of the themes. Although the style is used with themes, there are additional references to it in the PostNuke module source code that are nested inside the theme, and, therefore, have precedence over the theme style.

Note

Alternatively, instead of creating customized styles hard-coded into your PostNuke install, you could strip out all styles from the source and rely solely on the theme design to format the content. This method has the benefit of being a potentially simpler hack up front, but if your site uses many active themes, making the changes once globally is faster.

The problem is remedied by separating the article style from other references, and it's easy to change the class attribute at the source and be certain the new specific class will carry throughout your site no matter what theme you are currently using.

Start up your editor and open the Functions file from the News module:

 /modules/News/funcs.php 

Scroll to line 308 and look for this set of lines:

 // Allowed to read full article? if (pnSecAuthAction(0, $component, $instance, ACCESS_READ)) {     $title = "<a class=\"pn-title\" href=\"$links[fullarticle]\">$info[title]</a>"; } else {     $title = $info['title']; } 

The first branch of the if statement builds the link for users who have access to read the full article. The second branch simply displays the title text as is.

Comment a copy of the code to save the original formatting, and change the lines to appear something like this:

 // Allowed to read full article? if (pnSecAuthAction(0, $component, $instance, ACCESS_READ)) {     $title = "<a class=\"news-title\" href=\"$links[fullarticle]\">$info[title]</a>"; } else {     $title = "<span class=\"news-title\">".$info['title']."</span>"; } 

The pn-title class reference was changed to the more specific news-title, and for the second branch you added a span to apply the style directly to the title without the link anchor.

The category title text is also displayed with the title, but the variable does not require a conditional check before it's added to the News $preformat array. Scroll down a bit further to the array creation code:

 // Set up the array itself $preformat = array(                "bodytext" => $bodytext,                "bytesmore" => $bytesmorelink,                "category" => "<a href=\"$links[category]\">$info[cattitle]</a>",                "comment" => $comment,                "hometext" => $hometext,                "notes" => $notes,                "reads" => $reads,                "searchtopic" => $searchtopic,                "print" => $print,                "readmore" => $readmore,                "send" => $send,                "title" => $title,                "version" => 1                ); 

Tip

Assign different styles to each component to have complete control of how your content looks.

Change the category line to include a style class, such as

 "category" => "<a class=\"category-title\" href=\"$links[category]\">$info[cattitle]</a>", 

You have one other component to fix. Between the category and title, a colon is displayed. It is meant to be part of the category display, but is added to the $preformat array as catandtitle.

Look for this assignment around line 392:

 $preformat['catandtitle'] = "$preformat[category]: $preformat[title]"; 

You can customize the colon character by adding a <span>:

 $preformat['catandtitle'] = "$preformat[category]<span class=\"category-title\">:</span> $preformat[title]"; 

The category-title style was used in the example code, but you could also create yet another style specifically for the colon character.

Note

Some themes call the title and category variables separately. Those themes do not use catandtitle and, therefore, changes to that variable are ignored when those themes are in use.

Separate Styles for Article Styles in News and Blocks

Another interesting style dilemma occurring with article titles is how they are formatted for display in blocks. A number of core blocks display a list of articles, such as Past Articles, Story Titles, and Today's Big Story. Setting a style for the title also sets the same style everywhere else the title is listed.

An easy solution to the issue is to create an additional variable in the $preformat array for the title. The second variable can be formatted differently and called from your theme independently of the main news article title.

Edit the functions file, and return to line 308 where the title code is created:

 /modules/News/funcs.php 

Add additional lines to create an alternative reference to the title:

 // Allowed to read full article? if (pnSecAuthAction(0, $component, $instance, ACCESS_READ)) {     $title = "<a class=\"news-title\" href=\"$links[fullarticle]\">$info[title]</a>";     $title2 = "<a class=\"news-title2\" href=\"$links[fullarticle]\">$info[title]</a>"; } else {     $title = "<span class=\"news-title\">".$info['title']."</span>";     $title2 = "<span class=\"news-title2\">".$info['title']."</span>"; } 

Tip

You don't have to use the generic numerical system provided in the examples. Change "news-title2" to better fit your needs, such as "news-block-title." Just remember to be consistent with whatever names you decide to use.

Add the additional assignments for both the category and title variables to the $preformat array so that it looks like this:

 // Set up the array itself $preformat = array(                "bodytext" => $bodytext,                "bytesmore" => $bytesmorelink,                "category" => "<a class=\"category-title\" href=\"$links[category]\">$info [cattitle]</a>",                "category2" => "<a class=\"category-title2\" href=\"$links[category]\">$info [cattitle]</a>",                "comment" => $comment,                "hometext" => $hometext,                "notes" => $notes,                "reads" => $reads,                "searchtopic" => $searchtopic,                "print" => $print,                "readmore" => $readmore,                "send" => $send,                "title" => $title,                "title2" => $title2,                "version" => 1                ); 

You can also duplicate the catandtitle variable, if needed, like so:

 if ($info['catid']) {     $preformat['catandtitle'] = "$preformat[category]<span class=\"category- title\">:</span> $preformat[title]";     $preformat['catandtitle2'] = "$preformat[category2]<span class=\"category- title2\">:</span> $preformat[title2]"; } else {     $preformat['catandtitle'] = $preformat['title'];     $preformat['catandtitle2'] = $preformat['title2']; } 

Forcing Story Count on Homepage

At times, it's important to be able to force the specific number of stories displayed on your site's home page. The most common need occurs when you have designed a specialized theme that has room for X number of posts, and having too many or two few might hurt the design. It can also be as simple as wanting to globally set a different count of stories, such as three, four, or seven, which is not possible using the drop-down list box in the Website Configuration form.

If you change the global setting in the Website Configuration form, you only affect anonymous users and newly created accounts. Existing users have a separate database entry storing their story count. This hack overrides the user's settings and makes the site display consistently.

Removing User Choice

The first part of this hack removes the users' ability to choose how many stories are displayed. Your website always shows only the count you have chosen in the global Website Configuration form.

Open the main News module file in your editor:

 /modules/News/index.php 

Scroll to about line 130 where you find these statements:

 if (pnUserLoggedIn()) {     $storynum = pnUserGetVar('storynum'); } if (empty($storynum)) {     $storynum = pnConfigGetVar('storyhome'); } 

The first if statement pulls the user's story count from the nuke_users table. The second resorts to the default site setting if the $storynum variable is still empty. What we want to do is comment out the user checks so that the count always comes from the Website Configuration page. The edited code looks like this:

 // if (pnUserLoggedIn()) { //     $storynum = pnUserGetVar('storynum'); // } // if (empty($storynum)) {     $storynum = pnConfigGetVar('storyhome'); // } 

That is the main change to force the story count, but now we need to remove the option in the users' Homepage Configuration screen to prevent confusion. There's no reason to advertise the ability for users to set their home page story count if you have removed the privilege.

The user account Homepage Configuration file is located here:

 /modules/NS-Your_Account/user/modules/changehome.php 

Open the file in your editor and look for this echo statement, starting around line 22:

 echo "<form action=\"user.php\" method=\"post\">"     ."<span class=\"pn-normal\">"._NEWSINHOME." "._MAX127."</span> "     ."<input type=\"text\" name=\"storynum\" size=\"3\" maxlength=\"3\" value=\"" . pnVarPrepForDisplay(pnUserGetVar('storynum')) . "\">"     ."<br /><br />"; 

You want to remove the <span> and <input> tag content, but you need to leave the <form> opening that lets users still use the Personal Menu Block feature. The easiest way to go about the change is to duplicate just the first line and edit it to end the echo with a semicolon. Comment out the originals to save the source. Here is the completed change:

 echo "<form action=\"user.php\" method=\"post\">"; // echo "<form action=\"user.php\" method=\"post\">" //     ."<span class=\"pn-normal\">"._NEWSINHOME." "._MAX127."</span> " //     ."<input type=\"text\" name=\"storynum\" size=\"3\" maxlength=\"3\" value=\"" . pnVarPrepForDisplay(pnUserGetVar('storynum')) . "\">" //     ."<br /><br />"; 

Setting the Story Count

Setting the number of stories to exactly the count you want is also quite simple. Go back to the News index file:

 /modules/News/index.php 

Edit the $storynum variable assignment at about line 130 to whatever number you want. For example:

 $storynum = 3; 

Now, the display is set to the exact number you want, and all users are treated the same regardless of their login.