Previewing articles inline

etc · 2024-11-29 13:56:32

When previewing a full article, wouldn’t it be handy to have an ‘inline’ preview option? Looks fairly easy, up to styling:

Bloke · 2024-11-29 16:22:18

That looks like a great win. More instantaneous feedback too. Me likee.

uli · 2024-11-29 16:31:00

This is the CSS from the front page? Great!!! I always wanted to quickly view my changes in the final design before saving.

etc · 2024-11-29 17:50:53

uli wrote #338372:

This is the CSS from the front page?

It is front page, in an inline frame.

I always wanted to quickly view my changes in the final design before saving.

Here you are asking too much, I’m not even sure it is (currently) possible :-) The public side pulls data from db, so the article must be saved first, though not necessarily ‘live’.

Anyway, the egg is in the pond. Unstyled atm, so you need to add few rules to your custom.css:

#main_content {position:relative;}
#preview-frame {top:0;position:absolute;height:100%;width:100%;z-index:100;}

The inline preview is opened/closed by shift+click (or esc). Feedback welcome.

Pat64 · 2024-11-30 04:18:23

etc wrote #338374:

It is front page, in an inline frame.

Is it real?
I can’t believe it! 😲
Wonderful! 👌

phiw13 · 2024-11-30 04:27:13

Seems to work… I am sure some will find it useful. Me I don’t have any problem with viewing the articles (draft or live) in context in a separate tab.

(And ¡grmbl! now my browser’s console complains about some CSP violations – scripts used on the public side are allowed to in the context of the admin side… ).

phiw13 · 2024-11-30 08:09:15

etc wrote #338374:

#main_content {position:relative;}...

The inline preview is opened/closed by shift+click (or esc). Feedback welcome.

You may want to narrow the scope of that selector. As written it also applies to the pages & forms editor columns. Setting it to position:relative on those panels might or might not have unwanted effects.

.content #main_content { position:relative }

Only affects the Write panel. The .content class is set on the <body /> element.

etc · 2024-11-30 17:55:33

uli wrote #338372:

I always wanted to quickly view my changes in the final design before saving.

Okay, you have asked :-) Now it should be possible to preview (existing) articles before saving.

The ‘external’ preview still uses the saved data, so you can compare.

phiw13 wrote #338384:

You may want to narrow the scope of that selector.

Nice, even body#page-article #main_content {position: relative;} would work.

phiw13 · 2024-12-01 07:20:25

etc wrote #338385:

Okay, you have asked :-) Now it should be possible to preview (existing) articles before saving.

The ‘external’ preview still uses the saved data, so you can compare.

So that seems to work (edits to the article-not-yet-saved show up). This might make the feature more useful.

Problem though:

When the “sanitise” checkbox is checked, Safari shows an empty iframe (the content never seems to load). I see no special errors in the console apart for the expected ones¹. Firefox and Brave load the content of the iframe as expected.

Nice, even body#page-article #main_content {position: relative;} would work.

Or you now, a little more modern: #main_content:has(>iframe) {} – If you don’t care about Firefox 115ESR running on Win8 or macOS10.12-10.14.

–^–

¹ notifications about downloadable fonts not loading and scripts not running.

etc · 2024-12-01 09:04:07

phiw13 wrote #338390:

When the “sanitise” checkbox is checked, Safari shows an empty iframe (the content never seems to load).

I have tested it in Safari on the demo site, it seems to work as expected, can you check?

phiw13 · 2024-12-01 09:22:03

etc wrote #338392:

I have tested it in Safari on the demo site, it seems to work as expected, can you check?

That is where I first tested the latest update, before testing on my own test site (always bearing in mind that caching on dev-demo sometimes plays cat-and-mouse games with testing).

I even went as far as disabling all (rather basic) CSP rules on my test site.

giz · 2024-12-01 23:49:06

etc wrote #338385:

Okay, you have asked :-) Now it should be possible to preview (existing) articles before saving.

The ‘external’ preview still uses the saved data, so you can compare.

Would it be feasible to inject the excerpt/body textarea contents into the iframe using javascript? We know which section/page/form the article uses, and so can identify where in the iframe the injection needs to happen.

I know of many users who would love a real preview, ‘tho I too don’t mind previewing a saved draft article in a new tab.

I’m using the Preview Dialog (with <details> tags) as a guinea-pig in my TXP5-style-library efforts. jqui be gone (I suspect the class names will hang around in the html for backwards-compatibility of admin-themes).

Textpattern CMS

Textpattern CMS support forum

#1 2024-11-29 13:56:32