Сергей delphinpro

.blog-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
}
.blog__card:first-child {
  grid-row: span 3;
}

Совершенно непонятно, зачем на одной странице нужны 10 тыс фоток.
Во-первых, столько физически не поместится даже на три-пять экранов.
Во-вторых, человек в принципе не способен воспринимать такое количество информации одновременно.
Скорее всего, мне думается, это просто лента фотографий, которая "бесконечно" прокручивается для просмотра.
Вот из этого и нужно исходить.

Сложить список файлов в базу данных.
Загружать небольшое количество, ну скажем 50-100 изображений.
По мере прокрутки страницы подгружать еще сотню следующих. Предыдущие удалять. При прокрутке в обратную сторону подгружать предыдущие, а ушедшие из зоны видимости удалять.
И никакой нагрузки на браузер не будет, и визуально будет казаться, что все фото присутствуют на странице.

<button class="btn-chapter" data-chapter="1">Глава 1</button>
<button class="btn-chapter" data-chapter="2">Глава 2</button>
<button class="btn-chapter" data-chapter="3">Глава 3</button>
<button class="btn-chapter" data-chapter="4">Глава 4</button>
<button class="btn-chapter" data-chapter="5">Глава 5</button>

<div class="chapter" id="chapter-1"><h2>Глава 1: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-2"><h2>Глава 2: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-3"><h2>Глава 3: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-4"><h2>Глава 4: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-5"><h2>Глава 5: Основы Фотошопа - Растровая графика</h2></div>

.chapter {
  display: none;
}
.chapter.is-open {
  display: block;
}

document.addEventListener('DOMContentLoaded', function() {

  const allChapters = document.querySelectorAll('.chapter');

  const closeAllChapters = () => allChapters.forEach(el => el.classList.remove('is-open'));
  const openChapterById = id => document.getElementById(id).classList.add('is-open');;

  document.querySelectorAll('.btn-chapter').forEach(btn => {
    btn.addEventListener('click', () => {
      closeAllChapters();
      openChapterById(`chapter-${btn.dataset.chapter}`);
    });
  });

});

Здесь вы вроде бы правильно обновляете картинку только у нужного товара по его айди

$query = mysqli_query($link,"UPDATE tovars SET img = '$names$name' WHERE id = '$id'");

Но откуда ID то берется?

Передавайте идентификатор вместе с картинкой

<form method="post" enctype="multipart/form-data">
  <label for="tovar_full">Изображение товара</label> 
  <input type="hidden" name="id" value=" тут айди товара, к которому нужно прикрепить картинку " />
  <input type="file" name="filename" size="10" />
  <input type="submit"  value="Загрузить" />
</form>

и на сервере соответственно

$names = "https://smm-services.ru/admin/";
$id = $_POST['id']; // получить ID из формы
$query = mysqli_query($link,"UPDATE tovars SET img = '$names$name' WHERE id = '$id'");

PS
Нельзя вставлять данные в запрос напрямую полученные от пользователя. Узнайте, что такое sql-инъекции и как от них защищаться.

Всё дело в токене. Без него телега блокирует доступ к файлу. Но работает он только в пределах сессии в телеграме. Это если попроще объяснить.

Ширина явно указана в стилях - 120px. Так как установлен box-sizing: border-box; то padding в расчет ширины не берем. Итог = 120px.

SVG - векторный формат.
просто укажите нужные размеры в стилях, и браузер сам все увеличит

.my-svg-image {
   width: 200px;
   height: 200px;
}

Ну а если нужно именно файл поправить - то откройте его в векторном редакторе и измените размеры.

Используйте метод .animate() и изменяйте любые параметры блока.

можно имитировать внутренние скругления двумя псевдоэлементами.

Самая обычная таблица.

Потому что у вас скрипт обработки вкладок кривой.
Можно поправить скрипт, или хакнуть немножко вот так:

<button type="button" class="btnNavigation btnActive" data-tab="button_1">
      <img src="../img/image.png" alt="" srcset="" style="pointer-events: none;">
    </button>

Поэтому и попросил какой-нибудь хороший визуализатор, если кто часто пользуется, где можно будет реализовать такое и потом CTR+C, CTR+V.

Его можно самому написать за несколько минут.

Вот, как вариант:

https://codepen.io/delphinpro/pen/BaXXKzQ

Все что нужно для переключения темы:

Инициализация при загрузке, максимально короткий скрипт. При желании можно добавить проверку на пользовательские предпочтения prefer-color-theme

<head>
    <script>
        const theme = localStorage.getItem('color-theme') === 'dark' ? 'dark' : 'light';
        document.documentElement.setAttribute('data-color-theme', theme);
    </script>

Код переключателя

document.querySelectorAll('.theme-toggle').forEach(el => {
    el.addEventListener('click', () => {
        const theme = document.documentElement.getAttribute('data-color-theme') === 'dark' ? 'light' : 'dark';
        document.documentElement.setAttribute('data-color-theme', theme);
        localStorage.setItem('color-theme', theme);
    });
});

И стили

:root {
  --body-bg: white;
}
[data-color-theme="dark"] {
  -body-bg: black;
}

Разумеется, вместо атрибута можно вешать класс

document.documentElement.classList.add('dark-theme');
:root {
  --body-bg: white;
}
html.dark-theme {
  -body-bg: black;
}

<div class="wrapper">
  <img src="">
  <button class="btn1"></button>
</div>

.wrapper { 
  position: relative;
}

.wrapper img {
  width: 100vw;
  height: 100vh;
  display: block;
}

.btn1 {
  position: absolute;
  top: подобрать значение в процентах;
  left: подобрать значение в процентах;
}