Automatically resizing cover pictures

Software Support
1

Does anyone know how to automatically resize cover pictures in OJS?

For example: http://www.wmpllc.org/ojs-2.4.2/index.php/ajrt/issue/view/92

This page has an image of 812 x 1052 which looks fine on 16x9 monitors. When the browser window is at it’s default of 800px, the right edge of the picture is cut off with no scroll bars. We used the above size as it keeps the text clean enough to read.

So, the questions are how to a) configure OJS to resize the picture inline or b) What should the default picture size be?

Thank you!

2

The width and height of the image is calculated for you based on the uploaded file.

You should be able to override this via CSS, however. Something similar to:

#issueCoverImage > a > img {
    max-width: 100%;
    width: auto;
    height: auto;
}
1 Like
3

hey, if I am not an administrator and I just a journal manajer can I do this?

4

Yes, the custom CSS is in your Journal’s “Website Settings” section in 3.x, or in your Journal Setup, Step 5: Look and Feel, in 2.x.

1 Like
5

What if you just want journal covers to auto-resize to fit the page? 5.3.x implies that if applies to the journal page header. Can you clarfify? Thanks.

6

So does this go in the 5.3.x section? Or somewhere else? How does the program know what page to make the change? Or does it just make the change anywhere is sees #issueCoverImage ?

7

To upload custom CSS navigate to:
User Home → Journal Manager → Setup → 5. The Look
Then scroll to section 5.6.

8

Maybe I am denser then normal today… but 5.6 Journal Layout has no place to upload custom CSS per your comments?

9

What version are you using? In 2.4.8, it should appear here:

10

Yes, our version is 2.4.8 of OJS

11

Do you see the “Journal style sheet” upload I highlighted in the image?

12

Yes, we see that. Not aware of how to use this.

Do we create a file like “imagefix.css” and add the following into it?

#issueCoverImage > a > img {
    max-width: 100%;
    width: auto;
    height: auto;
}
13

Yes, something like that. If you are not familiar with CSS, start here:
https://www.w3schools.com/css/

14

Thanks Clinton. I should ask my questions more specifically. Does the CSS file loaded in section 5.3 get appended to the css that is already in place? Is so, a simple text file named resize.css with the commands below could be loaded to update the page characteristic. Yes?

Thank you.

Rich DeVito. aka newbee albeit curious to learn more…

15

The CSS file uploaded here will be appended as the last CSS file loaded in the head element of each page of the journal. It is applied last so that you can override previous default declarations. (Note, some plugins may apply CSS after this file, but generally, this journal-level CSS should be able to do most overrides.)

It will be served out a “journalStyleSheet.css”, I think. Note that uploading a new file here will replace any current file, You will want to accumulate any of your custom declarations to this one file.

16

Outstanding Clinton. Thank you.

Rich DeVito, less of a newbee now…

17

Works like a champ Clinton. Thanks!

Is there a listing of cool other tweaks somewhere?

Cheers and thanks again!

18

We don’t have a specifically curated list of tweaks and suggestions, but this forum does have a Community Showcase category. Some creative journals are highlighted there.

19

Thanks Clinton,

I suggest the following:

You put out a call for tips to your community, you collect them, package them with some details submitted by the originaltor and get everyone to pay $49.95 for the package of tips and tricks as a way to support PKP. I would spend the $49.95 in a heartbeat!

Cheers!

Richard A. DeVito Jr.