Customizing a Diazo theme

I'm currently trying to modify the background image for a project in which I'm using a copy of the plonetheme.spot theme. I'm using the technique described at https://github.com/collective/plonetheme.spot/blob/master/docs/index.rst. That is, upload a new image, which in my example is a simple gray scale image called called test.jpg, and then through renaming have it become header-bg.jpg, which is the name that plonetheme.spot assumes for its default background image.

I seem to be able to upload my image through the theme modification page.

I then click the Save button in the theme modification page. But when I leave that page momentarily to go back to the control panel and then return to the theme modification page, the test.jpg is listed by name in the img folder, but the image itself apparently can't be found and/or displayed, as indicated in the following screenshot:

Until I get past this problem of having changes made in the theme modification page apparently not saved correctly, I'm somewhat stymied in my ability to go further.

Any advice is appreciated.

Thanks,
Tom Naps

Hi Tom :slight_smile: Which version of Plone are you using, 5.0.8? When you upload a new image you don't need to save anything for the upload to "stick" (also, a UI hint is that the Save button should change colour if there's ever anything that might need to be saved). Do you see any JavaScript errors in the browser console?

I'd also pay attention to clearing the cache look for the "clear cache" button.

I was able to reproduce some wonky behaviour similar to what you saw, with Plone 5.0.6.

What eventually worked for me was:

  • click on the folder into which you want the image to live (currently there is no way to move a file around using the theme editor); if you want to put the image in the root folder, click on, say, the index.html file; I clicked on the img folder
  • use the Upload button and window to upload the image; the new image file should appear in the target folder (in this case img)
  • click on the header_bg.jpg image
  • click Delete button to delete that image
  • click on your newly uploaded image
  • click Rename button and rename the file "header_bg.jpg"

When I clicked the Preview Theme button I saw my new header image. When I viewed the home page I also saw my new header image.

Yes, at some point I did click on the Clear Cache button too - that may have helped.

If you can't get it to work via the theme editor, you can expand the zip file and work on the expanded theme folder directly, then re-zip it and upload it to the site. It's cumbersome but it'll work.

(@pigeonflight is mentoring @b4oshany for a nice GSoC enhancement of the theming editor)

I'd say @datakurre is doing the mentoring of @b4oshany :). I'm mostly doing very occasional "drive by" mentoring.

:joy:

Here's the version overview information from the site setup page.

Plone 5.0.8 (5018)
CMF 2.2.10
Zope 2.13.26
Python 2.7.6 (default, Oct 26 2016, 20:32:47) [GCC 4.8.4]
PIL 3.4.2 (Pillow)

This is the version installed using the vagrant set-up at https://github.com/plone/plonedev.vagrant.

To get off the ground with the plonetheme.spot, I had to rename the zip file from plonetheme.spot.zip to plonetheme_spot.zip, per the issue described at https://github.com/plone/plone.app.theming/issues/115. The Save button is not changing color, although from what you say in your reply further down, it's not clear there is anything to save after a file upload. There is a JavaScript error in the browser console, namely:

ReferenceError: $ is not defined @@theming-controlpanel-mapper-getframe:125:3

which would seem to indicate something amiss with JQuery?

When I try what you finally got to work in your reply further down, i.e., delete (instead of rename) header-bg.jpg, before I rename my newly uploaded file (test1.jpg), it is displayed correctly:

But after I rename it to header-bg.jpg, it disappears:

I'm clearing the cache after every action based on the reply from pigeonflight below. If it helps, every time I clear the cache, in the Plone console, I see the informational message:

2017-08-10 14:46:12 INFO plone.app.theming.policy invalidating cache across all threads and processes

At that point what happens if you reload the page (showing the theming editor)? Is your renamed jpg still showing up incorrectly? Curiously, the size seems correct (non-zero) in your screen shot.

Although just reloading the page while I remained logged in (as admin) doesn't yield a correct display. However, what I have found is that if I log out (as admin) and then log back in (as admin), then the page does display correctly. So this has got something to do with some cache somewhere.

If you're already using the Clear Cache button in the theming editor, maybe a browser hard reload (Control or Shift while clicking on reload button) could help. Is your site behind a caching proxy / nginx / Apache or (say) CloudFlare?

It's running out of a vagrant box, as per https://github.com/plone/plonedev.vagrant, so I don't think there's any proxy involved. However, for the moment, the logout/login trick apparently gives me a workaround.