Joomla Templates Club 406,261 posts

[kryptos Friend kryptosJoin date: November 2009Posts: 105Downloads:0Uploads:8 Thanks: 9 Thanked: 13 times in 9 posts]

#146690

I have problem with blog view when I use image caption.
Articles with images that have no caption, shows with text wrapped arround picture, but articles with images that have caption, shows with text under the image.

See pictures bellow.

I want text to be wrapped arround picture in both cases, with or without image caption. Is it possible?

---

Attachments:

1. 
2. 

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#326178

Hi kryptos

I have checked in our demo site but could not find this issue.

Could you give me your live url?

[kryptos Friend kryptosJoin date: November 2009Posts: 105Downloads:0Uploads:8 Thanks: 9 Thanked: 13 times in 9 posts]

#326185

thanx, I’ve found out that editor makes a problem.

I use JCE
when I open article on demo site on my local host, I got this

<img src=”images/stories/demo/world/rs-1.jpg” alt=”Sample image” align=”left” title=”Sample image” class=”caption” />

but, when I install JCE editor and open an article, and just update picture with no changes, than save the article, it changes code into this:

<img style=”float: left;” src=”images/stories/demo/world/rs-1.jpg” alt=”Sample image” title=”Sample image” class=”caption” />

I tested it, and when I turn back code like in original demo, it works fine, but when I open article with JCE editor and just update picture, I get something like on second picture, no wrapped text…

so, what are you suggesting?

edit:

I can send you my live url, but there’s no articles with image caption because of this problem. So I made this one Lorem Ipsum example and posted a pictures.

[kryptos Friend kryptosJoin date: November 2009Posts: 105Downloads:0Uploads:8 Thanks: 9 Thanked: 13 times in 9 posts]

#326195

It seems that my answer is the best one on this topic 😀

anyway, I wonder do you attending do do something about that (JCE does not make wrong code), some fixes or something, or do I have to change my editor and if I do which one is the best?

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#326237

Hello kryptos,
I see you are alone on this.
I reproduced your problem on my local install of quickstart-version.

I looked at source-code of webpage before and after installing JCE 1.5.6:

I opened and saved an article without changes
(Artist > 3D Computer Graphics > England stars offer summer coaching)

before:

<div class="article-content">
<p>
<div style="float: left; width: 100px;" class="img_caption left">
<img class="caption" src="/jatelineiii/images/resized/images/stories/demo/artist/3d-3_100_100.jpg" alt="Sample image" title="Sample image" align="left" border="0">
<p>Sample image</p>
</div>
</p>

after:

<div class="article-content">
<p>
<div style="width: 100px;" class="img_caption null">
<img style="float: left;" class="caption" src="/jatelineiii/images/resized/images/stories/demo/artist/3d-3_100_100.jpg" alt="Sample image" title="Sample image">
<p>Sample image</p>
</div>
</p>

So what happens?
before changing editor the generated div around image reads:
<div style=”float: left; width: 100px;” class=”img_caption left”>
after changing to JCE:
<div style=”width: 100px;” class=”img_caption null”>

So the div looses its float:left and its class left
(in addons.css line 111: .left {float: left;}
So it becomes normal div, with text below it.

Question is: why are the properties of this div changed?

When I am right this code is generated in plugins/content/plg_jathumbnail.php
I don’t know what is wrong there but I think a programmer can fix it.

I cannot solve it, just pinpoint the question.
Best regards,
Micrantha

1 user says Thank You to micrantha for this useful post

1. kryptos

[kryptos Friend kryptosJoin date: November 2009Posts: 105Downloads:0Uploads:8 Thanks: 9 Thanked: 13 times in 9 posts]

#326238

Thanks for your reply, micrantha, I hope that someone will do something about this problem, cause I really want to keep my JCE editor and use caption class normally..

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#326239

Yes, I don’t want to miss it either.

I think it is a general issue for this template.

Maybe you could try a ticket to staff about this.

greetings,
Micrantha

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#326331

The problem is from the JCE editor, not any other extenions.

1) The JCE editor automatic replace the ‘align=”left”‘ or ‘align=”right”‘ by the “style=”float:left”” property or the ‘float:right’ property inside the img tag.
2) the “caption” feature was built-in in the joomla package, the joomla system automatic detect ‘class=”caption”‘ inside the img tag and render a bock has format if have


<div STYLE class="img_caption CLASS">
<img class="caption" src="IMAGE" align="CLASS">
<p>Sample image</p>
</div>


( CLASS: equal :left” or “right” )

The value of the “CLASS” demermen by the image alignment mode. if the image has not the “align” property, the value is “null”.

The simplest fix, before saving the content of artcile, you should hide the editor by use Toggle Editor function and save,

[brunotedeschi Friend brunotedeschiJoin date: May 2009Posts: 22Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#327966

<em>@tienhc 156499 wrote:</em><blockquote>The problem is from the JCE editor, not any other extenions.

1) The JCE editor automatic replace the ‘align=”left”‘ or ‘align=”right”‘ by the “style=”float:left”” property or the ‘float:right’ property inside the img tag.
2) the “caption” feature was built-in in the joomla package, the joomla system automatic detect ‘class=”caption”‘ inside the img tag and render a bock has format if have


<div STYLE class="img_caption CLASS">
<img class="caption" src="IMAGE" align="CLASS">
<p>Sample image</p>
</div>


( CLASS: equal :left” or “right” )

The value of the “CLASS” demermen by the image alignment mode. if the image has not the “align” property, the value is “null”.

The simplest fix, before saving the content of artcile, you should hide the editor by use Toggle Editor function and save,</blockquote>

This seems to me a bad way to fix this problem.

JA Thumbnail should work with JCE Editor without having to take this extra step.

[kryptos Friend kryptosJoin date: November 2009Posts: 105Downloads:0Uploads:8 Thanks: 9 Thanked: 13 times in 9 posts]

#327971

Well, I’m not happy with this solution, but what can I do? 🙂

I just replace style=”float:left” tag with align=”left” and everything works fine..

[filmlover7 Friend filmlover7Join date: March 2010Posts: 111Downloads:0Uploads:1 Thanks: 41 Thanked: 1 times in 1 posts]

#338344

<em>@kryptos 158682 wrote:</em><blockquote>Well, I’m not happy with this solution, but what can I do? 🙂

I just replace style=”float:left” tag with align=”left” and everything works fine..</blockquote>
So is it worth it to use JCE with Teline III?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#338527

Dear filmlover7!

with style=”float:left” and align=”left” , you can use one of them to align image with condition: this property is put inside the “img” tag, i do not think that having a different between these properties.

[Author]

Posts