Use CSS to Remove PNG Image Background Color

Yasmin — Sun, 09 Jun 2024 09:18:36 +0000

In CSS you can remove the white background color form your PNG image by using only one CSS property called mix-blend-mode. Below example:

 img { mix-blend-mode: multiply;}

If you want to remove white or background color from an image, this CSS property is perfect for you. Additionally, it works on all image types, not just PNG.

And if you also want to see some more properties of mix-blend-mode you can check it out on w3 school, there are a lot more properties that I haven't mentioned here.

Like you I also want to remove white background from my image, I use many CSS properties like background-color: transparent; else background-image: url('path/to/image.jpg'); and many more,

But nothing was working, so I searched on YouTube and found this method. It worked, so follow all the steps outlined below.

Step 1: Select image in CSS

The first step is to select the image in the CSS file, if your image is in a container then you select the main container of your image.

 .container {}

In the above example there is only container class inside the style sheet as you can see.

Step 2: Add this CSS property to image

After adding image in the CSS sheet now only add this CSS mix-blend-mode: multiply;

Here is an example:

 .container {
        mix-blend-mode: multiply;
      }

Once you add it is done, now your PNG has no background color.

Step 3: Save the file, and check preview

Once you follow both the above steps now save the HTML and CSS files and preview it on your browser below, I have shared the before and after picture which you can see

Before Image:

After Image:

I hope this post helps you to remove white background color form your PNG image using CSS codes.

You may also wants to know: https://newbiecoding.com/how-to-change-font-in-html-without-css-2/

Server-Side Pagination in Next.js 13 Without Using 'Use Client'

Yasmin — Fri, 07 Jun 2024 11:12:41 +0000

If you want to get the benefits of using Next.js then you should the server-side rendering most of the time while creating your website and components such as Server Side Pagination using Next.js.

In many cases, using server-side rendering is not possible because of certain things we do, like using hooks to manage state, fetching data from servers, and adding events like onClick or onChange to elements.

The good thing is that in Next js you can create Server Side Pagination without using the state hook or any other elements which required client-side rendering.

Instead of using the useState hook to keep track of your page's current state, you can use a page query to store the current page value in your website's URL. This way, you can fetch data based on the user's current page, You can find all the steps and details about this process on this page.

Pagination Component for Next js Server Side Rendering

Before building the front-end first make sure your backend API Endpoint support Pagination for post, an simple example and Process of Build Pagination in Backend API Endpoint in Mentioned below in this post

Lets create some variables, Loops, and Functions, then I explain the HTML section.

Create Thee variables, "postLength" which store the total number of posts you have, I'm getting it's value from API but you can hard code it as well.

Second variable "perPage" which store the number of posts you want to show on your site.

let postLength = length; //Total post length [130]
let perPage = 20;  //Post per page

Third will be the total of Pagination number "totalPage" to get the total Page value we need to divide "postLength" by "perPage".

let totalPage = Math.ceil(postLength / perPage);

Now create a function that will loop through the page and return an Array of a total number of pages.

This function will return an Array of total number of pages need to show in the pagination.

let generatePaginationNumbers = (page, totalPage) => {
    let paginationArray = [];

    for (let i = + page - 2; i <= +page + 2; i++) {
      if (i < 1) continue;
      if (i > totalPage) break;
      paginationArray.push(i);
    }

    return paginationArray;
  };

Call the function and provide the "page" and "totalPage" as a argument and store the function in a variable for easy access in the future.

let generatedNumbers = generatePaginationNumbers(page, totalPage);

// generatedNumbers = [1, 2, 3, 4, 5]

Now we can loop through "generatedNumbers" using the "map()" method to show the Pagication.

This function will return an Array of total number of pages need to show in the pagination.

let generatePaginationNumbers = (page, totalPage) => {
    let paginationArray = [];

    for (let i = + page - 2; i <= +page + 2; i++) {
      if (i < 1) continue;
      if (i > totalPage) break;
      paginationArray.push(i);
    }

    return paginationArray;
  };

Call the function and provide the "page" and "totalPage" as a argument and store the function in a variable for easy access in the future.

let generatedNumbers = generatePaginationNumbers(page, totalPage);

// generatedNumbers = [1, 2, 3, 4, 5]

Now we can loop through "generatedNumbers" using the "map()" method to show the Pagication.

return (
    <div className="text-center">
      <div className="flex items justify-center gap-2">

//Map through generatedNumbers to get total numbers of pages available
        {generatedNumbers.map((number) => (
          <Link
            className={`${
              page == number
                ? "bg-blue-500 text-white"
                : "text-blue-500 bg-white"
            } inline-block py-1 px-3 rounded-lg border hover:border-blue-500`}
            href={`http://localhost:3000/?page=${number}`}
          >
            {number}
          </Link>
        ))}

      </div>
    </div>
  );
};

To show a current page number as active you can check conditionally using turnory opraters,

If current page is available "generatedNumbers" Array then add a background color or other CSS property.

You can also add Next and Previous buttons in your pagination to help users to go to the next Page and Previous page.

If the page value is "0" or negative then hide the previous button,

Using the "Link" Conponent in Nextjs user can navigate previous page, the query value will be the current "page - 1"

//Previous Button

        {+page - 1 >= 1 && (
          <Link
            href={`http://localhost:3000/?page=${+page - 1}`}
            className="text-2xl text-blue-500 bg-white
            } inline-block gap-1 p-1 rounded-lg border"
          >
            <MdKeyboardArrowLeft />
          </Link>
        )}

Similarly the next button will be the same but instead of negative one this time, the current query value will be the "page + 1".

We also want to hide the Next button once there is no page available to do so add a condition where if the page value is greater than "totalPage" then it will be hidden.

//Next Button

        {+page + 1 <= totalPage && (
          <Link
            href={`http://localhost:3000/?page=${+page + 1}`}
            className="text-2xl text-blue-500 bg-white
            } inline-block gap-1 p-1 rounded-lg border"
          >
            <MdKeyboardArrowRight />
          </Link>
        )}

Next.js 13 Server-Side Pagination Component below

//Pagination Component
import Link from "next/link";
import { MdKeyboardArrowLeft, MdKeyboardArrowRight } from "react-icons/md";

const Pagination = ({ length, page }) => {
  let postLength = length;
  let perPage = 20;

  let totalPage = Math.ceil(postLength / perPage);

  let generatePaginationNumbers = (page, totalPage) => {
    let paginationArray = [];

    for (let i = +page - 2; i <= +page + 2; i++) {
      if (i < 1) continue;
      if (i > totalPage) break;
      paginationArray.push(i);
    }

    return paginationArray;
  };

  let generatedNumbers = generatePaginationNumbers(page, totalPage);

  return (
    <div className="text-center">
      <div className="flex items justify-center gap-2">
        {+page - 1 >= 1 && (
          <Link
            href={`http://localhost:3000/?page=${+page - 1}`}
            className="text-2xl text-blue-500 bg-white
            } inline-block gap-1 p-1 rounded-lg border"
          >
            <MdKeyboardArrowLeft />
          </Link>
        )}

        {generatedNumbers.map((number) => (
          <Link
            className={`${
              page == number
                ? "bg-blue-500 text-white"
                : "text-blue-500 bg-white"
            } inline-block py-1 px-3 rounded-lg border hover:border-blue-500`}
            href={`http://localhost:3000/?page=${number}`}
          >
            {number}
          </Link>
        ))}

        {+page + 1 <= totalPage && (
          <Link
            href={`http://localhost:3000/?page=${+page + 1}`}
            className="text-2xl text-blue-500 bg-white
            } inline-block gap-1 p-1 rounded-lg border"
          >
            <MdKeyboardArrowRight />
          </Link>
        )}
      </div>
    </div>
  );
};
export default Pagination;

Now we have successfully created the Pagination component, but you need to follow one more steps before pagination, which is to add the component to our page pass the page and length props.

You may wondering from how I get page query, well in Next.js 13 you can get any query directly from page using searchParams prop.

import axios from "axios";
import Pagination from "./pagination";

const fetchPost = async (page) => {
  const res = await axios.get(
    `${process.env.NEXT_PUBLIC_POST}/pagination?page=${page ? page - 1 : 0}`
  );
  const data = await res.data;
  return data;
};

const fetchAllPost = async () => {
  const res = await axios.get(`${process.env.NEXT_PUBLIC_POST}`);
  const data = await res.data;
  return data;
};

//Getting "page" query sting from "searchParams" prop
const Page = async ({ searchParams: { page } }) => {
  const allPosts = await fetchAllPost();
  const posts = await fetchPost(page);

  return (
    <main>

//Pass length and Page props
      <Pagination length={allPosts.length} page={page ? page : 1} />
    </main>
  );
};
export default Posts;

By following this method you will be able to add Pagination in your Next.js website in Server Side.

Setting up the API EndPoints in Server for Pagination

Before moving difrectly to the front-end first you need to make sure that your API end-points allows you to fetch a limited data as per your need,

For example this API "https://example.com/posts/?=1" only return 20 post and if we need more than I can use query to get another 20 post from the same API, such as "https://example.com/posts/?=2" or "https://example.com/posts/?=3" for another 20 post.

//API Endpoints for Pagination

"https://example.com/posts/?=1" = return 20 Posts

"https://example.com/posts/?=2" = skip 20 and return another 20 Posts

"https://example.com/posts"/?=3 = skip 30 and return another 20 Posts

We need this functionallity so that all the post didn't get fetched at once.

So you created your backend by yourself using Node.js then make so to added this funtion, Below I mentioned how you can impleemnt the same function on your endpoint using few lines of code.

In your controller create a new endpoint to return all the posts from your database, in my case i'm using MongoDB.

//API for getting all the Posts

const getAllPost = async (req, res) => {
  try {
    const post = await postModel.find()

    res.status(200).json(post);
  } catch (error) {
    res.status(500).json(`Error in Getting All Posts, Error: ${error}`);
  }
};

Now we need to add some extra methods to get only a few posts as required and we can do that easily by applying Mongoose methods.

before doing that, create a variable inside the getAllPost function and set how many posts you want to show,

const postPerPage = 20;   //20 Posts per Page

Now we need to know on which page the use is you can use query to get the page value,

const page = req.query.page || 0;  //Get value from query, If no value available then set to "0"

Once you create both the variable "postPerPage" and "page" now you need to use these values on the "skip" and "limit" methods.

const postPagination = async (req, res) => {
  const page = req.query.page || 0;
  const postPerPage = 20;

  try {
    const getPost = await postModel
      .find()
      .skip(page * postPerPage) //Here we're skipping Posts [1 * 20 = 20] as per Page & postPerPage value
      .limit(postPerPage); // Here we're limiting Posts per Page [20]
     .sort({ createdAt: -1 }); 
    res.status(200).json(getPost);
  } catch (error) {
    res.status(500).json(`Error in Getting Pagination Post, Error: ${error}`);
  }
};

Now let's create a API Endpoint in the route file

router.get("/post/pagination", postPagination);  //End point for Pagination

Congratulations, You just created an API Endpoint for Pagination.

This is one of the method of create a Server-Side Pagination using the latest Next.js 13, you can find so many other ways of create a Server-Side Pagination on the internet.

Let me know in the commend section if you need any help or suggection I would love to read them.

I hope this post helps you to create a Next js 13 Server-Side Pagination, you may also want to know https://singlesyntax.com/blog/nextjs-page-scroll-progress-bar

Forem: Yasmin