Gravity Perks // File Upload Pro // Big Images

gpfup-big-images.css

.gpfup-big-images .gpfup__files {
	display: flex;
	flex-wrap: wrap;
	border: 0;
	padding: 0;
	box-shadow: none;
	margin: 0 -0.5rem;
}

.gpfup-big-images .gpfup__file {
	width: calc( 50% - 1rem );
	border: 0 !important;
	padding: 0;
	margin: 0 0.5rem 1rem !important;
	background: rgba( 0, 0, 0, 0.9 );
	border-radius: 4px;
        overflow: hidden;
        min-height: 100px;
}

.gpfup-big-images .gpfup__preview {
	margin-right: 0;
	display: grid;
}

.gpfup-big-images .gpfup__preview img {
	width: 100% !important;
	height: auto !important;
	display: block;
	margin: auto;
        border-radius: 0;
}

.gpfup-big-images .gpfup__file-info {
	position: absolute;
	bottom: 0;
	transition: opacity .3s ease-in-out;
	width: 100%;
	border-radius: 0 0 4px 4px;
	padding: 0.5rem;
	color: #fff;
	background: #000;
	background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
	margin: 0;
}
.gpfup-big-images .gpfup__filesize {
	font-size: 0.8em;
}

.gpfup-big-images .gpfup__file-actions {
	top: 0.5rem;
	right: 0.5rem;
}

.gpfup-big-images .gpfup__delete {
	opacity: 0.7;
	transition: opacity 0.25s ease-out;
}

.gpfup-big-images .gpfup__delete svg {
	fill: white;
	width: 1rem;
	filter: drop-shadow( 0 0 1px black );
	transition: filter 0.25s ease-out;
}

.gpfup-big-images .gpfup__delete:hover {
	opacity: 1;
}

.gpfup-big-images .gpfup__delete:hover svg {
	filter: drop-shadow( 0 0 4px black );
}

.gpfup-big-images .gpfup__droparea {
	border-radius: 4px;
}

.gpfup-big-images .gpfup__edit {
	width: 2.6rem;
	height: 2.6rem;
        line-height: 1;
}

Forgive me for asking but where does the css code go to activate this.
Thanks
Steve Fulton, UE

Hey Steve, this would be best place in your child theme's style.css file. Then you can activate it on any File-Upload-Pro-enabled field via the CSS Class Name field setting by adding the class "gpfup-big-images". Let me know if you have any quesitons. 🙂

👉 This Gist has been migrated to the Gravity Wiz Snippet Library:

https://github.com/gravitywiz/snippet-library/blob/master/gp-file-upload-pro/gpfup-big-images.css

Hi there Thanks for your email and sorry to take so long to get back to you. I have applied the code with no real change. I allow cropping of the image. Here is the link: https://canadianheadstones.ca/wp/submitting-test/ I was assuming it would allow zooming of the image and make the image bigger? Thanks Steve Fulton, UE From: David Smith [mailto:notifications@github.com] Sent: Sunday, January 10, 2021 7:42 AM To: spivurno <spivurno@noreply.github.com> Cc: Steve Fulton - Past President/I.T. Admin <steve.fulton@ogs.on.ca>; Comment <comment@noreply.github.com> Subject: Re: spivurno/gpfup-big-images.css @spivurno commented on this gist.

…

________________________________ Hey Steve, this would be best place in your child theme's style.css file. Then you can activate it on any File-Upload-Pro-enabled field via the CSS Class Name field setting by adding the class "gpfup-big-images". Let me know if you have any quesitons. 🙂 — You are receiving this because you commented. Reply to this email directly, view it on GitHub<https://gist.github.com/f72a31ebeaa3c97105643548227a7ded#gistcomment-3588628>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ASJQP6TVXT2VQM5BZ6GD453SZGN77ANCNFSM4V4APZBA>.

Hey Steve, I see you're trying to use this for a single image. Drop us a line via support and we can help you tweak the styles. Drop my name in your ticket. 😄

Thanks for the message. I am sorry to sound dumb but could you provide me a link to support?
Thanks
Steve

Sure thing! https://gravitywiz.com/support/