Skip to content

fix: replace image links, and change how imgx transform works #7250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BatuhanW merged 3 commits into from
Feb 5, 2026
+15 −15
Merged

fix: replace image links, and change how imgx transform works #7250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
49f693a
fix: replace image links, and change how imgx transform works
DoguhanOzgurAkca Feb 5, 2026
ae51708
fix: put image alt text
DoguhanOzgurAkca Feb 5, 2026
8e30899
Merge branch 'main' into fix-image-issues
DoguhanOzgurAkca Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions documentation/blog/2023-10-02-refine-crm-overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-10-02-refine-crm
hide_table_of_contents: false
---

![Image description](https://refine.ams3.cdn.digitaloceanspaces.com/CRM-app/crm-general.avif)
![Refine CRM application overview showing the main interface](https://refine.ams3.cdn.digitaloceanspaces.com/CRM-app/crm-general.avif)

I want to introduce our newest example app – a full-fledged React CRM (Customer Relationship Management) application built using Refine, Ant Design, and GraphQL.

Expand Down Expand Up @@ -41,7 +41,7 @@ Our CRM application is feature-rich and comes with everything you need to manage

The Dashboard provides an at-a-glance overview of your CRM activities. It displays key metrics, recent customer interactions, and upcoming events, offering valuable insights to help you make informed decisions.

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/halx7sfl9ctke1fu3w35.png)
![CRM dashboard showing key metrics, charts, and recent activity overview](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-10-02-refine-crm-overview/halx7sfl9ctke1fu3w35.png)

<br/>
<br/>
Expand All @@ -50,7 +50,7 @@ The Dashboard provides an at-a-glance overview of your CRM activities. It displa

Effortlessly manage appointments, meetings, and important events with the integrated Calendar feature. Stay organized and ensure you never miss a crucial interaction with your customers.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2v8ghazuheiznefwat9.png)
![Calendar view displaying scheduled appointments, meetings, and events](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-10-02-refine-crm-overview/m2v8ghazuheiznefwat9.png)

<br/>
<br/>
Expand All @@ -59,7 +59,7 @@ Effortlessly manage appointments, meetings, and important events with the integr

Our Scrumboard or Project Kanban page streamlines project management. Visualize project progress, manage tasks, and facilitate team collaboration with ease. Move tasks through customizable boards to keep your projects on track.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hcll7tbqx3t71i6v7a9.png)
![Kanban board with multiple columns showing project tasks and their progress](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-10-02-refine-crm-overview/0hcll7tbqx3t71i6v7a9.png)

<br/>
<br/>
Expand All @@ -68,7 +68,7 @@ Our Scrumboard or Project Kanban page streamlines project management. Visualize

Effectively manage your sales process from lead generation to deal closure. The Sales Pipeline provides a visual representation of your sales stages, helping your team prioritize leads and track conversions.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5uoj722wasvw2fx8z49.png)
![Sales pipeline visualization showing deal stages from lead to closed](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-10-02-refine-crm-overview/q5uoj722wasvw2fx8z49.png)

<br/>
<br/>
Expand All @@ -77,7 +77,7 @@ Effectively manage your sales process from lead generation to deal closure. The

The Companies page allows you to organize and categorize your business contacts. Maintain detailed profiles for each company, including contact information, communication history, and associated contacts.

![Imag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjlahcc1icfthu2n31ar.png)
![Companies list view showing company profiles with contact details and history](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-10-02-refine-crm-overview/gjlahcc1icfthu2n31ar.png)

<br/>
<br/>
Expand All @@ -86,7 +86,7 @@ The Companies page allows you to organize and categorize your business contacts.

Manage individual contacts efficiently using the Contacts page. Keep track of customer interactions, schedule follow-ups, and access critical contact information quickly.

![Imag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4c0ef7tv7nktax4gt3oz.png)
![Contacts page displaying individual contact information and interaction history](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-10-02-refine-crm-overview/4c0ef7tv7nktax4gt3oz.png)

<br/>
<br/>
Expand All @@ -95,7 +95,7 @@ Manage individual contacts efficiently using the Contacts page. Keep track of cu

Create, send, and manage quotes seamlessly with the Quotes feature. Generate professional quotes for your customers, track their status, and convert them into sales.

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rqj0pzgkrure7ov5mr9.png)
![Quotes management interface showing quote creation and tracking](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-10-02-refine-crm-overview/9rqj0pzgkrure7ov5mr9.png)

<br/>
<br/>
Expand All @@ -104,13 +104,13 @@ Create, send, and manage quotes seamlessly with the Quotes feature. Generate pro

The Administration section empowers you to configure and customize your CRM application to suit your specific business needs. Manage user roles, access permissions, and system settings effortlessly.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5deq6ceue79kloeuryz.png)
![Administration panel with user roles, permissions, and system configuration](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-10-02-refine-crm-overview/m5deq6ceue79kloeuryz.png)

<br/>

### Authentication & Authorization

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1r04i2h0cf1jegasbte.png)
![Login and authentication screen with secure access control](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-10-02-refine-crm-overview/m1r04i2h0cf1jegasbte.png)

This example app is a comprehensive set of features that ensures you can streamline your customer interactions, project management, and sales processes, all within a single, user-friendly platform. Whether you're managing contacts, tracking sales, or overseeing projects, our CRM app provides the tools you need for success.

Expand Down Expand Up @@ -138,7 +138,7 @@ We used [GraphQL](https://graphql.org/) for effective data retrieval and updatin

For instance, on the Project Kanban page, tasks get updated automatically when cards are dragged and dropped between sections.

![Image](https://refine.ams3.cdn.digitaloceanspaces.com/CRM-app/real-time.avif)
![Real-time task updates on Kanban board with GraphQL subscriptions](https://refine.ams3.cdn.digitaloceanspaces.com/CRM-app/real-time.avif)

GraphQL's efficient data-fetching capabilities made working with large datasets a breeze. It's flexibility allowed us to tailor our queries to our exact requirements.

Expand Down
8 changes: 4 additions & 4 deletions documentation/src/components/image/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import React from "react";
import clsx from "clsx";

export const Image = (props: React.ImgHTMLAttributes<HTMLImageElement>) => {
const shouldImgix =
const shouldBypassImgix =
props.src?.endsWith(".avif") || props.src?.endsWith(".webp");

const src = shouldImgix
const src = shouldBypassImgix
? props.src
: `https://refine-web.imgix.net${props.src?.replace(
: `${props.src?.replace(
"https://refine.ams3.cdn.digitaloceanspaces.com",
"",
"https://refine-web.imgix.net",
)}?fm=webp&auto=format`;

return (
Expand Down
Loading