Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
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
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
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
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
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
Re: Previewing articles inline
etc wrote #338374:
#main_content {position:relative;}...
The inline preview is opened/closed by
shift+click
(oresc
). 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
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
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
Offline
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
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