Problem styling HTML Galley OJS 3.0

Greetings @twa,

I agree with you. Even more, I think that inject html galley into article detail page would be the best option. And add links to pdf or xml from html itself. But it requires much deeper knowledge of php, than I have now.

Hi @Vitaliy,

This is using the current git master branch, including iframes. It seems to work fine by my eyes, but maybe I’m missing what you’re expecting to see? A screenshot or something might help.

Regards,
Alec Smecher
Public Knowledge Project Team

Greetings @asmecher,

It is strange.
We are not using iframe for now, so I cannot attache new screenshot. There are only screenshots that I took earlier:
Here there are 3 screens, took from the upper part of the monitor.
On the top there can be seen iframe menu before clicking internal link (in-article navigation)
In the middle - after clicking (there is no any iframe menu now)

But we had also another problem - declared in the head external css and javascript were not working. If on your PC all worked well, maybe problem was in php version (we are using 7.0) or something else. Earlier I thought that iframe blocks all external links. There is info in the internet, that mentions it. For example:

But now I am starting to think, that only sites like google block putting link to them in frame. Links to css and js on own site should work…

Hi @Vitaliy,

Would you be able to put your HTML up on an OJS3 site so that I can browse your concrete example and see if I can replicate the behavior? Everything from here looks fine. Clicking external links results in a new tab being opened, which seems like reasonable behavior.

Regards,
Alec Smecher
Public Knowledge Project Team

I have exactly the same problem. We are using OJS 3.0 and i activated the “HTML Article Galley” plugin. The HTML-recognition when uploading a simple html file seems to work, see attached screenshot:

But when i click on the galley link in the published journal, the plain window opens:
http://pcubtestrg1.ub.uni-giessen.de/ojs/index.php/testzs/index

Here is the code of the uploaded file:
`

</head

Text

`

I tried to understand the rest of the thread but didn’t get the solution. Do we have to format the uploaded HTML in some fashion so that the OJS-design is applied? Or have other settings in OJS to be applied?

Greetings @florianruckelshausen,

This feature is not implemented in OJS3. You need to style you html`s by yourself.

Hello @Vitaliy,

one question: On your journal page Prevention of alcohol and other drug use using motivational interviewing among young adults in the Ukraine | Psychosomatic Medicine and General Practice there is a button with the back link to the article abstract (“Go to Main Page” in the upper right, fixed position). Where do you get the link for the button from? Do you add it “manually” to the HTML galley or do you generate it on the fly with a function? If the latter: How do you do this?

Thanks
Tobias

Greetings @twa,

With jquery it will look something like this:

    $(document).ready(function(){ 
    $("body").prepend("<a class="back-button" href="./">Back");
    }); 

Where inside $(“body”) you put yours selector (like in css), where you like to put this button inside. “prepend” means that this element will be created as a child element, situated upper in the node tree than the rest.

This script can be situated inside html file or external javascript file or display.tpl file (inside htmlarticle galley plugin directory). latter have tested only for Lens Viewer plugin but it should work and for Galleys. All changes in plugin files could be lost after each OJS3 upgrade.

1 Like

Greetings @asmecher,

After update I have faced with the same problem related to iframe. You can check it on my html page simply by clicking any intraarticle navigational menu button: Psychosocial rehabilitation and mental health (24th European Congress of Psychiatry materials review) | Psychosomatic Medicine and General Practice
It needs to be noted that I am planning to disable iframes again tomorrow.

Hello @Vitaliy,

can you please try to add this CSS code for the page and try the links again?

    .header_view {
        position: fixed;
        width: 100%;
    }
    iframe {
        padding-top: 30px;
    }

Cheers
Tobias

1 Like

@twa.

Yep, position: fixed!important; resolved the problem. So now I can disable iframe on an even keel :slight_smile:

@Vitaliy,

in my quick test, the links inside the iframe worked with “position fixed;”. But you prefer not to use iframes?

Regards
Tobias

@twa,

Yes, it worked with position fixed. I just have noticed the problem and reported. Maybe other who will use iframes will face it also, so this solution will help them. We prefer not to use iframes, because now are developing own code.

I decided to use “var url = window.location.href;” and do some substring() adjustments for a nicer href attribute, but basically this works. Thanks for this.

Greets
Tobias

Hi @Vitaliy,

My apologies, I didn’t get the chance to test the page while iframes were enabled. Could you temporarily enable it again?

Thanks,
Alec Smecher
Public Knowledge Project Team

Hi @asmecher,

Ok. I have enabled iframe for a while. You can check the link above and click there any internal link (on the left panel or in text).

Hi @Vitaliy,

I’m afraid that’s still behaving as I expect it to – can you describe in detail what the link is doing that’s different from your expectations? (I’m possibly blind to the obvious.)

Thanks,
Alec Smecher
Public Knowledge Project Team

@asmecher,

I get it.
The problems are with Chrome but not Firefox.

Hi @Vitaliy,

Aaaah, I see. With Chromium (which is basically Chrome) the header disappears when I click one of the links. That’s the problem you’re describing?

Regards,
Alec Smecher
Public Knowledge Project Team

Hi @asmecher,

Yep, that`s the problem. Other problem with downloading external css and js seems to disappear. Or I had been missing something.