Tile Image is missing from generator

[benjaminkwilliams]

I tried to copy from chat's tile.js file to add an image to my tile.js, it didn't work our so well. b.createElement("img",{className:"absolute invert-d",style:{left:39,top:39},src:"/~chat/img/Tile.png",width:48,height:48,__self:this,__source:{fileName:j,lineNumber:46}}

I changed b to react and the path to my path, but it still didn't work. Can we get the correct code added to the generator with a dummy "~" image so things look pretty.

[matildepark]

I'm confused by this. Were you editing the compiled JS inside your ship? You should be making changes in the create-landscape-app repository, which has the source code, and using npm run serve.

[matildepark]

Also note that it's unclear if you |commit %homed when you finished that edit; we also have an issue where you'll need to :goad %force and force refresh in your browser after the commit.

[benjaminkwilliams]

Yes I was editing the generated tile.js file in my app, yes I did run |commit %home and used CTRL+F5 in Chrome to reload Landscape. All my edits did work, but there is no img src tag in ./tile/tile.js ` render() { return (

histar

);`

If I wanted to add an image, where does it go?

[matildepark]

You can just add and include the image.png in your ship’s /app/histar/img folder.

— ~haddef-sigwen https://urbit.org

On Mar 25, 2020, at 9:14 PM, Benjamin Williams notifications@github.com wrote:

Yes I was editing the generated tile.js file in my app, yes I did run |commit %home and used CTRL+F5 in Chrome to reload Landscape. All my edits did work, but there is no img scr tag in ./tile/tile.js render() { return (

<p className="black white-d absolute f9" style={{ left: 8, top: 8 }}>histar

);

If I wanted to add an image, where does it go?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[benjaminkwilliams]

Cool thanks!

~linrun-harmes

[benjaminkwilliams]

So this is the final product that got a "centered" image within the tile react.createElement('img', { className:"absolute invert-d", style: {left:39,top:39}, src: "/~histar/img/Tile.png", width:48, height:48, __self: this, __source: {fileName: _jsxFileName, lineNumber: 12}} )

I add to add the className:"absolute invert-d", style: {left:39,top:39}, and width:48, height:48, to tile.js after running npm run build but prior to |commit %home. If that can be automated then it should be good to go.

[matildepark]

I still don’t understand why you’re editing the compiled JS?

— ~haddef-sigwen https://urbit.org

On Mar 25, 2020, at 9:52 PM, Benjamin Williams notifications@github.com wrote:

So this is the final product that got a "centered" image within the tile react.createElement('img', { className:"absolute invert-d", style: {left:39,top:39}, src: "/~histar/img/Tile.png", width:48, height:48, self: this, source: {fileName: _jsxFileName, lineNumber: 12}} )

I add to add the className:"absolute invert-d", style: {left:39,top:39}, and width:48, height:48, to after running npm run build and prior to |commit %home. If that can be automated then it should be good to go.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[benjaminkwilliams]

Because the image wasn’t centered in the tile post compile, using the raw html provided <img src="/~histar/image.png" /> in the precompilied file did not generate a centered image post compile.

[matildepark]

Try adding style={{top: 48, left: 48}} to the img tag in the source code.

On Mar 25, 2020, at 10:47 PM, Benjamin Williams notifications@github.com wrote:

 Because the image wasn’t centered in the tile post compile, using the raw html provided in the precompilied file did not generate a centered image post compile.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[benjaminkwilliams]

That produces react.createElement('img', { src: "/~histar/img/Tile.png", style: {top: 48, left: 48}, __self: this, __source: {fileName: _jsxFileName, lineNumber: 12}}) in the output, therefore I just need to add the className tag to the img tag. Again, having it already present in the source (even commented out) would make things easier.

[matildepark]

Right right it’s className=“absolute”

I mean if you want, feel free to PR. However I don’t think this is the kind of elusive, idiosyncratic Landscape code that needs example; it’s just adding an img element in React.

On Mar 26, 2020, at 8:48 AM, Benjamin Williams notifications@github.com wrote:

 That produces react.createElement('img', { src: "/~histar/img/Tile.png", style: {top: 48, left: 48}, self: this, source: {fileName: _jsxFileName, lineNumber: 12}}) in the output, therefore I just need to add the className tag to the img tag. Again, having it already present in the source (even commented out) would make things easier.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.