Joomla Templates, Joomla Extensions for the Joomla CMS

If you have ever used Joomla, you may noticed that default Joomla FrontPage has a blog layout presentation combining contents from different section/categories all together. This format is awkward and inappropriate for content display. Fortunately, we have created D4J eZine Component, the alternative way to display Joomla content items in flexible and elegance way.

D4J eZine is the component that provides next generation of positioning content items in Joomla mainbody area. It allows users to divided all Joomla content items to logical categories and set multiple categories to be displayed in the page. With eZine you are no longer restricted by Joomla default plain positioning mechanism. You are now able to expose maximum contents in a elegance and flexible way. In this tutorial, we teach you using and customizing D4J eZine component in your site.

I. Install your D4J Ezine

First of alll, access to Client Area: http://designforjoomla.com/client/client_login.php.

You must register an user account on Client area, log on Client area with your account and order Full/Trial D4J Ezine component. You are supplied a key to upgrade license for your site using Ezine and receive key file via your email when you submit that key with your domain. In case you don’t receive key file with your mail, you can download it from Client Area from http://designforjoomla.com

Via Joomla components installing manager control,browser for D4J Ezine component:

Select {UpLoad File& Install}  button and click {Continue } to finish your installing:

 

 

 

b. IMAGE

This group of parameters includes all setting for displaying images on your site contents. You can select other displaying method of them that you need: eZine method or Joomla default method of content images, link images… You can also set the displaying size images …etc.

• Hide first : due to eZine automatically get the image associates first   tag found in an article for making thumbnail and link image so you might not want this image becomes visible in the full article page. In this case, please select Yes . Select No will display the first image when reading full article
• Real thumbnail: Instead of using HTML tag`s width and height attributes to resize image, create real thumbnail file for article thumbnail, link image and content image (require GD2 library compiled with PHP or ImageMagick / NetPBM software installed in your server)
• Thumbnail directory: Relative path from Joomla root directory to where you want to store thumbnail created by eZine. The thumbnail directory must be writeable  (chmod it to 0777 if in Unix/Linux system)
• Image library: set up your image library/software to handle creation of real thumbnail. You can select one of: GD2/ ImageMagick/NetPBM
• Path to ImageMagick/NetPBM:  if not choose to use GD2, enter the path where ImageMagick / NetPBM is installed in your server

• Link Image Type: the action to be occurred when user click to link image. You can set type of content image linking to news item, image(popup) or no hyper-link.
• Process Method: set method for link image when you want image to display different from source image. You can choose enlarge small image,reduce large image or select both of them.
• Keep Image Aspect Ratio: yes or no to keep ratio of image basing source image: fit to width,f it to heigh,f it both or no keeping.
• Link Image Size: set size of image displaying with the item link. Link Image Resize Method  parameter above will act accordingly to the size you set here.
• Default Link Image: full URL or relative path from your Joomla! root dir to an image to use as default link image if no any { mosimage }  bot tag found in an article. Leave blank will create empty table cell with the size of link image width and height.

iv/ Content Image Settings

Config displaying image in content when you choose to use eZine for Processor. This is very useful when you want to publish on website really big images, but in content item those images have to be small and even more with predefined size. That`s where eZine Content Image Settings comes to play (This parameter will has no option if you do not choose eZine (mambot)).

• Processor: choose to use eZine or Joomla default displaying method.
• Margin: set margin distance for image of content item.
• Padding :set padding for image of content item.
• Process Method : this parameter will decide a displaying of images loaded via mambot. This feature provides users with three options to resize images: Reduced large image only/Enlarge small image only or both method, which can greatly help when having a deal with big images.
• Keep Image Aspect Ratio: yes or no to keep ratio of image basing source image: fit to width, fit to heigh, fit both or no keeping for content.
• Content Image Size: set the size of content image displaying on eZine page when you use eZine replacing mambot of Joomla.
• Click Thumbnail Show Real Size: enable or not “click thumbnail show real size” function.When this function is turn on,your site user can see real size of image with a popup (Yes or No) by clicking on image. Your image will link to a popup window.
• Show "Click to Enlarge": yes or no. when this option is “yes”, your site user will see a text message with the image. The content of message can be entered in the “click to enlarge box below.
• "Click to Enlarge" Text: type a message that will be shown with the content image.
• "Click to Enlarge" text position: set position for text value that you enter in “Click to Enlarge” tex field: bottom or top of the image.
• "Click to Enlarge" link css class: you can customize your style of the message that you have typed with this item.To do that,you fill this field by one of css class in your template_css.css file .E.g: you can replace eZine default value “readon” with “weblinks” …and more…
• Popup Window Max Size: et max size for popup image windows. E.g:600×400.
• Show "Print" link in popup window:  enable or not showing “Print” link in popup image window.
• "Print" link text: value of the message for “Print” link that you see on popup image window. Filling this parameter with your text. E.g: “print this picture"
• Show "Close" link in popup window: enable or not showing “Close” link in popup image window.
• "Close" link text: value of the message for “Close” link that you see on popup image window. Filling this parameter with your text.E.g: “close this popup”
• "Print", "Close" links css class: set style for “Print” and “Close” link similar with setting on “Click Enlarge” link css class. You replace default value with other class name that you have in css file if you want. You can also add a new class for "Print", "Close" links css to ezine css file and using it(see detail in “Edit eZine CSS” part).

• Icons Position: Position of PDF; Print; Email icons/buttons in full article page.
• Arrangement for Top: How to arrange PDF, Print, Email icons/buttons at top in full article page.
• Arrangement for Bottom: How to arrange PDF, Print, Email icons/buttons at bottom in full article page.
• Icons or Text for Top: How to display PDF, Print, Email icons/buttons at top in full article page.
• Icons or Text for Bottom: How to display PDF, Print, Email icons/buttons at bottom in full article page.
• Text for "PDF": enter text that will show for creating “PDF” document link when you choose Text only or Icon&text. E.g: creat PDF this article.
• Text for "Print": enter text that will show for creating “Print” document link when you choose Text only or Icon&text. E.g: Print this article.
• Text for "Email": enter text that will show for creating “Email” document link when you choose Text only or Icon&text. E.g: mail this article to a friend.

• Subscribe/Unsubscribe page title: enter title that will display on Subscrible/Unsubscrible page.
• Pre subscribe/unsubscribe form text: text message that you want to inform user before they Subscrible/UnSubscrible newsletter.It order above Subscrible/Unsubscrible form.
• Post subscribe/unsubscribe form text: text message that you want to inform user before they Subscrible/UnSubscrible newsletter.It order under Subscrible/Unsubscrible form.
• Show list of published eZine page: yes or no. If you select yes, eZine will shows full list of eZine page providing newsletter on subscrible/unsubscrible page. User can select one. If not, you will get a new parameter to select one eZine page that you want to provide newsletter service in eZine component administrator area.So,your site user only subscrible or unsubscrible newsletter that ezine page when they click on “Newsletter” link.

• Lowercase all URL: This parameter might be overwritten by the settings of SEF component.
• Replace symbol character with: you can user you characrer to replace symbol character in URL.
• SEF URL Format: eZine component provides three URL format to select one.This format URL will be on address bar of browser: /article/ ,/eZine_category/article/ or /eZine_page/eZine_category/article.
• eZine page field: the title showing on eZine page, you can select Menu name or eZine title page.
• eZine category field: select section/catagory Name or Title.
• Content item field:  Select article name or alias
  
• Multi-page form: ex: %s_page_%d

3. eZine Page Manager

To use eZine on frontent, you must creat eZine page first. All eZine Pages are managed in eZine Page Manager page. From here you can create new eZine page, edit existing one and/or remove them. In this example, we guide you to creat a frontpage content. eZine Page is the place holder for eZine Category content. You can imagine eZine Page like a visual bridge which connects your content items from eZine Categories to your website visitors. From one side you create eZine Page and then you add eZine Category to fill out the page. From the another side you link your eZine Page to menu item, so to let your website visitors click on it and see eZine Category. In the administrator component manager,select D4J eZine v2.8 -> eZine Page Manager :

Select New button   to creat new eZine page:

General Tab:
General settings are the minimum information you have to set to get eZine Page works. All parameters are very easy to understand.

• Page name: enter the name of eZine page. This is also name of menu that you link this page to a menu. Because name to be displayed in menu and hence, it’s should be not too long. Name with 15-20 characters is good choice... E.g:Home…
• Page title: enter the title of eZine page. Title to be displayed at the top of content page. In comparison with page name parameter you can define here little bit more details here.The title will show on eZine page only when you choose Yes option for “Show page title” parameter.E.g: test ezine frontpage…
• Show page Title: Using this parameter,you have two options: Yes for showing Page title and No for no showing your page title.
• Newsletter Subscribe Link: this parameter for enabling or no Newsletter service on eZine page. Layout Tab: eZine Page layout settings is the definition of how eZine Categories should be arranged in eZine Page (User can setup presentation layout not only for content items within an eZine Category, but also for eZine Categories within an eZine Pages). This apparently doubles presentation layout variation for content presentation. You can set for your eZine page layout on frontent. E.g.featured article layout…Simply, you use default values of eZine setting.

• Enable featured article: Display content item marked to show in frontpage as Featured Article (yes/no).
• Show "Featured Article" title: turn on/off displaying feature article on eZine page (yes/no).
• "Featured Article" title text: text that you enter will display like category title for featured article. E.g: Featured Article…
• Limit to sections: select section that feature article belongs to.
• Limit to categories: select category that feature article belongs to.
• Words count: How many words to display for featured article intro-text. 0 means no truncate (full intro-text).
• # Leading: How many featured article in leading block?
• Thumbnail position: Thumbnail position for featured article in leading block.
• # Intro: How many featured article in intro block?
• # Columns: How many column to arrange featured article in intro block?
• Thumbnail position: Thumbnail position for featured article in intro block.
• Order article by: select ordering article method to displaying in feature block.
• Layout:in this part,you can customize your ezine page,arrange eZine categories basing on blocks. Ezine component provides three other block besides a feature article block.In Block, you can arrange eZine categories dueing to your demand.
• # Block 1 categories: How many eZine category you want to group to Block #1.
• # Block 1 columns: How many column you want to arrange eZine category in Block #1 into
• # Block 2 categories: How many eZine category you want to group to Block #2.
• # Block 2 columns: How many column you want to arrange eZine category in Block #2 into
• # Block 3 categories: How many eZine category you want to group to Block #3.
• # Block 3 columns: How many column you want to arrange eZine category in Block #3 into

• Enable Cover: turn on/off cover on your eZine page.
• Cover Display Method: Definition of method cover should be displayed. If "Joomla Part" is selected, cover will be displayed within eZine Page output area. There are two options to choose: Joomlapart or StandAlone. If "Stand Alone", cover will be shown in it’s independent webpage without any template’s design elements.
• Cover Auto Redirect: Using redirecting to eZine page without clicking… You have to enter timeout value for refreshing page when you customize this parameter or leave it "0", so to turn off this function..
• Cover Image: Using an image as Cover.Here you can choose desired image by using Image Selector which let you navigate through Joomla image folder and see preview for images. Also you can remove cover image as well.
• Cover HTML Code: Using HTML code as Cover. This parameter is for experienced users who wants to have not just cover image, but a whole html page. You define here html code for Cover Page. For that,you need to know about html program.

After all, Select Save button ( )to finish new page:

To enable this homepage click to publish it and click to set this page to menu link (with default, new eZine page is in Unpublished status- ( ) (In “Newsletter Subscribe Link”  parameter, you can customize its status: publish ( ) for showing or Unpublish( ) for no showing newsletter service on eZine page) .E.g: we set it to mainmenu with select title in red color “ “:

Select (or not) Frontpage option, menu type (mainmenu, othermenu, topmenu or usermenu). Additional parameter "Front Page" define to bring menu link on top or not. Once menu link is on the top, Joomla will load the content it links to first and eZine Page becomes front page. Final step, click on button,you will get an eZine page that users of your site can access from frontent menu, the name of menu is also same of eZine page that you have created before. But now, it don’t have anything. In the next section, we will know how to add contents to this eZine page.

4. eZine Category Manager

eZine Category is the definition of one or group of content items. Also eZine Category provides series of parameters to define how it’s content items should be displayed in eZine Page. That is the key mechanism that provides you flexibility of displaying content items on the front page. There are 2 types of eZine Category: Content  and Separator.

a. Content

These are content items from Joomla sections and categories. No magic here, eZine just takes out the content items from Joomla section/category you selected and set them as eZine Category content. You can manage contents that show on eZine page with your select Components -> D4J eZine v2.8 -> eZine Page Manager in administrator control area:

• Category: name of eZine Category consisting of 2 parts, category type and content name, divided by colon. For example, "Section: Frequently Asked Questions" means that eZine Category contain all items in section "Frequently Asked Questions".
• Show Category Title: enable or disable to show category on eZine page.
• Published: Definition to publish eZine Category or not.
• Reorder: Definition of order in which eZine Category will be arranged on eZine Page.
• Order: Manual order definition. You can manual define here order number for eZine Categories and then click Save button.

• # Leading articles: The number of content items you want to display as leading items in eZine Category block in eZine Page. Term "leading" here has the same meaning as in Joomla. I.e. leading items will take whole width space of it’s containing eZine Category block in eZine Page. Usually this number varies from 3 to 5.
• Words per Article: Set the number of words in article to display on eZine page as intro text.
• # Intro articles: The number of content items you want to display as intro items in eZine Category block in eZine Page. Term "intro" here has the same meaning as in Joomla. I.e. intro item will take width space of the column it’s enclosed by. One eZine Category block may have 1 or several intro item columns, so it provides you freedom to design the layout. To get maximum effective space it’s recommend you to have number of intro items dividable to number of intro item columns.
• # Intro columns: The number of columns you want to have in eZine Category to arrange intro content items in. Items will be arranged row by row from left to right. You can use this information to fine tune items placement.
• # Links: Number of links to display in "More"  block. General you can display as much links as you like, but remember that if you set up to display links with thumbnails, considerable space will be taken.
• # Link Columns: Number of columns where to arrange links. It’s recommended not to have more than 3 link column. Best method is to set number of link columns equal to number of intro item columns.

 

• Linked Category Title: If checked eZine Category’s title will become the link that directs you to page with all content items included in the eZine Category. This link behave exactly like "More in…" link that is displayed at the end of eZine Category block.
• Frontpage Item Only: If checked eZine will process only content items that are marked as Front Page items in Joomla Content Items Manager page.
• Intro Text Only: If checked only intro part of content item will be shown. Otherwise full item will be displayed.
• Items Order Type: Defines order in which eZine will process items.
• Show "More in..." Link: If checked "More in … " link will be shown at the bottom of each eZine Category block. This link will direct you to page with all items included in the eZine Category.

Display Tab:

• Thumbnail Position (Leading): Set position for leading article thumbnail images.
• Thumbnail Position (Intro): Set position for intro article thumbnail images.
• Category Title Image: The image that will replace eZine Category`s title. This is very useful when you want to have nice graphic title for your eZine Category. In this case, just create this graphic title and set it as Content Title Image.
• "More in..." Link Image: The image that will replace "More in…" link. The main mission of this image is the same as Content Title Image. With this parameter you can set up nice graphic "More in…" link.
• Intro with Image: If checked eZine will show all images that are exist in content item’s intro part. Otherwise these images will be ignored.
• Links with Image: If checked all links in "More" block will be displayed with small thumbnails. eZine will take first image in item and resize it accordingly to the settings from Global Settings page.
• More In parameters: other manager to set eZine displaying…

Click button to add your content, select Content section or Content Category :

and click button to continue:

 

Select Section that you want to show it on eZine page (checked box). Click button to finish:

 

You can set values for properties in General Tab, Layout Tab, Content Tab and Display Tab (see the over part of this tutorial)… First with default, content adding is in Unpublished ( ) status, you need to publish ( )them manual.

b. Separator

Separator can be Joomla single content item, Joomla static content item or your custom html code. The last is useful when you want to put custom html codes for banner exchange links or google adsense code.

To add Separator, accessing your eZine Category Manager administrator area.Select button. eZine provides three options to choose:

Your selecting is HTML Code option.Click on button to continue (or to back the eZine category manager page). eZine component also uses Joomla editor to edit html code, so, you can copy and paste directly in editor window or select button to update your html code:

 

 

Your result will displays immediately after you click on button:

 

 

After all steps, you can get a good result on your frontent. It can be more professional.

5. Newsletter manager

By using this item, you can manage eZine newsletter on eZine page.To do that, select “Components” -> ” D4J eZine v2.8” -> ”eZine Newsletter manager”. You will get eZine newsletter management control admin with toolbar:

First time you run that,you don’t have any eZine newsletter page. Using “ ” button to create one:

 

• Get newsletter content from:  select eZine page you want from list of eZine newsletter enabling.
• Template for use with this newsletter: Choose template for this newsletter page. It means your newsletter get newsletter content page with this template. eZine component provides a full list of templates that your site has.

Newsletter content: After you select an eZine page to be newsletter, you get content in newsletter editor. You can modify it if you need.  Using %NAME% will be replaced with receiver`s name, %EMAIL% will be replaced with receiver`s email and %UNSUBSCRIBE% will be replaced with the unsubscribe link, if this placeholder is not included in the content of newsletter, it will be automatically appended to end of newsletter before send out. OK… E.g: adding a congratulation “Welcome to designforjoomla.com…Thanks”

And now, apply you work with “ ” button …  you will see your newsletter page. Since this time, you can use it to send newsletter contents…To edit a newsletter page, in the eZine Newsletter management,select on the page will be edited and use “ ” button on toolbar:

To manage newsletter user, select “ ” button on tool bar .This helps you to manage your site user who has subscribled on eZine page. You can also use “ ”, ”  ” button… to add or remove user from newsletter list. By clicking on send button after you select one ore more, eventhought all pages, you will send your site newsletter to users in newsletter list.

.page_title{

margin-top:1em;padding:5px 10px;text-align:right;

font-family:Verdana,Arial,Helvetica,sans-serif;

font-size:150%;

font-weight:bold;

border-bottom:#d9d9d9 solid 1px;

background:#f2f2f2

}

 

• Styles of feature article in eZine page.

.featured_block{

margin:1em 0;padding:0.5em;

background:#f8f8f8;

border-top:1px solid #dddddd;

border-bottom:1px solid #dddddd }

.featured_title{

font-family:Verdana,Arial,Helvetica,sans-serif;

font-size:130%;

font-weight:bold;

margin-bottom:0.5em;

text-align:left;

border-bottom:#d9d9d9 dotted 1px }

.featured_body{}

• Styles for category title:

.category_title {

font-family:Verdana,Arial,Helvetica,sans-serif;

font-size:130%;

font-weight:bold;

text-align:left;

margin:0.5em 0.1em;

width:auto;

border-bottom:#d9d9d9 dotted 1px }

 

More Tutorials:

How to test-drive Joomla! templates on your PC

D4J Joomla Templates tutorial