Resize image dataviewJS

[ShaggyStyle]

Not sure in your case, but dv.fileLink() should give you a hint.

This is the Syntax: dv.fileLink(path, [embed?], [display-name])

Set the second parameter to true, and the third parameter can be a number that set the width of the image.

In your example, should be like this:

.map(k => [k.file.link, dv.fileLink(k.file.path, true, 150)])

I hope this helps you.

[ShaggyStyle]

Should change k.file.path for k.image.path… sorry

[mr_anh_ngoc]

Thank you for your effort, but
unfortunately not.
this is what dvjs spat out:

Evaluation Error: TypeError: Cannot read properties of undefined (reading 'path')
    at eval (eval at <anonymous> (plugin:dataview), <anonymous>:11:57)
    at Array.map (<anonymous>)
    at Proxy.map (plugin:dataview:8038:39)
    at eval (eval at <anonymous> (plugin:dataview), <anonymous>:11:14)
    at DataviewInlineApi.eval (plugin:dataview:18404:16)
    at evalInContext (plugin:dataview:18405:7)
    at asyncEvalInContext (plugin:dataview:18415:32)
    at DataviewJSRenderer.render (plugin:dataview:18436:19)
    at DataviewJSRenderer.onload (plugin:dataview:18020:14)
    at e.load (app://obsidian.md/app.js:1:631581)

my whole code:

```dataviewjs
let groups = dv.pages("[[]]")
	.groupBy(p => p.objekttype)
	

for (let group of groups.sort(g => g.key, 'asc')) {
    dv.header(2, group.key);
    dv.table(
		["file", "image"],
        group.rows
            .sort(k => k.objekttype, 'asc')
            .map(k => [k.file.link, dv.fileLink(k.image.path, true, 150)]))
}

```

[ShaggyStyle]

Well… dv.fileLink() is the way, but I’m not sure from where are you trying to get the image.

[mr_anh_ngoc]

from folder one level above: “images”

└ A - Folder i call the dataview query
└ B - Folder with images

[ShaggyStyle]

As I know, dv.pages() only gives you markdown files.

Try the next code:

let images = app.vault.getFiles().filter(file => file.parent.path == "images");
for (let img in images) {
	dv.paragraph( dv.fileLink( images[img].path, true, 150) );
}

You may change “images” from the first line to your images path.

Notice that, this will show every file at this folder, not just images.

[mr_anh_ngoc]

thank you!
yes, that throws me every image in that folder in size 150.
How do I implement this in my code above, to show only the requested files (images)…?

[ShaggyStyle]

I guess you may filter, checking the file extension from the path.

[mr_anh_ngoc]

well, all the files that point to the current file, resp grouped by objekttype:

@mr_anh_ngoc

let groups = dv.pages("[[]]")
	.groupBy(p => p.objekttype)

[ShaggyStyle]

I’m not sure how do you set the relation between pages and images, neither from where comes objekttype, but I guess you are done with the main topic:

@mr_anh_ngoc

I want to resize an image in the output of dataviewJS

[mr_anh_ngoc]

well, lets say 50 %.
It is important to me to display only the relevant files and not all of them.

[ShaggyStyle]

@ShaggyStyle

I’m not sure how do you set the relation between pages and images, neither from where comes objekttype

More context is needed. Please define and explain which are the relevant files.

[mr_anh_ngoc]

ok, sorry for the misunderstanding.
there are files witch contain among others:

file_1:

---
objekttype: bitmap
---
image:: ![[image_001.jpg]]

file_2:

---
objekttype: vector
---
image:: ![[image_003.jpg]]

file_3:

---
objekttype: font
---
image:: ![[image_015.jpg]]

so, lets say I want a table with all files grouped by the objekttype and the displayed associated image.

like this:
bitmaps
file_1 … image_1
file_x … image_x

vectors
file_2 … image_3
file_x … image_x

fonts
file_3 … image_15
file_x … image_x

I hope, I could express myself properly.
Thanks for your patience.

[ShaggyStyle]

I’ve just recreated your conditions using the code above

@mr_anh_ngoc

```dataviewjs
let groups = dv.pages("[[]]")
	.groupBy(p => p.objekttype)
	

for (let group of groups.sort(g => g.key, 'asc')) {
    dv.header(2, group.key);
    dv.table(
		["file", "image"],
        group.rows
            .sort(k => k.objekttype, 'asc')
            .map(k => [k.file.link, dv.fileLink(k.image.path, true, 150)]))
}

And it works for me:

The problem should be somewhere else.

[ShaggyStyle]

Now I see where comes the error from!

Every page captured by dv.pages("[[]]") should have an image variable. If one page captured don’t have defined image, you’ll get the error shown before.

To fix it, only select the pages that have the variable defined:

let groups = dv.pages("[[]]").where( p => p.image)

And we are done!

[mr_anh_ngoc]

Oh yes, that looks good. thank you very much!
But could it be modified, so that those objekttypes, that do not have a picture also appear? in other words, simply display nothing (“”) …?

[mr_anh_ngoc]

well, on the basis of

How to write an (if) statement in (map) function in dataviewjs

Instead of doing an if in the lambda function of map(), trying do a function call with the k.status as the parameter. In other words make a function before your code: function mapIcon(status) { if (status == "Active") return "A" else if (status == "Idle") return "I" else return "?" } and let the .map be something like: .map( k => k.symbol + " " + k.file.link + mapIcon(k.status) ) Code is untested and could surely be optimised, but the gist of it should be correct, and al…

I fiddled around:

```dataviewjs
let groups = dv.pages("[[]]")
	.groupBy(p => p.objekttype)

function ifimage(image) {
  if (image)
    return dv.fileLink(k.image.path, true, 50)
  else
    return ""
}

for (let group of groups.sort(g => g.key, 'asc')) {

    dv.header(2, group.key);
    dv.table(
		["Datei", "image"],
        group.rows
            .sort(k => k.objekttype, 'asc')
            .map(k => [k.file.link, ifimage(k.image)]))
}

```

but DVJS mocks about the path:

Evaluation Error: TypeError: Cannot read properties of undefined (reading 'path')...```

too bad, would have been too easy... :slightly_smiling_face:
or where is my error of reasoning here?

[holroy]

For starters you’ve got a typo within ifimage where you’re referring to k.image, and not just image.

There might be other errors, but start with correcting that one.

[mr_anh_ngoc]

thank you @holroy, yes this was the (one?) issue.
the correct line in the function has to be:

...
return dv.fileLink(image.path, true, 50)
...

and all the objekttypes are shown.

Normally I could live with that. However, if you know of any improvements or simplifications, it would of course be exciting to hear about them.