Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2020-08-17 16:44:38

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,091
Website GitHub Mastodon Twitter

PIF shortcode in development

After reading this text analysing when and how to use the img srcset and the picture tags, I thought that it would be cool to develop a shortcode with fallbacks in order to enable these functionalities simply. I am currently on the conceptualisation stage and although I expect this code to be longish it will not be as long as my recent one for media. PIF will be using the image tag techniques introduced on 4.8.2 for orientation detection. So here are my initial thoughts:

If you think that this is useful to the community I will continue, although I do expect that I will be needing some support regarding the interpretation of the html tags.

Caveat: The shortcode will only include formats/types supported by txp.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#2 2020-08-18 07:37:22

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

Re: PIF shortcode in development

I am not sure I would go down that road (rabbit hole ?), personally. there are soo many variables on how and where the image(s) are used. I actually tried a few months ago to make a fairly broad shortcode for my own image insertion. It quickly became unwieldy with many if/else paths. I was aiming at including larger, fullwidth column covering images, versus smaller side image, versus portrait / landscape images… And that became confusing when inserting the code — <txp::p_image attr1="" attr2="" /> I ended up needing multiple attr just to define what pattern is expected and so on.

One use case I very recently started working on is insertion of images depending on dark or light mode (screenshots for an app and accompanying web interface, using picture with sizes and media queries). I made a specific shortcode just for this instead of adapting and extending my more general snippet. lean and much easier to adjust if and when needed.


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

Offline

#3 2020-08-18 08:29:52

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,091
Website GitHub Mastodon Twitter

Re: PIF shortcode in development

The thought came as I am already using one shortcode for single images or figures (admittedly, originally it was just for the figure tag). I am doing this, as it is much easier to edit one shortcode (to add schemas, loading, or any other attributes), than going through all my txp:image tags in the body of the articles.

I’d love to see your picture with sizes and media queries shortcode though.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#4 2020-08-18 10:24:43

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

Re: PIF shortcode in development

colak wrote #325452:

I’d love to see your picture with sizes and media queries shortcode though.

currently there is not much to it as all screenshots have basically the same sizes, either the typical iPad landscape view or the iOS popover size. so the shortcode has a simple if/else to select between a full or not image. the web view images are the same (size) as the full iPad images.

the code that calls the whole form then has an attribute for it. <txp::img_screen id=xx dm-id=yy s-size=po />


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

Offline

Board footer

Powered by FluxBB