Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

etc
Developer
Registered: 2010-11-11
Posts: 5,219
Website GitHub

Previewing articles inline

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

Offline

#2 2024-11-29 16:22:18

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,463
Website GitHub

Re: Previewing articles inline

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


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#3 2024-11-29 16:31:00

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,310

Re: Previewing articles inline

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


In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links

Offline

#4 2024-11-29 17:50:53

etc
Developer
Registered: 2010-11-11
Posts: 5,219
Website GitHub

Re: Previewing articles inline

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.

Offline

#5 2024-11-30 04:18:23

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,636
GitHub Twitter

Re: Previewing articles inline

etc wrote #338374:

It is front page, in an inline frame.

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


Patrick.

Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.

Offline

#6 2024-11-30 04:27:13

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,211
Website

Re: Previewing articles inline

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… ).


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#7 2024-11-30 08:09:15

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,211
Website

Re: Previewing articles inline

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.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#8 2024-11-30 17:55:33

etc
Developer
Registered: 2010-11-11
Posts: 5,219
Website GitHub

Re: Previewing articles inline

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.

Offline

#9 2024-12-01 07:20:25

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,211
Website

Re: Previewing articles inline

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 ones1. 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.

–^–

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


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#10 2024-12-01 09:04:07

etc
Developer
Registered: 2010-11-11
Posts: 5,219
Website GitHub

Re: Previewing articles inline

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?

Offline

#11 2024-12-01 09:22:03

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,211
Website

Re: Previewing articles inline

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.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#12 2024-12-01 23:49:06

giz
Member
From: New Zealand
Registered: 2004-07-26
Posts: 304
Website GitHub Twitter

Re: Previewing articles inline

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).

Offline

Board footer

Powered by FluxBB