Joomla article with custom buttons and images on the right

Question

I have to create Joomla website. I am PHP programmer, but new to Joomla. I have spent a lot, reading tutorials and other staff. The website is very simple, it is visit card for restaurant.

I have installed Joomla 2.5. Spending two days I have managed to do the following: - create menu - create multi language site (2 languages) with language swicher - create simple static pages (articles) - create one page as contact - create simple template just for my website

However, I cannot do some things and I have not found any answers in tutorials or google. If you open this file http://img1.uploadscreenshot.com/images/orig/1/2621034793-orig.jpg you can see images with three different pages on the site:

1) Article with three images on the right. Basically, I do not know what is the best practice to create article with some custom HTML in it (in this case these are images). For example, i can create table with two columns - one for text, another for images. Without Joomla I would create two divs, but how this can be done here??? Also with custom html I need to do the same for each language - I need to add images for each language, I do not like this. I really have not found any solutions for this. Do you have some suggestions?

2) Article with three buttons on the right side. This is article on landing page. This is probably the same question - how to create article with some custom HTML in it (in this case these are three buttons - links to pages inside the website) ? Again I can create table with text and buttons, but this should be done for each language. Is it a good practice? Do you have some other suggestions to create article with three buttons on the right side? Maybe I can create some custom module, but this sounds strange.

3) Contact page with google map. I have create contact page with contact details. This is another question, I would ask other time.

Answer 1

Hello Renathy and welcome to Joomla! 1) You can of course insert divs in the editor and style them with floats; but as you mention this is pretty bad for translation, and allows the user to easily break the layout.

You have the following options:

1.a) Joomla 2.5+ supports an article image and thumbnail that you can specify in the Images and Links group for each article. Quite some work to extend to 3 images, you would need to write a plugin (or do a nasty core hack) and override the view; also it's not well documented. There is a discussion here about it: Add additional images to articles in Joomla 2.5

1.b) Add the extra images as above with the plugin. Then use a module for displaying the images instead of the view override.

1.c) Use a custom image management solution to link images to an article, then a plugin to display them. Easier, but still a lot of work. I have done this on one site and worked fine, although I would change a lot of code now. As far as I know there are no extensions available that will do this.

All three solutions allow you to use proper floating of the contents using divs floats responsive as appropriate, and will isolate the layout of the content from the images, thus obtaining a solid environment for the content editors, and easy translation (although, if you go with 1.a) or 1.b), I strongly advise you to use a proper translation suite such as Falang or JoomFish (Falang is a different port of Joomfish from the old 1.5 version)

2) You will address this as above, with a module. Create in your template a main

<div class="content-box">
<div class="content-main"> here you will place your component's output.</div>
<div class="content-sidebar"> here you will output a new module position, name it "article-sidebar"</div>

Then style it like this:

div.content-box {
 /* here you need a clearfix choose one here: https://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best/211467#211467 */
}
div.content-box div.content-main {
  width:70%;display:inline-block;float:left;
}
div.content-box div.content-sidebar {
  width:29.99%;float:right;
}
div.content-wide div.content-sidebar {
  display:none;
}

But you may not want this on all pages, then you can deal with it programmatically when generating the template.

The idea is: in your template output, where you are writing

<div class="content-box">

instead add a class conditionally when your article-sidebar contains something:

<div class="content-<?php 
if ($this->countModules("article-sidebar")==0) 
  echo "wide";
else
  echo "box";
?>">

This will dinamically change the class of the div, so you only serve 1 css.

At this point, create a module and choose to display it "Only on selected pages" .

3) When you want to change a view, never change the file in place. Instead copy all the view's php to a folder under your template's folder / html/com_contact/contact. Even if you're changing a different layout, you will still need to copy there the default.php. Then change it inserting the google maps.

A final consideration. You should refrain from editing core files. Joomla sometimes issues security updates, and applying them will be painful. Good luck with your site.