Allignment of image in announcement OJS 3.0.2.0

Software Support
1

When we want to insert image in announcement it is always left aligned. When we use the same code in intro to journal the selecte dimage is center aligned.
Check this link so you can see result:
http://journal.jusk.rs/index.php/ijaq
Image is nicely aligned in editor but after saving the announcement it moves on left in published announcement. :confused:
We would like to have both aligned center.

Thanks

2

Hi @vvucic,

It doesn’t look like the same markup is being permitted in both places. The journal intro field supports arbitrary HTML, but for announcements, the elements/attributes are filtered; see config.inc.php's allowed_html directive.

Regards,
Alec Smecher
Public Knowledge Project Team

3

Markup as in editor is like this:
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="/public/logo jusk on wall.png" alt="logo jusk on wall" width="450" height="318" align="middle" /></p>.

I put in config.inc.php
allowed_html = “a[href|target|title],em,strong,cite,code,ul,ol,li[class],dl,dt,dd,b,i,align,u,img[src|alt|align],sup,sub,br,p”
but I still have the same issue. Should it be done through template (Bootstrap) style files or so? I think that HTML5 does not accept align tag.
Please advise.
Thanks

4

Yes, I think the align attribute would be stripped as invalid in HTML5. If you add an allowed attribute of style to your img in allowed_html, you should be able to do this in inline CSS with a float. Alternately, you could use classing or ids to tag the markup and target that within your template’s CSS.

5

Hi all,

Also note that allowing these elements will permit their use by “unprivileged” (e.g. author) users in the various text fields that support rich content.

Regards,
Alec Smecher
Public Knowledge Project Team

6

I am not afraid that anyone will loose much time centering image in his/her text.After all changes now even in editor is not centered . So after each “improvement” image is worse and worse placed.

7

Hi there,

I have the same problem as above in OJS 3.1.2-4 and followed the advice of @ctgraham.
The line in the config.inc.php looks like this

allowed_html = "a[href|target|title],em,strong,cite,code,ul,ol,li[class],dl,dt,dd,b,i,u,img[src|alt|style],sup,sub,br,p"

and the text I entered in the announcement editor is this

<p><img style="float: left; width: 30%; padding-right: 2ex;" src="/public/site/images/username/filename.jpg" /></p> <p>text that should be floating around the image<\p>

The preview in the announcement editing window looks nice and correctly formatted but the formatting on the website looks like the img style options got stripped when saved.

8

It looks like HTMLPurifier treats these as risky and/or invalid by default:
http://htmlpurifier.org/phorum/read.php?3,6308

You’ll need to tell HTMLPurifier to allow the “style” attribute by modifying the code. This will be similar to the PKPString modification suggested here: