bookpeg
Friend
I upload a picture for the title of each article , but when i try to create spacing with the inbuilt insert/edit picture function within the articles top settings it doesnt show on the frontend…
could anyone explain?
bookpeg
Friend
Sorry i posted twice by accident :S if a moderator sees this if you want remove np…
sorry again
questbg
Friend
Hi Bookpeg
Make sure you’ve got ‘caption’ class assigned, otherwise the spacing function doesn’t work.
When you import a picture, tick the ‘caption’ box. Even if you don’t want a caption!
(if you don’t want a caption, just leave the ‘Title’ field empty)
Hope that works!
Chris
bookpeg
Friend
Great that worked — excellent thankyou!
questbg
Friend
Glad to hear it worked! Took me awhile to figure it out too 😀
codger
Friend
While we are on the subject, has anyone worked out how to edit this so that (for instance) the border is outset to create a “frame” effect, or even just to increase the whitespace around an image?
joeflynn
Friend
Yes, especially white space to the right of the image…so that the text doesn’t butt up against the picture…
Thanks
codger
Friend
Well joeflynn, as guest bg has already pointed out, you need to select the “caption” class to get a left (or right) margin – and I have just found out how to control the amount of whitespace around the image. Although I use Teline II, it was with my current work with Rochea that I needed this. I found the solution in the Beez template.css and adapted it to Rochea. I have not tried it in Teline II, but it may well work for you. The code I used in Rochea is below – you can adapt it to suit your needs.
/* Caption fixes */
.img_caption.left {
float: left;
margin-right: 2em;
}
.img_caption.right {
float: right;
margin-left: 2em;
}
.img_caption.left p {
clear: left;
text-align: center;
}
.img_caption.right p {
clear: right;
text-align: center;
}
I also experimented with all-round padding to create the amount of air that you need round the image. It works a treat! (In Rochea, anyway.) 😉
Anyone who tries this, please let us know how you get on.
1 user says Thank You to codger for this useful post
joeflynn
Friend
Wow~! That’s exactly the code I needed. I might change it to 1em, but the change is the thing.
Many thanks. You can see it here. The picture used to sit right next to the text. http://altenergytools.com/index.php?option=com_content&view=article&id=128:50-percent-more-power-output&catid=59:industrial&Itemid=183
scotty
Friend
Hi folks, let me explain what’s going on here.
In line 75 of your template.css you’ll find…
img {
margin:0;
padding:0;
}
This will override any hspace or vspace you added to the image via the editor and this is why if you do not use ‘caption’ there is no space applied.
Using caption is not really the best thing to do as caption is a very special class in Joomla. It’s actually a plugin. It takes the Title tag and uses it to apply the caption under your image. This adds extra load to your page (not much though tbh).
The correct way to fix this would be to add a new style to your template.css that is specifically for images inside articles. For example…
.article-content img {
margin:0 10px;
}
…will add a 10px margin to just the left and right sides of your images. You do not need to apply a class as it will do it to all images inside articles (that don’t have a specific class already applied) automatically.
You could also use specific classes for left or right aligned images…
/* Use class="left" */
.left {
float: left;
margin-right: 10px;
}
/* Use class="right" */
.right {
float: right;
margin-left: 10px;
}
If you want to add a small white border….
.border {
border: 1px solid #333333 !important;
padding: 3px;
background: #FFFFFF;
}
You can then combine these classes like…
<img class=”left border” height=”230″ width=”290″ title=”Sample image” alt=”Sample image” src=”images/stories/demo/sample.jpg”/>NOTE: TinyMCE adds border=”0″ by default and that’s why we add !important above.
Hope this helps clear up some of the confusion. 🙂
1 user says Thank You to scotty for this useful post
codger
Friend
Good stuff, scotty.
The “caption” rule is applied to the containing div and the image itself can be styled separately. So for those of us using “caption” only one rule is required to make a border. In my Rochea project I settled on
.img_caption img {
padding: 5px;
border: 1px solid #cccccc !important;
}
but as always, you can tweak the detail to suit the requirements of your site.
joeflynn
Friend
I just put the three bits that Scotty specified into the template.css (at line 80) and it works mighty fine without the caption being hit. For me, that is one less thing to remember to click.
Here’s what I used, thought I will probably tweak it to 5. Following that is a link to a page that is using it. Again, many thanks to all.
.article-content img {
margin:0 5px;
}
/* Use class=”left” */
.left img {
float: left;
margin-right: 5px;
}
/* Use class=”right” */
.right img {
float: right;
margin-left: 5px;
}
bookpeg
Friend
Could you explain why it doesnt work in i.e
it does work in firefox but not i.e
?
codger
Friend
The only ie I bother to test in these days is IE6.
Fwiw, using caption with my ccs above, the margin is doubled in that browser. The webkit browsers Safari and Chrome as well as Opera all display my Rochea project as intended.
This topic contains 16 replies, has 6 voices, and was last updated by 
We moved to new unified forum. Please post all new support queries in our New Forum
