Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: Theme four-point-nine
I’m a big fan; saw some of Riley’s work exhibited in Sydney 20 years ago. Blown away – the microscopic imperfections made each work hyper-tangible.
Offline
Re: Theme four-point-nine
giz wrote #342253:
I’m a big fan; saw some of Riley’s work exhibited in Sydney 20 years ago. Blown away – the microscopic imperfections made each work hyper-tangible.
Yes! I’d done a project on pop art while at school, and had a postcard-sized picture on my wall during studies of a more subdued variant of the one you chose. Years later, I saw the 2003 exhibition at the Tate Britain (here and here).
TXP Builders – finely-crafted code, design and txp
Offline
Re: Theme four-point-nine
I was hoping to reorder the if-this-then-that logic in the head so that it sequences in order of the request’s popularity: home, listing, detail. Simpler to read, covers most requests from a typical TXP installation, shaves processor cycles:
// ignoring the elephants in the room if_search, if_author, if_category
<txp:if_article_list>
// any list page
<txp:if_section name=",default">
// home page
<txp:else />
// specific listing page
</txp:if_section>
<txp:else>
// detail page
</txp:if_article_list>After experimenting with this for a while I realised that the current if-search-if-author-if-category-else-… order of logic is unavoidable as the tests are vital for good seo behaviour.
- I’ve incorporated Julian’s page-context variables directly into the head’s meta / canonical if-this-then-that so that they are ready for any other logic lower down on the page.
- The meta-canonical-page-variables code now lives in its own form, misc/head_metas.txp. It is rarely changed, complex, and took up most of the head, getting in the way of the more frequent edits.
<txp:if_search>
<txp:variable name="page_context" value="search" />
<meta name="robots" content="none">
<txp:else />
<txp:if_author>
<txp:variable name="page_context" value="author" />
<meta name="robots" content="noindex, follow">
<txp:else />
<txp:meta_description />
<txp:variable name="paging" value='<txp:page_url type="pg" />' />
<txp:if_section name=",default">
<txp:if_category>
<meta name="robots" content="noindex, follow">
<txp:else />
<txp:variable name="page_context" value="home" />
<txp:if_variable name="paging" value="1">
<!-- default / homepage -->
<meta name="robots" content="index, follow">
<link rel="canonical" href="<txp:site_url />">
<txp::schema type="WebPage" url='<txp:site_url escape="json" />' headline='<txp:site_name escape="json" />' />
<txp:else />
<!-- page_url has pg=2 or more-->
<meta name="robots" content="noindex, follow">
</txp:if_variable>
</txp:if_category>
<txp:else />
<txp:if_article_list>
<txp:variable name="page_context" value="listing" />
<txp:if_variable name="paging" value="1">
<!-- listing landing page -->
<meta name="robots" content="index, follow">
<link rel="canonical" href="<txp:section url />">
<txp::schema type="WebPage" url='<txp:section url escape="json" />' headline='<txp:section title escape="json" />' />
<txp:else />
<meta name="robots" content="noindex, follow">
</txp:if_variable>
<txp:else />
<txp:variable name="page_context" value="article" />
<txp:meta_keywords separator="," />
<txp:meta_author title />
<meta name="robots" content="<txp:if_expires>unavailable_after: <txp:expires gmt format="%d-%b-%y %T" /> GMT<txp:else />index, follow</txp:if_expires>">
<link rel="canonical" href="<txp:permlink />">
<txp::schema type="WebPage" url='<txp:permlink escape="json" />' headline='<txp:title escape="json" />' />
<meta property="og:site_name" content="<txp:site_name />">
<meta property="og:type" content="article">
<meta property="og:title" content="<txp:title />">
<txp:if_description>
<meta property="og:description" content="<txp:meta_description format="" />">
</txp:if_description>
<meta property="og:url" content="<txp:permlink />">
<txp:if_article_image>
<txp:images limit="1">
<meta property="og:image" content="<txp:image_url />">
<meta property="og:image:width" content="<txp:image_info type="w" />">
<meta property="og:image:height" content="<txp:image_info type="h" />">
<meta property="og:image:alt" content="<txp:image_info type="alt" />">
</txp:images>
</txp:if_article_image>
</txp:if_article_list>
</txp:if_section>
</txp:if_author>
</txp:if_search>What does everyone feel about converting the default 4-space indentation to 2-space throughout the code? While this makes no difference to those of us that use an IDE, it reduces line lengths in the Presentation tabs.
Offline
Re: Theme four-point-nine
I usually use 2 spaces for line length reasons. The downside is that the default tab width for shift+space indentation is 4 spaces. Maybe we can expose the tab stop width as a constant? Then it can be set to some other value in config.php.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Hire Txp Builders – finely-crafted code, design and Txp
Offline
Re: Theme four-point-nine
A few minor points on your image handling
- you “images” form is missing a
srcattribute. It validates though, surprisingly. Still it might be nicer for older browsers (src=<txp:image_url />– full size image) - the
imghas a closing/in the code. That is not needed and the HTML validator issues a warning. - not sure if that is a good idea of only using
sizes=auto. Firefox and Safari do not support that. Perhaps adding a fallback sizing for older browsers?sizes="auto, 50vw, (min-width 40em) 33vw, (min-width:60em) 25em", or something that fits the layout. - in the article default.txp form, at the bottom,
txp:imagesneed to suppress the defaultbreakattribute :break="". At the moment eachfigureis followed by a<br>which gives fun effects in your grid :-)
Other minor validation issue on that default article form, the <meta itemprop="dateModified" cannot be child of the <dl>, insert it as part of the <dt>, or the <dd>.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: Theme four-point-nine
Thanks, Philippe.
I’m busy with a second pass on the code after a bunch of refactoring – issues noted!
sizes="auto" works in Safari, but I’ll add that fallback…
The image code also has issues with svg (no thumb is generated as it would be redundant) so I’ll use <txp:image /> instead for .svg.
Offline
Re: Theme four-point-nine
Introducing sizes="auto, parameters" introduces issues when images.txp is used throughout, as everything from full-bleed images to small thumbs need to be catered for. Which parameters to use when the template is flexible? Specifying the appropriate responsive sizes attributes is web-developer territory, and getting it wrong means scaled-up/pixellated or sub-sized images. A sizes attribute would be required wherever the form is called, with the associated yield handling in images.txp.
Certainly doable within broad parameters (I’m happy to follow the status quo), but it adds another layer of fuss to the template to service a diminishing number of users. It won’t be long before all major browsers support sizes=“auto”. If some never do, it’s not a deal-breaker – the images load at full size, or from the src (which is not mandatory if srcset is available). If the site owner wants to support everything, their web developer would change the template accordingly.
Should I use sizes="auto" (or omit the sizes attribute as its the same thing), or (simplified)
sizes="auto<txp:evaluate>, <txp:yield name="sizes" /></txp:evaluate>" and 2 shortcode (or output_form) instances of <txp::images sizes="parameters" etc />?
To get the yield to work I’d need something like this as a enclosing tag in images.txp: <txp:images id='<txp:yield name="id "/>' sizes='<txp:yield name="sizes "/>' limit='<txp:yield name="limit "/>' etc >// image code</txp:images>. There must be a simpler approach…
Offline
Re: Theme four-point-nine
I didn’t realise you re-use the same form for multiple context in the page. That does complicates matter a little. :-( And while it would be nice to include an example of <yield /> to output some parameters, in this case it might become a unwieldy difficult to understand.
Some other little thing you could drop out of the templates: the aria-lable on main, it is not needed as there are always a headline tag (h1) describing the block. And main being a landmark area AT will understand this (and some automated tools will mildly complain about it, e.g ARC toolkit)
PS -
It won’t be long before all major browsers support sizes=“auto”.
We are certainly not there yet: caniuse
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: Theme four-point-nine
The clean-up of aria-labels & redundant schema is on my to do list.
Our code needs to be a combination of as-simple-as-possible and as-performant-as-possible for the majority of users. It will be around for a while until the next revision hits (could be years) so we’re designing for the future.
Currently Firefox is the only modern browser that ignores styles=“auto”, but it degrades gracefully – the largest size in the srcset is displayed (just like the current build).
Offline
Re: Theme four-point-nine
giz wrote #342359:
Currently Firefox is the only modern browser that ignores styles=“auto”, but it degrades gracefully – the largest size in the srcset is displayed (just like the current build).
Do you have a source that suggest Safari 26 supports sizes=auto? Both caniuse (or caniuse.com/mdn-html_elements_img_sizes_auto) and MDN (sizes property ) say no support.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: Theme four-point-nine
Direct observation and experimentation in Safari ever since OS 26.
From what I’ve read, Apple fixed the browser agent string to reduce its fingerprinting surface.
Mac-related sites were all over this a month or so ago as usage stats showed that only 25% of users had upgraded to 261 (whereas it was more like 50%). Different interpretations of the agent string caused the discrepancy.
1 Safari supporting sizes=“auto” is just about the only advantage you get when upgrading to Tahoe!
Offline
Re: Theme four-point-nine
Default install with or without an image
As image handling is a critical part of a modern website (and TXP’s id in the article image field approach is not immediately obvious), would it be worth including a ‘default’ image?
The question is somewhat moot without an example image, so I experimented with svg (some with animation) that could be used as the src of an img tag. It needed to be no more than a few kB, and encapsulate ‘Textpattern’ somehow.
(aside)
My latest attempt (13k, can be slimmed further):
Earlier, I tried (3.5k):
…but the fascist overtones put me off!
(end aside)
The main drawback for me is we’d be using id#1 – meaning users would have to replace the image to keep things orderly, or delete it and put up up with their images starting at id=21.
Comments, please!
1 There are a couple of ways around this
Updates to:
- default/wireferame
- style-play a
- style-play b
- style-play c
- styleLab still not smart enough to maintain state, but now you can switch styles.
- gitHub
Style
I’ve added a few css layout variables which exploit display: grid as an experiment – see styleLab. Mark layout as in-progress…
Templates: schema
I removed most schema breadcrumbs throughout, but retained them for forms like comments & file downloads. I added a json breadcrumb schema to the head for list pages.
Templates: aria
It was news to me, but most aria labels are redundant if the markup is semantic. I’ve left specific aria treatment for the odd element eg. the #main skip-link for readers.
Templates: general
There is a reasonable? mix of useful tags, and output_form/shortcodes/yields.
The branching logic in the head incorporates a <txp:variable name="page_context" /> variable for optional use lower down in the output. On pages, maybe it should be <txp:if_search> and not <txp:if_variable name="page_context" value="search"> as its simpler, and shows you can mix approaches.
I removed the permalink around the article title in forms/article/default.txp as I’ve always felt uncomfortable about clicking on the link on the homepage and having the article repeated in individual_article view.
On each page I currently have:
<txp:output_form form="body_footer">
<txp:output_form form="body_aside" />
</txp:output_form>This as a temporary measure as I wanted to test the layout’s —banner-grid variable, and the footer is a ‘banner’…
Offline