Skip to main content

Are you still looking for something?

Generic filters
Exact matches only
Filter by Categories
Customization
Domains
Lightroom Plugin
Tools and Tips

Try these: contact formbuttonbuy photos

How to display a larger profile image in your SmugMug contact form

When you add a contact form to your site the profile image is displayed as a square thumbnail – leaving loads of empty space:

How to display a larger profile image in your SmugMug contact form

With little CSS coding you can make the profile image fill the space on the left side of your contact form so it appears like this:

How to display a larger profile image in your SmugMug contact form

As you can see – on the second screenshot the image nicely fills the empty space on the left side of the contact form.

HOW TO DO THIS?

You would need to create an image that you would like to use in the contact form.  The image needs to have these dimensions 350px x 150px if your image is larger or smaller – this will not work.

Now upload this image to one of your galleries – an unlisted gallery is preferred { so your visitors will not see this gallery when visiting your site}.  You also have to make sure that your gallery allows ORIGINAL image size to be viewed – you can change this in the GALLERY SETTINGS SECTION:

How to display a larger profile image in your SmugMug contact form

IMAGE PLACEMENT

Your image has to be located in an UNLISTED gallery on your account – otherwise this will not work. Do not add the image to the system WATERMARKS/PRINTMARKS gallery – those galleries do not allow you to set the maximum viewing size to ORIGINAL { at the moment }.

Just open your ORGANIZER → click CREATE → GALLERY and set the  visibility to UNLISTED

How to display a larger profile image in your SmugMug contact form

Now open the image that you have uploaded to your UNLISTED gallery and click the SHARE icon that appears at the bottom of your photo.  This will open a small popup window where you will need to copy the link to your original image, which we will use in the CSS code:

How to display a larger profile image in your SmugMug contact form

Now you will need to add the CSS code, which will replace the default contact form image – with your custom one.

Add a CSS content block in the ENTIRE SITE section of your website and then add this code to it:

CSS
/*Replacing contact form image with your own photo 150px x 350px*/
.sm-contact-pro-biophoto {
    background-image: url("LINK TO YOUR IMAGE");
    background-repeat: no-repeat;
    height: 347px;
}

.sm-contact-pro-biophoto>div {
    display: none;
}
CSS

The last thing that you need to do is to replace the LINK TO YOUR IMAGE with the link to your own image, that you copied in the first part of this tutorial.  Make sure that you paste the code between “”.

The modified code should look like this:

CSS
/*Replacing contact form image with your own photo 150px x 350px*/
.sm-contact-pro-biophoto {
    background-image: url("https://photos.smugmug.com/photos/i-ZRDrCdD/0/O/i-ZRDrCdD.jpg");
    background-repeat: no-repeat;
    height: 347px;
}

.sm-contact-pro-biophoto>div {
    display: none;
}
CSS

Related articles

Comments (2)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Support me

I am writing this portal in my free time and I pay for it myself. So, if you want to support my work – use this button to buy me a coffee 🙂 Which will help towards the hosting costs of the portal.