(OJS) Galley, Icons instead of text

Hello,

In the galley under the “Full Text” block, instead of the words “PDF” or “HTML” I would like to have representative icons. Is that possible? Does anyone know how can I go about doing that?

Thanks so much!

Hi @mbauerCOM,

What application are you using, and what version?

Regards,
Alec Smecher
Public Knowledge Project Team

Oh sorry, I’m using OJS and it is version 2.4.4.1

Hi @mbauerCOM,

That’ll involve editing templates/issue/issue.tpl (and probably writing up some custom CSS).

Regards,
Alec Smecher
Public Knowledge Project Team

Alec, ¿do you have examples? :smiley:

Hi @dagosalas,

No, unfortunately – but the templates are relatively easy to tinker with; Smarty templates are basically HTML with some extra syntax for looping, variables, etc.

Regards,
Alec Smecher
Public Knowledge Project Team

If you set class="{$galley->getGalleyLabel()|escape}" may works. and will get class=“PDF” or class=“HTML”.

<a href="{url page="article" op="view" path=$articlePath|to_array:$galley->getBestGalleyId($currentJournal)}" {if $galley->getRemoteURL()}target="_blank" {/if}class="file">{$galley->getGalleyLabel()|escape}</a>

Works with only one locale, don’t works fine with foreign languages, because (my case) I get class=“PDF (English)”.

@dagosalas

Many thanks for your suggestion
I did edit templates/issue/issue.tpl
and made some adjusment in css
it works and icon shows accordingly based on filetypes in TOC.

I wish that way also works for file links in editor submission view /editor/submissionEditing/ .
is there any other tpl file to change for the class=“file” ?

many thanks in advance and best wishes,

Romy

Hi @reprabowo,

I would suggest exploring the templates in templates/sectionEditor/submission.

Regards,
Alec Smecher
Public Knowledge Project Team

1 Like

@asmecher

but now I have no idea what to replace the file class :blush:

Regards,
Romy

Hi @reprabowo,

You should be able to use the getFileType method on a submission file to determine its MIME type.

Regards,
Alec Smecher
Public Knowledge Project Team

1 Like

Thank you Alec,

I get in the class selector class=“application/pdf” where I can not get it works.
Is there any restriction in the class selector name using “/” ? I have checked using firebug the class does not show up.

Best wishes,
Romy

Hi @reprabowo,

Yes, I suspect the / is causing problems. See e.g. this discussion. You can use Smarty filters to clean these up – see e.g. the Smarty replace modifier.

Regards,
Alec Smecher
Public Knowledge Project Team

Thank you Alec,

I already googled and read that discussion before but not thoroughly read it.
I found a solution and solved the class selector problem of " / " by adding " \ " in css file.

a.application/msword {
    display:inline-block;
    padding-left:20px;
    line-height:16px;
    background:transparent url("http://journal.bio.unsoed.ac.id/public/site/images/extension_doc.png") top left no-repeat;
}

\ added

a.application\/msword {
    display:inline-block;
    padding-left:20px;
    line-height:16px;
    background:transparent url("http://journal.bio.unsoed.ac.id/public/site/images/extension_doc.png") top left no-repeat;
}