Размер иконок elfinder

Недавно я писал о том, что прикрутил файловый менеджер elfinder к opencart 2.x. Если вам не нравится размер иконок в этом файловом менеджере — под катом инструкция как их увеличить в 2,5 раза

Для того, чтобы переопределить размер иконок нужно просто переопределить стили.

Для этого добавляем в какой-нибудь css файл (напр: /admin/view/stylesheet/stylesheet.css) следующие строки:

.elfinder-cwd-icon {
  width: 120px !important;
  height: 120px !important;
  background-size: 120px !important; /* Масштабируем фон */
}

.elfinder-cwd-view-icons .elfinder-cwd-file-wrapper {
  width: 125px !important;
  height: 125px !important;
}

.elfinder-cwd-view-icons .elfinder-cwd-file {
  width: 150px !important;
  height: 150px !important;
}
.elfinder-cwd-icon-directory {
 background-position: 0 -120px !important
}
.elfinder-cwd-icon-application {
 background-position: 0 -375px !important
}
.elfinder-cwd-icon-x-empty,
.elfinder-cwd-icon-text {
 background-position: 0 -500px !important
}
.elfinder-cwd-icon-vnd-adobe-photoshop,
.elfinder-cwd-icon-postscript {
 background-position: 0 -625px !important
}
.elfinder-cwd-icon-audio {
 background-position: 0 -750px !important
}
.elfinder-cwd-icon-video,
.elfinder-cwd-icon-flash-video {
 background-position: 0 -875px !important
}
.elfinder-cwd-icon-rtf,
.elfinder-cwd-icon-rtfd {
 background-position: 0 -1002,5px !important
}
.elfinder-cwd-icon-pdf {
 background-position: 0 -1125px !important
}
.elfinder-cwd-icon-ms-excel,
.elfinder-cwd-icon-msword,
.elfinder-cwd-icon-vnd-ms-excel,
.elfinder-cwd-icon-vnd-ms-excel-addin-macroEnabled-12,
.elfinder-cwd-icon-vnd-ms-excel-sheet-binary-macroEnabled-12,
.elfinder-cwd-icon-vnd-ms-excel-sheet-macroEnabled-12,
.elfinder-cwd-icon-vnd-ms-excel-template-macroEnabled-12,
.elfinder-cwd-icon-vnd-ms-office,
.elfinder-cwd-icon-vnd-ms-powerpoint,
.elfinder-cwd-icon-vnd-ms-powerpoint-addin-macroEnabled-12,
.elfinder-cwd-icon-vnd-ms-powerpoint-presentation-macroEnabled-12,
.elfinder-cwd-icon-vnd-ms-powerpoint-slide-macroEnabled-12,
.elfinder-cwd-icon-vnd-ms-powerpoint-slideshow-macroEnabled-12,
.elfinder-cwd-icon-vnd-ms-powerpoint-template-macroEnabled-12,
.elfinder-cwd-icon-vnd-ms-word,
.elfinder-cwd-icon-vnd-ms-word-document-macroEnabled-12,
.elfinder-cwd-icon-vnd-ms-word-template-macroEnabled-12,
.elfinder-cwd-icon-vnd-oasis-opendocument-chart,
.elfinder-cwd-icon-vnd-oasis-opendocument-database,
.elfinder-cwd-icon-vnd-oasis-opendocument-formula,
.elfinder-cwd-icon-vnd-oasis-opendocument-graphics,
.elfinder-cwd-icon-vnd-oasis-opendocument-graphics-template,
.elfinder-cwd-icon-vnd-oasis-opendocument-image,
.elfinder-cwd-icon-vnd-oasis-opendocument-presentation,
.elfinder-cwd-icon-vnd-oasis-opendocument-presentation-template,
.elfinder-cwd-icon-vnd-oasis-opendocument-spreadsheet,
.elfinder-cwd-icon-vnd-oasis-opendocument-spreadsheet-template,
.elfinder-cwd-icon-vnd-oasis-opendocument-text,
.elfinder-cwd-icon-vnd-oasis-opendocument-text-master,
.elfinder-cwd-icon-vnd-oasis-opendocument-text-template,
.elfinder-cwd-icon-vnd-oasis-opendocument-text-web,
.elfinder-cwd-icon-vnd-openofficeorg-extension,
.elfinder-cwd-icon-vnd-openxmlformats-officedocument-presentationml-presentation,
.elfinder-cwd-icon-vnd-openxmlformats-officedocument-presentationml-slide,
.elfinder-cwd-icon-vnd-openxmlformats-officedocument-presentationml-slideshow,
.elfinder-cwd-icon-vnd-openxmlformats-officedocument-presentationml-template,
.elfinder-cwd-icon-vnd-openxmlformats-officedocument-spreadsheetml-sheet,
.elfinder-cwd-icon-vnd-openxmlformats-officedocument-spreadsheetml-template,
.elfinder-cwd-icon-vnd-openxmlformats-officedocument-wordprocessingml-document,
.elfinder-cwd-icon-vnd-openxmlformats-officedocument-wordprocessingml-template {
 background-position: 0 -1250px !important
}
.elfinder-cwd-icon-html {
 background-position: 0 -1375px !important
}
.elfinder-cwd-icon-css {
 background-position: 0 -1500px !important
}
.elfinder-cwd-icon-javascript,
.elfinder-cwd-icon-x-javascript {
 background-position: 0 -1625px !important
}
.elfinder-cwd-icon-x-perl {
 background-position: 0 -1750px !important
}
.elfinder-cwd-icon-x-python {
 background-position: 0 -1875px !important
}
.elfinder-cwd-icon-x-ruby {
 background-position: 0 -2000px !important
}
.elfinder-cwd-icon-x-sh,
.elfinder-cwd-icon-x-shellscript {
 background-position: 0 -2125px !important
}
.elfinder-cwd-icon-x-c,
.elfinder-cwd-icon-x-csrc,
.elfinder-cwd-icon-x-chdr,
.elfinder-cwd-icon-x-c--,
.elfinder-cwd-icon-x-c--src,
.elfinder-cwd-icon-x-c--hdr,
.elfinder-cwd-icon-x-java,
.elfinder-cwd-icon-x-java-source {
 background-position: 0 -2250px !important
}
.elfinder-cwd-icon-x-php {
 background-position: 0 -2375px !important
}
.elfinder-cwd-icon-xml {
 background-position: 0 -2500px !important
}
.elfinder-cwd-icon-zip,
.elfinder-cwd-icon-x-zip,
.elfinder-cwd-icon-x-xz,
.elfinder-cwd-icon-x-7z-compressed {
 background-position: 0 -2625px !important
}
.elfinder-cwd-icon-x-gzip,
.elfinder-cwd-icon-x-tar {
 background-position: 0 -2750px !important
}
.elfinder-cwd-icon-x-bzip,
.elfinder-cwd-icon-x-bzip2 {
 background-position: 0 -2875px !important
}
.elfinder-cwd-icon-x-rar,
.elfinder-cwd-icon-x-rar-compressed {
 background-position: 0 -3000px !important
}
.elfinder-cwd-icon-x-shockwave-flash {
 background-position: 0 -3125px !important
}
.elfinder-cwd-icon-group {
 background-position: 0 -3250px !important
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

.elfinder-cwd-icon {

width: 120px !important;

height: 120px !important;

background-size: 120px !important; /* Масштабируем фон */

}

.elfinder-cwd-view-icons .elfinder-cwd-file-wrapper {

width: 125px !important;

height: 125px !important;

}

.elfinder-cwd-view-icons .elfinder-cwd-file {

width: 150px !important;

height: 150px !important;

}

.elfinder-cwd-icon-directory {

background-position: 0 -120px !important

}

.elfinder-cwd-icon-application {

background-position: 0 -375px !important

}

.elfinder-cwd-icon-x-empty,

.elfinder-cwd-icon-text {

background-position: 0 -500px !important

}

.elfinder-cwd-icon-vnd-adobe-photoshop,

.elfinder-cwd-icon-postscript {

background-position: 0 -625px !important

}

.elfinder-cwd-icon-audio {

background-position: 0 -750px !important

}

.elfinder-cwd-icon-video,

.elfinder-cwd-icon-flash-video {

background-position: 0 -875px !important

}

.elfinder-cwd-icon-rtf,

.elfinder-cwd-icon-rtfd {

background-position: 0 -1002,5px !important

}

.elfinder-cwd-icon-pdf {

background-position: 0 -1125px !important

}

.elfinder-cwd-icon-ms-excel,

.elfinder-cwd-icon-msword,

.elfinder-cwd-icon-vnd-ms-excel,

.elfinder-cwd-icon-vnd-ms-excel-addin-macroEnabled-12,

.elfinder-cwd-icon-vnd-ms-excel-sheet-binary-macroEnabled-12,

.elfinder-cwd-icon-vnd-ms-excel-sheet-macroEnabled-12,

.elfinder-cwd-icon-vnd-ms-excel-template-macroEnabled-12,

.elfinder-cwd-icon-vnd-ms-office,

.elfinder-cwd-icon-vnd-ms-powerpoint,

.elfinder-cwd-icon-vnd-ms-powerpoint-addin-macroEnabled-12,

.elfinder-cwd-icon-vnd-ms-powerpoint-presentation-macroEnabled-12,

.elfinder-cwd-icon-vnd-ms-powerpoint-slide-macroEnabled-12,

.elfinder-cwd-icon-vnd-ms-powerpoint-slideshow-macroEnabled-12,

.elfinder-cwd-icon-vnd-ms-powerpoint-template-macroEnabled-12,

.elfinder-cwd-icon-vnd-ms-word,

.elfinder-cwd-icon-vnd-ms-word-document-macroEnabled-12,

.elfinder-cwd-icon-vnd-ms-word-template-macroEnabled-12,

.elfinder-cwd-icon-vnd-oasis-opendocument-chart,

.elfinder-cwd-icon-vnd-oasis-opendocument-database,

.elfinder-cwd-icon-vnd-oasis-opendocument-formula,

.elfinder-cwd-icon-vnd-oasis-opendocument-graphics,

.elfinder-cwd-icon-vnd-oasis-opendocument-graphics-template,

.elfinder-cwd-icon-vnd-oasis-opendocument-image,

.elfinder-cwd-icon-vnd-oasis-opendocument-presentation,

.elfinder-cwd-icon-vnd-oasis-opendocument-presentation-template,

.elfinder-cwd-icon-vnd-oasis-opendocument-spreadsheet,

.elfinder-cwd-icon-vnd-oasis-opendocument-spreadsheet-template,

.elfinder-cwd-icon-vnd-oasis-opendocument-text,

.elfinder-cwd-icon-vnd-oasis-opendocument-text-master,

.elfinder-cwd-icon-vnd-oasis-opendocument-text-template,

.elfinder-cwd-icon-vnd-oasis-opendocument-text-web,

.elfinder-cwd-icon-vnd-openofficeorg-extension,

.elfinder-cwd-icon-vnd-openxmlformats-officedocument-presentationml-presentation,

.elfinder-cwd-icon-vnd-openxmlformats-officedocument-presentationml-slide,

.elfinder-cwd-icon-vnd-openxmlformats-officedocument-presentationml-slideshow,

.elfinder-cwd-icon-vnd-openxmlformats-officedocument-presentationml-template,

.elfinder-cwd-icon-vnd-openxmlformats-officedocument-spreadsheetml-sheet,

.elfinder-cwd-icon-vnd-openxmlformats-officedocument-spreadsheetml-template,

.elfinder-cwd-icon-vnd-openxmlformats-officedocument-wordprocessingml-document,

.elfinder-cwd-icon-vnd-openxmlformats-officedocument-wordprocessingml-template {

background-position: 0 -1250px !important

}

.elfinder-cwd-icon-html {

background-position: 0 -1375px !important

}

.elfinder-cwd-icon-css {

background-position: 0 -1500px !important

}

.elfinder-cwd-icon-javascript,

.elfinder-cwd-icon-x-javascript {

background-position: 0 -1625px !important

}

.elfinder-cwd-icon-x-perl {

background-position: 0 -1750px !important

}

.elfinder-cwd-icon-x-python {

background-position: 0 -1875px !important

}

.elfinder-cwd-icon-x-ruby {

background-position: 0 -2000px !important

}

.elfinder-cwd-icon-x-sh,

.elfinder-cwd-icon-x-shellscript {

background-position: 0 -2125px !important

}

.elfinder-cwd-icon-x-c,

.elfinder-cwd-icon-x-csrc,

.elfinder-cwd-icon-x-chdr,

.elfinder-cwd-icon-x-c--,

.elfinder-cwd-icon-x-c--src,

.elfinder-cwd-icon-x-c--hdr,

.elfinder-cwd-icon-x-java,

.elfinder-cwd-icon-x-java-source {

background-position: 0 -2250px !important

}

.elfinder-cwd-icon-x-php {

background-position: 0 -2375px !important

}

.elfinder-cwd-icon-xml {

background-position: 0 -2500px !important

}

.elfinder-cwd-icon-zip,

.elfinder-cwd-icon-x-zip,

.elfinder-cwd-icon-x-xz,

.elfinder-cwd-icon-x-7z-compressed {

background-position: 0 -2625px !important

}

.elfinder-cwd-icon-x-gzip,

.elfinder-cwd-icon-x-tar {

background-position: 0 -2750px !important

}

.elfinder-cwd-icon-x-bzip,

.elfinder-cwd-icon-x-bzip2 {

background-position: 0 -2875px !important

}

.elfinder-cwd-icon-x-rar,

.elfinder-cwd-icon-x-rar-compressed {

background-position: 0 -3000px !important

}

.elfinder-cwd-icon-x-shockwave-flash {

background-position: 0 -3125px !important

}

.elfinder-cwd-icon-group {

background-position: 0 -3250px !important

}

Таким образом Вы увеличите размер иконок, но размер картинок останется прежним (48px — значение по умолчанию в elfinder)

Если мы хотим и сами картинки увеличить, то нам надо править connector.php.

Если у Вас opencart и мой модуль elfinder — connector.php имеет путь: /admin/controller/elfinder/connector.php

Итак. Добавляем опцию tmbSize, которая позволяет генерировать желаемый размер картинок для превьюшек. Должно получиться что-то типа такого:

$opts = array(
			// 'debug' => true,
			'roots' => array(
				array(
					'driver'        => 'LocalFileSystem',           // driver for accessing file system (REQUIRED)
					'path'          => '../image/catalog/',                 // path to files (REQUIRED)
					'URL'           => dirname($_SERVER['PHP_SELF']) . '/../image/catalog/', // URL to files (REQUIRED)
					'uploadDeny'    => array('all'),                // All Mimetypes not allowed to upload
					'uploadAllow'   => array('image', 'text/plain'),// Mimetype `image` and `text/plain` allowed to upload
					'uploadOrder'   => array('deny', 'allow'),      // allowed Mimetype `image` and `text/plain` only
					'tmbSize'	=> 120,
					'accessControl' => 'access'                     // disable and hide dot starting files (OPTIONAL)
				)
			)
		);

$opts = array(

// 'debug' => true,

'roots' => array(

array(

'driver' => 'LocalFileSystem', // driver for accessing file system (REQUIRED)

'path' => '../image/catalog/', // path to files (REQUIRED)

'URL' => dirname($_SERVER['PHP_SELF']) . '/../image/catalog/', // URL to files (REQUIRED)

'uploadDeny' => array('all'), // All Mimetypes not allowed to upload

'uploadAllow' => array('image', 'text/plain'),// Mimetype `image` and `text/plain` allowed to upload

'uploadOrder' => array('deny', 'allow'), // allowed Mimetype `image` and `text/plain` only

'tmbSize' => 120,

'accessControl' => 'access' // disable and hide dot starting files (OPTIONAL)

)

);

Мы все сделали верно, но размер картинок остался прежним?

Удалите директорию .tmb

Именно в ней elfinder хранит превьюшки картинок и если их не будет — он сгенерирует новые, которые будут иметь размер, указанный выше в опции tmbSize

Добавить комментарий Отменить ответ

Рубрики

Свежие записи

Свежие комментарии