How to Enlarge your Images
We all love to blog surf and see what our friends and family are up to.
We all love to look at pictures on those blogs.
But sometimes the pictures are so small you have to click on them to see the details.
I have solved this problem so others won't have to do this when visiting your blog!
It took me some blog surfing and HTML editing to figure this out, but it is SO easy!
Your photos will go from this:
To this:
It is a perfect look for a personal blog, photography blog, or personal website!
Here are the steps:
Step 1) Calculate how much image size (large) you want to display. You want it just a bit less than your main body width*. So if your main body width is 570px, the maximum width to post a large image is 570px. But, to make the image looks nice, you don't want it to go outside your mbw, so choose a width that is a bit less than the mbw... like 560px.
(*You can find your main body width by going to Layout --> Edit HTML and scrolling to where you find this:
#main-wrapper {
width: 570px;
margin-left: 10px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
The part in red is the main body width. )
Step 2) Now that you are in your HTML, scroll to where you see this:
.post img { } padding:4px; border:0px solid $bordercolor; } .post blockquote { margin:1em 20px; }
Add this after .post img{:
width: expression (this.width > 560 ? 560: true) ;
It will look like this:
.post img {
max-width: 560px; width: expression (this.width > 560 ? 560: true) ;
} padding:4px; border:0px solid $bordercolor; } .post blockquote { margin:1em 20px; }
** Make sure the max-width is just a little less than your main body width, and change all three numbers to match whatever your HTML code says.
Example: If your main body width is 400 make the max-width 375px and the other two places in the code for numbers to 375 as well (max-width: 375px; width: expression (this.width >375 ? 375: true); )***
Now save your template.
Step 3) This step is important. Each time you upload any images in a new post click the EDIT HTML tab at the top of your new post box. Once there you will need to find this:
width: 400px; height: 267px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqQsIHmaGsBpHomARfQYMBZJvNMoPafZXgW9bkSyP4HU94Hc-rj5g3wpyaZLuqrG13PnmDYbZs-PtIsBWTvBS6TmUJkUedEe0unDQblsoJvvEjndGC-j5Ptyo7OB-cEQDKb-x1sXqoW8k/s400/IMG_1760.JPG
Delete the part in purple. And change the part in red from s400 to s800.
*Note: If you upload multiple images you will have to find the individual width and height for each and delete it, and find the individual s400 for each and change it. Each picture is separated by a code.*
**Note: Also if you upload a small photo change the s200 to s800 and if you uploaded a medium photo change the s320 to s800.**
Then click Publish Post and your done!!
There is a lot of technical wording and such so if you have any questions please feel free to email me at l_heizzy{at}yahoo{dot}com, and I will help you out!
We all love to blog surf and see what our friends and family are up to.
We all love to look at pictures on those blogs.
But sometimes the pictures are so small you have to click on them to see the details.
I have solved this problem so others won't have to do this when visiting your blog!
It took me some blog surfing and HTML editing to figure this out, but it is SO easy!
Your photos will go from this:
To this:It is a perfect look for a personal blog, photography blog, or personal website!Here are the steps:
Step 1) Calculate how much image size (large) you want to display. You want it just a bit less than your main body width*. So if your main body width is 570px, the maximum width to post a large image is 570px. But, to make the image looks nice, you don't want it to go outside your mbw, so choose a width that is a bit less than the mbw... like 560px.
(*You can find your main body width by going to Layout --> Edit HTML and scrolling to where you find this:
#main-wrapper {
width: 570px;
margin-left: 10px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
The part in red is the main body width. )
Step 2) Now that you are in your HTML, scroll to where you see this:
.post img { } padding:4px; border:0px solid $bordercolor; } .post blockquote { margin:1em 20px; }
Add this after .post img{:
width: expression (this.width > 560 ? 560: true) ;
It will look like this:
.post img {
max-width: 560px; width: expression (this.width > 560 ? 560: true) ;
} padding:4px; border:0px solid $bordercolor; } .post blockquote { margin:1em 20px; }
** Make sure the max-width is just a little less than your main body width, and change all three numbers to match whatever your HTML code says.
Example: If your main body width is 400 make the max-width 375px and the other two places in the code for numbers to 375 as well (max-width: 375px; width: expression (this.width >375 ? 375: true); )***
Now save your template.
Step 3) This step is important. Each time you upload any images in a new post click the EDIT HTML tab at the top of your new post box. Once there you will need to find this:
width: 400px; height: 267px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqQsIHmaGsBpHomARfQYMBZJvNMoPafZXgW9bkSyP4HU94Hc-rj5g3wpyaZLuqrG13PnmDYbZs-PtIsBWTvBS6TmUJkUedEe0unDQblsoJvvEjndGC-j5Ptyo7OB-cEQDKb-x1sXqoW8k/s400/IMG_1760.JPG
Delete the part in purple. And change the part in red from s400 to s800.
*Note: If you upload multiple images you will have to find the individual width and height for each and delete it, and find the individual s400 for each and change it. Each picture is separated by a code.
**Note: Also if you upload a small photo change the s200 to s800 and if you uploaded a medium photo change the s320 to s800.**
Then click Publish Post and your done!!
There is a lot of technical wording and such so if you have any questions please feel free to email me at l_heizzy{at}yahoo{dot}com, and I will help you out!
No comments:
Post a Comment