DATAVIEWjs help div

[Doparim]

I have this dataviewjs code that it goes inside the notes in the event folder and it makes each note a div and there is a Pic property and i put image link inside that and the image gets shown in the right side of that dive so they look like this

the perpetuity

so what i want it that me needing to add the images link in the property I can just add the image in the note and the dataviewjs code shows the first image inside of that note as its image like this

the code that I have so far

// Get all pages from the "Event" folder
const pages = dv.pages('"Event"')
    .where(p => p.Pic != null);

// Loop through each page
pages.forEach(p => {
  // Create a div element to serve as the box
  const box = dv.el('div', '', {
    cls: 'box',
    attr: {
      style: 'display: flex; justify-content: space-between; border-radius: 10px; padding: 0px; text-align: left; margin-bottom: 20px; cursor: pointer; border: none; background-color: #2d2e2e; height: 150px;'
    }
  });

  // Create a div for the text
  const textDiv = dv.el('div', '', {
    cls: 'text-div',
    attr: {
      style: 'flex-grow: 1; padding: 10px; border-radius: 10px;'
    }
  });

  // Set the content of the text div to the note's name as a clickable link
  const link = dv.el('span', `[[${p.file.name}]]`, {
    cls: 'link',
    attr: {
      style: 'color: white; font-weight: bold; font-size: 16px;' // Added bold and larger font size
    }
  });

  // Append the link to the text div
  textDiv.appendChild(link);

  // Create a div for the image
  const imageDiv = dv.el('div', '', {
    cls: 'image-div',
    attr: {
      style: 'width: 40%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center;'
    }
  });

  // Embed the image using an HTML <img> tag with the correct path and styling
  const image = dv.el('img', '', {
    cls: 'image',
    attr: {
      src: app.vault.getResourcePath(dv.fileLink(p.Pic.path)),
      style: 'width: 100%; height: 100%; object-fit: cover; border-radius: 10px;'
    }
  });

  // Append the image to the image div
  imageDiv.appendChild(image);

  // Append the text div and image div to the box
  box.appendChild(textDiv);
  box.appendChild(imageDiv);

  // Append the box to the DataViewJS container
  dv.container.appendChild(box);
});

[Rios]

Here is the solution

// Get all pages from the "Event" folder
const pages = dv.pages('"Event"');

// Loop through each page
pages.forEach(async (p) => {
  // Read the content of each file
  const content = await app.vault.read(app.vault.getAbstractFileByPath(p.file.path));

  // Regular expression to find the first image in the content of each file, supporting both Wikilinks and Markdown format
  const imageRegex = /!\[\[([^|\]]+)(?:\|[^\]]+)?\]\]|!\[.*?\]\((.*?)\)/;
  const match = content.match(imageRegex);

  // Extract the image path based on the match, the first match in a logical OR operation will be utilized
  let imagePath = match && match[1] ? match[1] : (match && match[2] ? match[2] : null);

  // Create a div element to serve as the box
  const box = dv.el('div', '', {
    cls: 'box',
    attr: {
      style: 'display: flex; justify-content: space-between; border-radius: 10px; padding: 0px; text-align: left; margin-bottom: 20px; cursor: pointer; border: none; background-color: #2d2e2e; height: 150px;'
    }
  });

  // Create a div for the text
  const textDiv = dv.el('div', '', {
    cls: 'text-div',
    attr: {
      style: 'flex-grow: 1; padding: 10px; border-radius: 10px;'
    }
  });

  // Set the content of the text div to the note's name as a clickable link
  const link = dv.el('span', `[[${p.file.name}]]`, {
    cls: 'link',
    attr: {
      style: 'color: white; font-weight: bold; font-size: 16px;' // Added bold and larger font size
    }
  });

  // Append the link to the text div
  textDiv.appendChild(link);

  // Create a div for the image
  const imageDiv = dv.el('div', '', {
    cls: 'image-div',
    attr: {
      style: 'width: 40%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center;'
    }
  });

  // Function to create and append the image element if an image path is found
const createImage = (imagePath) => {
    if (imagePath) {
        const resolvedPath = imagePath.startsWith("http") ? imagePath : app.vault.getResourcePath(dv.fileLink(imagePath, true));
        // Embed the image using an HTML <img> tag with the correct path and styling
        const image = dv.el('img', '', {
            cls: 'image',
            attr: {
                src: resolvedPath,
                style: 'width: 100%; height: 100%; object-fit: cover; border-radius: 10px;'
            }
        });

        // Append the image to the image div
        imageDiv.appendChild(image);
    }
};

// Check if an image was found in the content and if p.Pic does not exist or has a null value
if (match && (!p.Pic || p.Pic === null || p.Pic.path === null)) {
    createImage(imagePath);
} else if (p.Pic && p.Pic.path) {
    // Use p.Pic if it exists and is not null
    createImage(p.Pic.path);
}

  // Append the text div and image div to the box
  box.appendChild(textDiv);
  box.appendChild(imageDiv);

  // Append the box to the DataViewJS container
  dv.container.appendChild(box);
});

The Tested Content

The result

[Doparim]

thank you it worked flawlessly I know Im askig for so much but it it possible to add a search box at top so it can be searched throught divs and can we add page function so if the divs reach like 30 div for not lagging it makes a new page and puts the other divs inside those pages and we can go back and fourth in the pages aome thing like this

first page-page before the current -current page- page after this page-lst page

will it make it run smoother cause now like if you have 300 divs it will lag
thx again​:heart: