Having a SharePoint list with news title content and image

Question

Having a SharePoint list with news title content and image . Can you please share the html css rest API code to display each news (title summary and image) in each cell in 4 * 4 div.

Lokesh Varman · Answer

Not sure, Give it a try News Grid /* Define the grid layout */ .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; } /* Style each news cell */ .grid-item { border: 1px solid #ccc; padding: 10px; } /* Style the news image */ .news-image { max-width: 100%; height: auto; } // Function to fetch data from SharePoint list using REST API function getNewsData() { const url = " "; // Replace with your SharePoint REST API URL fetch(url, { method: 'GET', headers: { 'Accept': 'application/json;odata=verbose', } }) .then(response => response.json()) .then(data => { const newsItems = data.d.results; const grid = document.getElementById("news-grid"); // Loop through the news items and populate the grid newsItems.forEach(newsItem => { const title = newsItem.Title; const summary = newsItem.Summary; const imageUrl = newsItem.ImageUrl; const newsCell = document.createElement("div"); newsCell.classList.add("grid-item"); const newsTitle = document.createElement("h2"); newsTitle.innerText = title; const newsSummary = document.createElement("p"); newsSummary.innerText = summary; const newsImage = document.createElement("img"); newsImage.src = imageUrl; newsImage.classList.add("news-image"); newsCell.appendChild(newsTitle); newsCell.appendChild(newsImage); newsCell.appendChild(newsSummary); grid.appendChild(newsCell); }); }) .catch(error => console.error(error)); } // Call the function to fetch and display news data getNewsData(); generated by - AI

Having a SharePoint list with news title content and image

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (1)