3.2 & 3.3 Extensions Database 3.2 / 3.3 ⇒ Image Upload

[martin]

There is no scroll left or right.

[wads24]

Funny... My image is not showing responsive on mobile...

[martin]

I'm on version 1.1.5 and i also added the responsive to it i will do some testing and post the changes for you.

This responsive enough ? https://www.youtube.com/watch?v=IBsaA0j ... aBiznessUK

[wads24]

I'm on version 1.1.5 and i also added the responsive to it i will do some testing and post the changes for you.

This responsive enough ? https://www.youtube.com/watch?v=IBsaA0j ... aBiznessUK

Thanks Martin.

Yes... I'm using chrome on android phone and the image is not responsive. Maybe a conflict with another extension?

[martin]

Imageupload.css

Code: Select all

.codes {
    display: block;
    width: 90%;
    overflow: scroll;
    white-space: nowrap;
    height: 2.5em;
    font-size: 100%;
    color: #ECF1F3;
    border: 1px solid #000;
}

#codes input{
	width: 90%;
}

#upload {
	width: 100%;
	height: 100%;
}

#showdiv {
    text-align: center;
}

.upload_image {
	width: 40px;
	height: 40px;
	vertical-align: middle;
	float: right;
}

.upload_inner {
	background-color: #F9F9F9 !important;
}

.upload_enabled {
	margin: 2px;
	border-radius: 10px;
	padding: 5px 7px;
	text-align: center;
    border: 1px solid #d62121;
}

#codehtml {
    font-weight: bold;
}

.buttoncopy {
	font-size: 1em;
	padding: 1.5px 6px;
	margin: 0;
	outline: 0;
	box-shadow: none;
	padding-bottom: 4.5px;
	position: relative;
	background-color: #aaa;
	border-radius: 0 3px 3px 0;
	cursor: pointer;
}

@media (max-width: 850px) {
	#codes input{
		width: 80%;
	}
	.buttoncopy {
		padding-top: 2px;
		padding-bottom: 4px;
	}
}

.copied::after {
	position: absolute;
	top: 12%;
	right: 110%;
	display: block;
	content: "copied";
	font-size: 0.75em;
	padding: 0 2px 0 3px;
	color: #fff;
	background-color: #9900ff;
	border-radius: 3px;
	opacity: 0;
	will-change: opacity, transform;
	animation: showcopied 1.5s ease;
}

@keyframes showcopied {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  70% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
  }
}

.imageupload_index {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.imageupload_index-preview {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 40px;
	margin-bottom: 2px;
	vertical-align: middle;
}

.imageupload_index-preview img {
	position: absolute;
	left: 0px;
	top: 0px;
	max-height: 40px;
	max-width: 40px;
}

.imageupload_index:hover {
	opacity: 0.7;
}

.imageupload-category {
	display: none;
	height: 0;
}

.imageupload-name {
	font-size: 1.0em;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 15ch;
}

.imagealert {
	width: 850px !important;
}

.swal2-popup .swal2-input {
    font-size: 13px !important;
	width: 80% !important;
}

#upload{
    font-family:'PT Sans Narrow', sans-serif;
    background-color:#373a3d;
    background-image:-webkit-linear-gradient(top, #373a3d, #313437);
    background-image:-moz-linear-gradient(top, #373a3d, #313437);
    background-image:linear-gradient(top, #373a3d, #313437);
    width:80%;
    padding:30px;
    border-radius:3px;
    margin:20px auto 100px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}



#drop{
    background-color: #2E3134;
    padding: 40px 50px;
    margin-bottom: 30px;
    border: 20px solid rgba(0, 0, 0, 0);
    border-radius: 3px;
    text-align: center;
    text-transform: uppercase;

    font-size:16px;
    font-weight:bold;
    color:#7f858a;
}

#drop a{
    background-color:#007a96;
    padding:12px 26px;
    color:#fff;
    font-size:14px;
    border-radius:2px;
    cursor:pointer;
    display:inline-block;
    margin-top:12px;
    line-height:1;
}

#drop a:hover{
    background-color:#0986a3;
    text-decoration:none;
}
#drop a:visited {
    outline:none;
    color:#389dc1;
}

#drop input{
    display:none;
}

#upload ul{
    list-style:none;
    margin:0 -30px;
    border-top:1px solid #2b2e31;
    border-bottom:1px solid #3d4043;
}

#upload ul li{
    background-color:#333639;
    background-image:-webkit-linear-gradient(top, #333639, #303335);
    background-image:-moz-linear-gradient(top, #333639, #303335);
    background-image:linear-gradient(top, #333639, #303335);
    border-top:1px solid #3d4043;
    border-bottom:1px solid #2b2e31;
    padding:15px;
    height: 52px;
    position: relative;
}

#upload ul li input{
    display: none;
}

#upload ul li p{
    width: 344px;
    overflow: hidden;
    white-space: nowrap;
    color: #EEE;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    top: 20px;
    left: 100px;
}

#upload ul li i{
    font-weight: normal;
    font-style:normal;
    color:#7f7f7f;
    display:block;
}

#upload ul li canvas{
    top: 15px;
    left: 32px;
    position: absolute;
}

#upload ul li span{
    width: 15px;
    height: 12px;
    background: url('../images/icons.png') no-repeat;
    position: absolute;
    top: 34px;
    right: 33px;
    cursor:pointer;
}

#upload ul li.working span{
    height: 16px;
    background-position: 0 -12px;
}

#upload ul li.error p{
    color:red;
}

Results in

a5948ce31f2133bccff564eaa84a74ed.jpg

[wads24]

That worked...

How do you watermark the image?

[martin]

Uploaded images cant be water marked yet but if you upload via an attachment then there auto watermarked if you install the water mark ext.

[wads24]

Uploaded images cant be water marked yet but if you upload via an attachment then there auto watermarked if you install the water mark ext.

I have that extension already.. I noticed the screenshot you have was watermarked and confused me.

My bad

[dmzx]

First post updated.

[HarveyWNvm LLC.]

Yes, that's exactly what I needed! Thank you for updating it to a new version!

[gpinpin]

Hello
I thought I wrote but my message has disappeared.
I am currently testing locally and I have two questions.
1- I am embarrassed to see the storage of photos in the extensions sub-directory.
Is there a possibility to change the location of this storage, for example the current forum / files directory of the hosting or in a forum subdirectory / files / xxxxx

2- can we automate the recovery of the image link in the message of the post?
I see that adding the "centering" bbcode is possible in order to center the photo.

And finally a wish which is to resize the photos

Bonjour
Je pensais avoir écrit mais mon message a disparu.
Je teste actuellement en local et j'ai deux interrogations.
1- Je suis gêné de voir le stockage des photos en sous répertoire des extensions.
Existe-t-il un possibilité ce changer l'emplacement de ce stockage comme par exemple le répertoire forum/files actuel de l'hébergement ou dans un sous répertoire de forum/files/xxxxx

2- peut-on automatiser la récupération du lien image dans le message du post?
Je vois que de rajouter le bbcode "centrage" est possible afin de centrer la photo.

Et enfin un vœux qui est de redimensionner les photos

Gpinpin

[Beer]

How to replace a random folder:

Code: Select all

$prefix = substr(md5(mt_rand()), 0, 7);

with a forum topic number or year-month?

Now there are a huge number of folders in which it is very difficult to search for a file using FTP!

[martin]

Use the acp then.

[dmzx]

How to replace a random folder:

Code: Select all

$prefix = substr(md5(mt_rand()), 0, 7);

with a forum topic number or year-month?

Now there are a huge number of folders in which it is very difficult to search for a file using FTP!

It is not related to forum or topic, so not working like this.

[Beer]

I did this:

Code: Select all

$prefix = substr(md5(mt_rand()), 0, 7);

Replace:

Code: Select all

$prefix = 2020;