Need for grids on Image Editing

[TiddlyTitch]

Is there a CSS way to apply a grid to TW’s native image editor?

It would help if it could!

Any thoughts?
TT

[TiddlyTitch]

@TiddlyTitch

Is there a CSS way to apply a grid to TW’s native image editor?

UPDATE:
I solved the issue via a browser extension.
This thread can be ignored.

[TW_Tones]

can you share it l, just for completeness?

[wiki_user]

@TiddlyTitch

This thread can be ignored.

it could but

@TiddlyTitch

I solved the issue via a browser extension.

for the lack of mention which browser extension ?
( my guess is tampermonkey or the like)

fwiw ( tofuture forum searchers hopefully clicking this title)

.https://stackoverflow.com/questions/4191260/drawing-a-grid-using-css

this works for the page body 
<style>
body { box-sizing:border-box; margin:0; height:100%; width:100%; background-size:100px 100px;
       background-image: repeating-linear-gradient(0deg, transparent, transparent 99px, #ccc 99px, #ccc 100px), 
       repeating-linear-gradient(-90deg, transparent, transparent 99px, #ccc 99px, #ccc 100px); 
     }
</style>

id guess it just a case of picking some other css-class to add it to the desired element !
( which i guess you all ready found if you got it working some other way )

[TiddlyTitch]

@TW_Tones

can you share it l, just for completeness?

Page Grid is a grid you can specify and overlay any page …

[TiddlyTitch]

@wiki_user

fwiw ( tofuture forum searchers hopefully clicking this title)

.https://stackoverflow.com/questions/4191260/drawing-a-grid-using-css

this works for the page body 
<style>
body { box-sizing:border-box; margin:0; height:100%; width:100%; background-size:100px 100px;
       background-image: repeating-linear-gradient(0deg, transparent, transparent 99px, #ccc 99px, #ccc 100px), 
       repeating-linear-gradient(-90deg, transparent, transparent 99px, #ccc 99px, #ccc 100px); 
     }
</style>

Ah! Thanks for that! I’ll try it over next few days.
TT

[TiddlyTitch]

@wiki_user

this works for the page body

@wiki_user

<style>
body { box-sizing:border-box; margin:0; height:100%; width:100%; background-size:100px 100px;
       background-image: repeating-linear-gradient(0deg, transparent, transparent 99px, #ccc 99px, #ccc 100px), 
       repeating-linear-gradient(-90deg, transparent, transparent 99px, #ccc 99px, #ccc 100px); 
     }
</style>

Thanks for the example! It helped me get clearer.

FWIW it can’t work for photography or solid colour backgrounds.

This Is because it is that grido Is an UNderlay not an OVerlay.

On the UPside it works well with .PNG image files that have transparency.

A graphic notepad in TW would be easy to background using similar code …

TT

[wiki_user]

@TiddlyTitch

FWIW it can’t work for photography or solid colour backgrounds.

how did you reach this conclusion ?!

[Scott_Sauyet]

@TiddlyTitch

Is there a CSS way to apply a grid to TW’s native image editor?

Not an exact duplicate, but I imagine the following thread would be useful:

How can I make a template that automatically lays a grid over images?

As I am an Artsteacher I am sometimes teaching students by copying images. As well as books wiki serves as a source of images. Since the task is much easier if you have a grid, I would like to create an overlay that produces a stable grid over an image. [image] Ideally I would like to press a button and send the image to a fullscreen-template. Any ideas how this could be realized in tiddlywiki?

[TiddlyTitch]

@Scott_Sauyet

the following thread would be useful:

How can I make a template that automatically lays a grid over images?

As I am an Artsteacher I am sometimes teaching students by copying images. As well as books wiki serves as a source of images. Since the task is much easier if you have a grid, I would like to create an overlay that produces a stable grid over an image. [image] Ideally I would like to press a button and send the image to a fullscreen-template. Any ideas how this could be realized in tiddlywiki?

Very useful. Thanks!

(Aside: Am ashamed to say I had read it before and forgot it. My brain is going south)

That thread is very detailed with several good solutions.
It is the BEST I have seen on OVERLAYS in TW.

My issue, it turns out, is UNDERLAYS in the Image Editor too.
Here is where I got to so far …

TT