"profile/contact" Image Does Not Scale

pworm14 · August 7, 2013

When you change the default "profile" image, under "profile" settings, to one of your own choosing, the new image does not scale to the same size as the old "default" image. I.e. replacing the default "contact" page image with one of my own results in the image scaling to a thumbnail size regardless of the original size of the replacement image.

Is there a fix for this?

Thanks in advance.

mbonocore · August 8, 2013

I am investigating ways to remove the crop from the contact page, but not sure if it is possible

pworm14 · August 8, 2013

mbonocore wrote: »

I am investigating ways to remove the crop from the contact page, but not sure if it is possible

Ok mbonocore. Thanks for the reply/effort.

Just an FYI, I did upload an image the EXACT size of the "nobio" image that you guys use for the default. It still scaled down to a thumbnail size, just a longer, skinnier, thumbnail. :bluduh

garrettm30 · August 12, 2013

A CSS Solution
PWorm, I just ran into this problem yesterday myself. I uploaded a special cropped image to the exact dimensions of the nobio.jpg that is the filler image. I was annoyed when it turned up square. I tried doing an alternate thumbnail crop, but that made matters worse. I fought around with it for a bit and found a solution. Since I noticed you are having the problem too, I signed up for a Dgrin account to share what I found. Note that I haven't tested on mobile devices.

The first thing to do is to upload the photo you want (you can put it in any gallery you want). If you want it to fit perfectly, then I recommend you size it to 150 x 347. You may notice that that is not the same size as the nobio.jpg, but that is the size that works. The 150 in the horizontal dimension is the width of the container we are putting the photo in. Any more, and it reflows the whole contact box. You can be more flexible with the vertical dimension, but I recommend 347, because that will line up just right with the rest of the content.

Next, here is some new CSS that you can put into the advanced tab of the site-wide theme settings:

.sm-contact-pro-biophoto {
    background-image: url("[COLOR=Yellow]http://Your-Image-Link[/COLOR]");
    background-repeat: no-repeat;
    height: [COLOR=Yellow]347[/COLOR]px;
}

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

You will need to put the direct link to your image inside the quotes where the yellow text is above. Also, if you should choose a different vertical size than 347, you will also need to specify the amount in the code (the second bit of yellow text).

The first bit of the code sets the image of your choice as a background image to the top-level container for the picture, and then it blocks the several layers of containers inside it, including the picture that SmugMug tries to put there.

Another benefit of this method is that you can set a completely different profile picture if you choose, because your profile picture is also used for the avatar next to your own replies to comments.

I'll be eager to know if this works out for you.

pworm14 · August 13, 2013

Thank you GARRETTM30!

I'll give it a try and post back here as soon as I get home this evening.

pworm14 · August 14, 2013

Hey garrettm30, YOU ARE THE MAN!!!

YEA!!! I finally got it working. A couple of things I had to figure out through some trial and error.

1. You can't just go to the gallery with the photo, highlight the photo, and copy the URL from the browsers address bar. You must go to the gallery, highlight the photo, click on "share/get a link/photo links" and click the copy button. I selected the 3x Large link. (I should have known this because I have a gallery that I use for photos on another forum and I do this all the time. DUH!!!)
2. You must have your image set in your "profile" (at least I had to). If I didn't have the "profile photo" set to my custom image I would get a brief flash of my custom image and then it would go right back to Mr. Mustache.

Thanks much Mr Garrettm30.

PS. It works just fine on my Nexus7 and Samsung phone too.

garrettm30 · August 14, 2013

I'm sorry I wasn't specific enough so that you had to do some hunting.

As a clarification on your second point, you do have to have a photo selected as your profile picture like you discovered. This is because the container we need to access is not there if no picture is selected. The good part is it doesn't matter what the photo is because we are overriding it anyway, so you can pick whatever picture you want as your profile picture, and it won't affect the contact picture. I make use of this to have a different picture as my avatar for when I respond to comments.

I'm glad it is working for you. And thanks for the confirmation about the proper display on Android. I haven't been able to test my site on mobile yet because I haven't unveiled. After many hours of tweaks, I still have more I want to do.

pworm14 · August 14, 2013

garrettm30 wrote: »

I'm sorry I wasn't specific enough so that you had to do some hunting.

No worries Garrett.

Trying to figure some of this stuff out is half the fun. I just wish I had more time to learn some of the syntax functions and do my own code instead of having to rely on the fine folks, like yourself, that help everyone out here on the forum.
Thanks again for the assist.

Cheers

garrettm30 · August 14, 2013

pworm14 wrote: »

No worries Garrett.

Trying to figure some of this stuff out is half the fun. I just wish I had more time to learn some of the syntax functions and do my own code instead of having to rely on the fine folks, like yourself, that help everyone out here on the forum.
Thanks again for the assist.

Cheers

Ah, the fun of it indeed. I think I have less than 10 visitors to my site on a regular basis. I really do it for the fun of it, and although I only just signed up for Dgrin a few days ago, sharing some of the results of what I found has also been fun in the last couple of days. In fact, I have been wondering if anyone has posted a series of tutorials on HTML and CSS specifically for SmugMug, and if not, whether there would be any interest in me creating one. I think I would have fun doing it, but I don't know if people would find it useful. And it may have already been done. I haven't looked into it.

anonymouscuban · August 14, 2013

Thank you garrettm30. I no longer have to avoid looking at my Contact page.

.

pworm14 · August 14, 2013

garrettm30 wrote: »

In fact, I have been wondering if anyone has posted a series of tutorials on HTML and CSS specifically for SmugMug, and if not, whether there would be any interest in me creating one. I think I would have fun doing it, but I don't know if people would find it useful. And it may have already been done. I haven't looked into it.

I have to say the forums here are GREAT. I really do appreciate the sharing of info and the skills some of these folks, you included, have. It really makes things a lot easier for code dummies like myself.
Having said that, I'd say go ahead and look into it. I think tutorials would be a bonus. In the meantime though, please keep contributing to the forum.

TLPhotoWorks · March 9, 2014

garrettm30 wrote: »
PWorm, I just ran into this problem yesterday myself. I uploaded a special cropped image to the exact dimensions of the nobio.jpg that is the filler image. I was annoyed when it turned up square. I tried doing an alternate thumbnail crop, but that made matters worse. I fought around with it for a bit and found a solution. Since I noticed you are having the problem too, I signed up for a Dgrin account to share what I found. Note that I haven't tested on mobile devices.

The first thing to do is to upload the photo you want (you can put it in any gallery you want). If you want it to fit perfectly, then I recommend you size it to 150 x 347. You may notice that that is not the same size as the nobio.jpg, but that is the size that works. The 150 in the horizontal dimension is the width of the container we are putting the photo in. Any more, and it reflows the whole contact box. You can be more flexible with the vertical dimension, but I recommend 347, because that will line up just right with the rest of the content.

Next, here is some new CSS that you can put into the advanced tab of the site-wide theme settings:
.sm-contact-pro-biophoto {
    background-image: url("[COLOR=Yellow]http://Your-Image-Link[/COLOR]");
    background-repeat: no-repeat;
    height: [COLOR=Yellow]347[/COLOR]px;
}

.sm-contact-pro-biophoto>div {
    display: none;
}
You will need to put the direct link to your image inside the quotes where the yellow text is above. Also, if you should choose a different vertical size than 347, you will also need to specify the amount in the code (the second bit of yellow text).

The first bit of the code sets the image of your choice as a background image to the top-level container for the picture, and then it blocks the several layers of containers inside it, including the picture that SmugMug tries to put there.

Another benefit of this method is that you can set a completely different profile picture if you choose, because your profile picture is also used for the avatar next to your own replies to comments.

I'll be eager to know if this works out for you.

I've tried this so many ways. I followed the instructions, but I am really new to CSS and haven't done any coding with the new Smugmug.

I see my picture in the profile area, but it does not appear in the contact form. The good thing is there is no thumbnail or the man with the mustache. So, there must be a link error.

I created a separate gallery just for the 150X347 picture I want to use. I linked it to there, but no success. Just a blank area now. I don't know if I mind that, but I'd rather have the picture because I have a message I want there as well.

Thanks!

garrettm30 · March 10, 2014

I've had a look at your site to find the problem, but I can't find the CSS code I provided anywhere on your site. Is it still up? If so, where did you put it?

Rich Beaubien · April 1, 2014

Just a quick note... I found that I needed to load the photo in the Profile Photo spot in My Profile to make this work.

devartemis · July 22, 2014

This is what I did.
I am still new to CSS, so the code probably need some refining.
I placed this code below and it worked on our website, from Safari and Chrome.
I don't know if it works from Internet Explorer or iPad - still on my list of things to do.

/*remove default profile photo*/
.sm-procontact-overlay .sm-contact-pro-biophoto
  img[src="/img/contactus/nobio.jpg"] {display:none;}

/*add my image into Contact Form*/
.sm-procontact-overlay .sm-contact-pro-biophoto {
  background: url(http://cdn.smugmug.com/photos/i-CfZvTds/1/O/i-CfZvTds.jpg);
  background-repeat: no-repeat;
  margin-bottom:24px !important;}

The first part took away the default mustache man.
The second part displayed the photo I wanted at the correct proportion.

For this code to work, I first created a link for new Smugmug's default Contact Form.
Then I started customizing:
1. From Entire Site, I chose Theme.
2. From Theme, I chose the one available under Active Theme.
3. I clicked on the little wrench to customize.
4. I clicked on Advanced, and scrolled down to Custom CSS to Edit.
5. I then added the code above.
6. You will need to find the specific url for the image you would like to use (see below).

For the second part to work,
1. I had to create my image at the specified size 150x347.
2. I did not have to place my image in a separate gallery. The gallery where I placed my image is actually private.
3. I did not have to set a profile photo in My Profile.
4. I added a margin to mirror the default margin-top of 24px.
5. I had to find the specific link where new Smugmug stored my image (see below).

My image (this requires a bit of code research):
1. Once I uploaded my image, it is shown as:

http://www.smugmug.com/gallery/n-ktwXD/i-CfZvTds
http://www.smugmug.com/gallery/n-ktwXD/i-CfZvTds

2. However, that is not the link I can use.
3. I used Chrome Developer (part of Chrome browser) to find out the specific image location.
4. New Smugmug stored my image as:

cdn.smugmug.com/photos/i-CfZvTds/1/O/i-CfZvTds.jpg
cdn.smugmug.com/photos/i-CfZvTds/1/O/i-CfZvTds.jpg

5. I had to make sure the image link has "O" for original size; and not in "M" for medium or "S" for small size.
6. At first, I used this link that was the first picture I saw.

cdn.smugmug.com/photos/i-CfZvTds/1/S/i-CfZvTds-S.jpg
cdn.smugmug.com/photos/i-CfZvTds/1/S/i-CfZvTds-S.jpg

7. I realized it came out smaller than expected. The "S" in the link indicates it's a smaller image than original.

cdn.smugmug.com/photos/i-CfZvTds/1/S/i-CfZvTds-S.jpg(S for small image at 130x300)
cdn.smugmug.com/photos/i-CfZvTds/1/O/i-CfZvTds.jpg (O for original image at 150x347)

6. So, a little research is needed.

I am going to try a few things and see if I can make the codes better, but I was happy this worked.

Allen · July 22, 2014

Try this

http://cdn.smugmug.com/photos/i-3rztTfN/0/S/i-3rztTfN-S.jpg

devartemis · July 22, 2014

Allen wrote: »

Try this

http://cdn.smugmug.com/photos/i-3rztTfN/0/S/i-3rztTfN-S.jpg

I tried it, but it is a smaller image than original 150x347 desired size.
May I ask what "cdn" is?

Allen · July 22, 2014

Using CDN rather then your nickname or domain makes the photo anonymous, not connected to any site.
Great for posting on forums or in social media and hiding your site.
You could just use your nickname or domain.

Try using the "original" size.
http://cdn.smugmug.com/photos/i-3rztTfN/0/O/i-3rztTfN-O.jpg

Your gallery link is messed in your post. Get out of organizer and post the direct gallery link.
http://www.burlesondesigngroup.com/organize/Business/i-CfZvTds
Was going to check whether you had originals enabled.

devartemis · July 22, 2014

Allen wrote: »

Using CDN rather then your nickname or domain makes the photo anonymous, not connected to any site.
Great for posting on forums or in social media and hiding your site.
You could just use your nickname or domain.

Try using the "original" size.
http://cdn.smugmug.com/photos/i-3rztTfN/0/O/i-3rztTfN-O.jpg

Your gallery link is messed in your post. Get out of organizer and post the direct gallery link.
http://www.burlesondesigngroup.com/organize/Business/i-CfZvTds
Was going to check whether you had originals enabled.

Very cool! Thanks for the tips!
I revised my post - hope that's better.

I did not have originals enabled at first, and just went with the default selections.
I went back to enable it after I figured out the size was wrong.

"profile/contact" Image Does Not Scale

Comments