Css and Smarty syntax problem in indexJournal.tpl

[marlara]

I am doing a child theme from this theme and changing the indexJournal.tpl I noticed a problem in the line 29th:

style="background-image: url('{$publicFilesDir}/{$homepageImage.uploadName|escape:"url"}'){if $showJournalSummary}, linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)){/if}">

The syntax seems wrong in some way. Being not to experienced with Smarty I corrected like that:

<div
        class="homepage_image{if $showJournalSummary} linear-gradient"{/if}
         style="background-image:url('{$publicFilesDir}/{$homepageImage.uploadName}')"
 >

And in the less file I inserted:

.homepage_image.linear-gradient{
    background-blend-mode: multiply;
    background-color: #666666;
}

[asmecher]

@marlara, can you write a little more about the problem you were encountering? What did the incorrect syntax look like?

[marlara]

Hi, yes sorry. If you see there https://github.com/pkp/classic/blob/main/templates/frontend/pages/indexJournal.tpl there is a red enlightened part. When I copied the page into VS Code with the HTML Language Mode it said to me

) expected [Ln 104, Col 48]

And when I uploaded the child theme with that page, without any modifications by my part, the theme didn't work. So I thought that that red enlightened part was an issue and changed the logic there. It worked.

[Vitaliy-1]

Compiled code looks correct. @marlara, what error message do you get? (Not all IDE check Smarty syntax well)

[marlara]

Hi, sorry for not replying. I didn't have an error message, simply when doing a child theme the child theme didn't worked at all (was all white). With that code up the child theme worked.

(I need to test with the new version 1.1)

But now I have a different problem :)

With the version 1.1 of the Classic theme the linear gradient is not being applied in any way.

EDIT: I figured it out: in the new version https://github.com/pkp/classic/commit/c52d63ede235767d0ed22b9a586c7bf1105fdb9d#diff-3a1616c44bb1db6e75c06b25805d977851db5d6baba51be6dbf37b39c153a0a1 the "if" is after, and it must be before. Because first it compiles the linear-gradient, then the image.

So i just changed the line 29 in: style="background-image: {if $showJournalSummary}linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), {/if}url('{$publicFilesDir}/{$homepageImage.uploadName|escape:"url"}')"

I can make a pull request of this, if you see that it's actually true.

p.s. By the way I liked it more with the repeated image :)