Joomla Templates Club 406,261 posts

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#130754

The lack of spacing to separate the image from the text in an article has been posted by a number of customers. In spite of various attempts, the solutions did not work.

In the Joomla 1.5x-Teline II Demo, a sample image specification would be like this:

<img class="caption" src="images/stories/demo/world/w-3.jpg" border="0" alt="Sample image" title="Sample image" align="left" />

as it turned out, some of the modified articles have an image specification that does not have the “class=”caption”” but instead attempts to define spacing was done manually, such as adding hspace=”14″

<img src="images/stories/demo/world/w-3.jpg" border="0" hspace="14" align="left" />

Many CMS may reject such manual addition of html markups, and require that the mark ups are defined in the css specification, in this case, the template.css

Via FTP

templates => ja_teline_ii => css => template.css

For images, the relevant CSS specifications in the template.css are:

img
{
margin: 0;
padding: 0;
}

img.caption
{
margin-top: 5px;
}

.img_caption
{
color: #999999;
}


Using this information, the solution to the lack of spacing observed around the image would be to add the

class=”caption”

to the image specification, consistent with the default in the Demo for JA Teline II:

<img class="caption" src="images/stories/demo/world/w-3.jpg" border="0" alt="Sample image" title="Sample image" align="left" />

and the spacing is restored.

Cornelio

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#259305

Some people do not want to add caption to the image, or specially the first image. The solution to that as it turned out is also simple.

Do not add the title in the image CSS specifications, as shown here

<img class="caption" src="images/stories/demo/world/w-3.jpg" border="0" alt="Sample image" align="left" />

Cornelio

1 user says Thank You to cgc0202 for this useful post

1. questbg

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#259306

It is difficult to satisfy some people sometimes.

Attempts to address this by changing the CSS specification for the img.caption


img.caption
{
margin-top: 5px;
padding: 0px 0px 0px 0px; /* t r b l */
} /* orig added padding: 0px 0px 0px 0px; */

was only partially successful (see Notes below). It is possible to change the top and bottom padding, but changing the right will push the image to the right causing overlap with the text; while a left padding did not have any effect. Try it.

The above may suggest that the width of the dimensional space (e.g., area including left righ spacing) occupied by the image may be fixed. But, it turned out this is not correct. Reducing the image size did not provide additional spacing for the padding.

The CSS specification for

img.caption

may not be the way to go. The proper way of doing it should already be in the template.css, but I just have not found it.

An alternative is presented below.

Cornelio

Notes:

where:
t => top
r =>right
b => bottom
l =>left

The addition of the

/* */

tells the server software that whatever is in between /* */ are notes and not to be read or executed.

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#259307

The proposed alternative was to create a separate CSS specification, in this case named

class=img_frame

requiring a change in the CSS specification of the image as follows:

<img class="img_frame" src="images/stories/demo/world/w-3.jpg" border="0" align="left" />


note that the “class=caption” was replaced with “class=img_frame“.

Following this change, the top, right, bottom and left may be changed accordingly by changing the CSS specification below for “class=img_frame“:.

img.img_frame
{
margin-top: 5px;
padding: 0px 10px 0px 0px; /* t r b l */
color: #999999;
} /* orig added padding: 0px 0px 0px 0px; */

Try changing the values above for the padding.

There might be a solution, but when “class=caption” was replaced with “class=img_frame“., the caption did not show, even if the image CSS specification was changed as follows:

<img class="img_frame" src="images/stories/demo/world/w-3.jpg" border="0" alt="Sample image" title="Sample image" align="left" />


The above palliative solutions may be more a lack of understanding the CSS for the image specification. Thus, I would be interested to know if someone has better solution.

Thanks.

Cornelio

1 user says Thank You to cgc0202 for this useful post

1. newone

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#259309

In the above experiments, I refrained from touching any of the php scripts. because it may have uninted results, unless you know your sctipting.

I found a different solution that supposedly worked for Ana, based from the script modification by VisiGod that requires modification of the script:

http://www.joomlart.com/forums/topic/image-text-wrap/

<em>@VisiGod 59909 wrote:</em><blockquote>Can you try editing line 77 in templates/ja_teline_ii/html/com_content/section/blog.php

$this->img_align = $this->modparams->get('align',0);
to

$this->img_align = $this->modparams->get('align','left');
</blockquote>

[questbg Friend questbgJoin date: May 2008Posts: 1912Downloads:0Uploads:1 Thanks: 146 Thanked: 339 times in 197 posts]

#259369

<em>@cgc0202 65951 wrote:</em><blockquote>Do not add the title in the image CSS specifications, as shown here

<img class="caption" src="images/stories/demo/world/w-3.jpg" border="0" alt="Sample image" align="left" />

</blockquote>

Brilliant! That works for me!

Now all I have to do is go back through all my articles and apply this fix.

(Oh, and then do the same in Joom!Fish for all the translated ones too!!)

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#259373

<em>@questbg 66021 wrote:</em><blockquote>Brilliant! That works for me!

Now all I have to do is go back through all my articles and apply this fix.

(Oh, and then do the same in Joom!Fish for all the translated ones too!!)</blockquote>

Chris,

I wonder why the “class=caption” was missing in your image specifications.

Also, can you try what VisiGod suggested.

Ana stated in her thread that it worked for her. But, I do not see anything in the VisiGod suggested script change to trigger a spacing.

Cornelio

[Author]

Posts