DEV Community: Tushar saxena

Custom Image Size Limiter & Media Type Checker in Sitecore

Tushar saxena — Fri, 21 Jul 2023 09:13:59 +0000

Ask

The requirement was to limit image size on a image field in any template and also to restrict the type of image.

For example: The image should be less then 1 MB & should be either png or jpg.

Solution

Since the ask was specific to an image field on a template and not to all image fields in general, the first thing that comes to any sitecore developer's mind is using a validation rule on that field inside your template it best suits the purpose. Yes! that is correct, but since there is no default validation rule to use we need to create our very own.

So, lets start by creating a validation rule item for it within sitecore.
- Go to /sitecore/system/Settings/Validation Rules/Field Rules in your sitecore content tree and insert a Validation Rule item by right clicking on the folder and choosing the insert option from there.
- You can name the item whatever you want to but for this post we are naming it as image size limiter and type checker , you can fill in the Titleand the Description with name of the item for now.
- Keep the Type and the Parameter field empty for now we will be filling this up later in the post.
Attach this custom validation rule item on the image field.
- Inside of your template item go to the section where you have your image field item defined. Click on the item.
- Now, scroll down a little on the right until you see the Validation Rule section. Attach your custom validation rule item we just created on all the four multilist that you see. It should look something like this.

Now, lets write code for our custom validation rule.
- Now, in your app's codebase in .Net create a class(.cs) file and name it CustomImageSizeValidator in one of the project inside your solution. In my case it is inside Adx.Foundation.SitecoreFields.Field_Validations where Adx.soln is my solution's name.
- Let's create a basic structure of our validation rule file with all the required member functions.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Sitecore.Data.Items;
using Sitecore.Globalization;
using Sitecore.Data.Fields;
using Sitecore.Data.Validators;
using Sitecore;
using Sitecore.Collections;

namespace Adx.Foundation.SitecoreFields.Field_Validations {
  public class CustomImageSizeValidator: StandardValidator {
    public CustomImageSizeValidator() {}
    public override string Name {
      get {
        return "Image Size and Type Validator";
      }
    }
    protected override ValidatorResult GetMaxValidatorResult() {
      return GetFailedResult(ValidatorResult.Error);
    }
    protected override ValidatorResult Evaluate() {
      Field field = GetField();

      if (field == null) {
        return ValidatorResult.Valid;
      }

      long maxSize = GetMaxSizeFromParameters(); // fetch maxSize from the Parameters

      List < string > extensions = GetExtensionsFromParameters();

      ImageField imageField = (ImageField) field;

      // Get the MediaItem from the ImageField
      if (imageField != null && imageField.MediaItem != null) {
        MediaItem mediaItem = new MediaItem(imageField.MediaItem);

        // In case the extension parameter is not provided
        if (extensions.Count == 0) {
          extensions.Add(mediaItem.Extension);
        }
        if (mediaItem != null && mediaItem.Size <= maxSize && extensions.Contains(mediaItem.Extension)) {
          return ValidatorResult.Valid;
        } else if (mediaItem != null && mediaItem.Size <= maxSize) {
          Text = Translate.Text("The image is not of {0} type.", string.Join(",", extensions));
        } else if (mediaItem != null && extensions.Contains(mediaItem.Extension)) {
          Text = Translate.Text("The image size exceeds the allowed limit of {0}.", MainUtil.FormatSize(maxSize));
        } else {
          Text = Translate.Text("The image size exceeds the allowed limit of {0} and image is not of {1} type.", MainUtil.FormatSize(maxSize), string.Join(",", extensions));
        }
      } else {
        return ValidatorResult.Valid;
      }

      return GetFailedResult(ValidatorResult.Error);
    }

    private long GetMaxSizeFromParameters() {

      // Read the custom parameters from the validation rule item's Parameters field
      SafeDictionary < string > parameters = GetParameters();

      if (parameters != null && parameters["maxSize"] != null) {
        return long.Parse(parameters["maxSize"]);
      }

      // If parsing fails, use a default value
      return 1048576; // 1 MB
    }

    private List < string > GetExtensionsFromParameters() {

      List < string > extensions = new List < string > ();

      // Read the custom parameters from the validation rule item's Parameters field
      SafeDictionary < string > parameters = GetParameters();

      if (parameters != null && parameters["extensions"] != null) {
        extensions = parameters["extensions"].Split(',').ToList();
      }

      return extensions;
    }

    private SafeDictionary < string > GetParameters() {

      // Access the Parameters property of the base Validator to get the parameters defined in the validation rule item.
      return base.Parameters;
    }
  }
}

GetParameters( ) inherits the base Parameter property which holds all the parameters defined in our validation rule items within sitecore.
GetMaxSizeFromParameters( ) method is created to get the maxSize parameter from the Parameter field on our custom validation rule item within sitecore.
Similarly, GetExtensionsFromParameters( ) method is created to get the extensions from the Parameter field on our custiom validation rule item within sitecore.
Evaluate( ) method is called whenever an operation is performed on the image field to which our custom validation rule is attached.
Now, that our logic is in place lets head back to sitecore and set the remaining fields on our custom validation rule item.
- Type: In my case the namespace with the class name is Adx.Foundation.SitecoreFields.Field_Validations.CustomImageSizeValidator fill yours accordingly.
- Parameters: maxSize=1048576&extensions=png,jpg&Result=FatalError fill in the required parameters and I am using Result=FatalError parameter to prevent user from saving the item if the validation fails.
We are all set! Now you can go to any item created from that template and try voilating the validations we just defined on the image field in it.

Note: By default image field have the alt text validation rule set up which takes severity and displays first. After adding the alt text upon saving you can see our validation displaying if there is any voilation.

PS: Thank you for following up I hope this was of some help if yes pls consider dropping a comment down below, It helps me be motivated to drive this through😄.

Integrating Next.js with Leaflet.js + Mapbox

Tushar saxena — Sat, 05 Dec 2020 08:16:21 +0000

Do you want to include interactive maps in your Nextjs application?Then you must have come across Leafletjs. Though Leafletjs is very simple to use, but when it comes to Server Side rendered(SSR) applications build with Nextjs it lacks a little which can be annoying at times. But don't you worry I've found a workaround for this.

To set the scene let us first know 👇

Why Leafletjs?

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of JS, it has all the mapping features most developers ever need.

While Leaflet is meant to be as lightweight as possible, and focuses on a core set of features, an easy way to extend its functionality is to use third-party plugins. Thanks to the awesome community behind Leaflet, there are literally hundreds of nice plugins to choose from. We'll use one of those plugins in an example later in this post.

Tutorial

Please note that in this tutorial, I am making the assumption that you already have an existing Next.js project up and running. If you don’t, please start by traversing the Next.js documentation.

Install the required dependencies

npm i leaflet leaflet-defaulticon-compatibility leaflet-geosearch react-leaflet

Note: if you use TypeScript, make sure you install @types/leaflet otherwise you'll get compile errors on certain attributes used in the example.

I'll explain the requirement of each as we use them further in the tutorial.

Creating the map component

In your application create a map.jsx file inside the component folder ./component/Map.jsx.

It is important that this code is in a separate file from where it is embedded into your page because otherwise you'll get a window undefined error about which we'll talk later.

Side note: For Typescript users the file is called as map.tsx.
Inside the file put the following code

import { MapContainer, TileLayer,Marker,Popup } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
import "leaflet-defaulticon-compatibility";

const Map = () => {
  return (
    <MapContainer center={[40.8054,-74.0241]} zoom={14} scrollWheelZoom={false} style={{height: "100%", width: "100%"}}>
      <Marker 
      position={[40.8054,-74.0241]}
      draggable={true}
      animate={true}
      >
        <Popup>
          Hey ! you found me
        </Popup>
      </Marker>
    </MapContainer>
  )
}

export default Map

In the above example I have used some basic attributes from react-leaflet to initialize the map.

center: centers the map around the provided latitude & longitude.
zoom: Initial zoom for the Map ranging from 0 to 18.
scrollWheelZoom: yes it is exactly what it sounds like.
position: sets the position for the Marker.
draggable: helps drag and drop your marker on map.
animate: if true, panning will always be animated.

There are lot many features and examples available in react-leaflet documentation.

Setting up Mapbox API

In the above example, we will be using Mapbox API to add custom title layer to our map.
Mapbox plugin is quietly supported by leaflet and it also provides you with many custom mapping styles, you can even create your very own styles in their studio, for this part of the tutorial will use the default styles.

The first thing we’ll need to set up our custom Mapbox style is to have an account. I'm not going to walk you through that process, but you can head over to Mapbox’s website where you can sign up for free.

To generate a token that we’ll use for providing access to our Map.

Head on over to the Account section of the Mapbox dashboard which you can access by clicking over your profile in the top right section of the navbar.
Mapbox provides you with a “default” token that you can use in your applications. You're free to use this, but I recommend creating a new token that you can provide a unique name.

Configuring our custom endpoint
For this tutorial, we’re going to use Mapbox’s Static Tiles service. You can copy the endpoint from there which will look like this.

https://api.mapbox.com/styles/v1/{username}/{style_id}/tiles/256/{z}/{x}/{y}@2x?access_token={access_token}

There are a few parameters here we need to understand:

username: this will be your Mapbox account’s username
style_id: this will be the ID of the style you are using
z, x, y: these are parameters that Leaflet programmatically swaps out, so we want to leave them as is
access_token: this is the Mapbox key you created above

For this part of the example, we are using styles provided by Mapbox itself. You can also create your very own styles in Mapbox but for now, will use the streets-v11 from here.

And once I update my endpoint parameters, the final tilepoint URL will look like:
https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token=MY_ACCESS_TOKEN

Since the style is provided by mapbox thus username in the URL is replaced with mapbox, if you are using your own style then you'll replace it with your own username.

Adding a custom TileLayer to React Leaflet

Inside of your <MapContainer> component in map.jsx you include a <TileLayer> component, which defines the imagery of the world that you base your map upon.

The example on the React Leaflet homepage uses a public version of OpenStreetMap as their TileLayer, which is an open source map project created and updated by people all around the world.

<MapContainer center={position} zoom={13}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
  />
</MapContainer>

This gives you a basic map, but we want to swap in Mapbox so we can set up a custom look and feel for our map.

To add our custom style, we’ll want to update the url and attribution props of the TileLayer component.

For URL, it will simply be the custom style endpoint we created earlier, so in my example, it looks like:

https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token=MY_ACCESS_TOKEN

For attribution, we want to credit Mapbox as the service, so we want to set our attribution as:

Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>

When plugged in to our TileLayer, our map.jsx should now look like this:

import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import "leaflet-defaulticon-compatibility";

const Map = () => {
  return (
    <MapContainer
      center={[40.8054, -74.0241]}
      zoom={14}
      scrollWheelZoom={false}
      style={{ height: "100%", width: "100%" }}
    >
      <TileLayer
        url={`https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token=MY_ACCESS_TOKEN`}
        attribution='Map data &copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors, <a href=&quot;https://creativecommons.org/licenses/by-sa/2.0/&quot;>CC-BY-SA</a>, Imagery &copy; <a href=&quot;https://www.mapbox.com/&quot;>Mapbox</a>'
      />
      <Marker position={[40.8054, -74.0241]} draggable={true} animate={true}>
        <Popup>Hey ! I live here</Popup>
      </Marker>
    </MapContainer>
  );
};

export default Map;

Finally let's render our Map

As you might know, the global window object is not available in SSR, you'll get a ReferenceError if you try using it there.
Now to avoid this we can take advantage of Nextjs's dynamic loading which will help to prevent SSR.
Inside ./pages/index.js emmbed your Map component like this:

import React from "react";
import dynamic from "next/dynamic";

export default function Home() {
  const MapWithNoSSR = dynamic(() => import("../component/map"), {
    ssr: false
  });

  return (
    <main>
      <div id="map">
        <MapWithNoSSR />
      </div>
    </main>
  );
}

And that's it you're good to go with something like this 👇

Closing thoughts

I hope this quick tutorial was helpful to you in some way 😊. I know it would have saved me quite a bit of work if I had this before I went down my Next.js + leafletjs path. Once you’ve got it all working, Don't forget to provide me with your valuable feedback. Good luck!👍