Blogger Open Image with Lightbox

How to open image with Lightbox on Blogger?
How to open image with Lightbox on Blogspot?
Show image with Lightbox on Blogger.
Show image with Lightbox on Blogspot.

Blogger has recently added a new feature for the photos and images on the blog posts. With the new Lightbox feature, the images can be clicked and be displayed with a darkened background.



Also, all the images and photos within the blog post will be listed below, allowing readers to view them one by one - like a slideshow.

Currently, Blogger blogs in default have "Open images with Lightbox" setting enabled. To configure it, go to Dashboard > Settings > Formatting.

Then you'll see the setting mode for Lightbox. Either yes or no.



According to the description: If yes is selected, when a reader clicks on an image in a post, it will be displayed in a slideshow-like overlay instead of leaving your page and navigation to the image.

It could seem rather annoying if readers unintentionally click on it. But if your blog is a photography blog, it's definitely suitable.

Tweet

Where are Uploaded Photos on Blogspot Saved?

How to check uploaded photos on Blogger?
Where is my photos saved in Blogspot?
How to delete uploaded photos from Blogspot's server?

When you upload photos while writing a blog post, the image code automatically appears and sometimes you wonder where it is saved.

In case you don't know, they are actually uploaded and saved into Picasa Web Albums linked to your Google Account, which is the also the account you use to log-in Blogspot.


Once you're in Picasa, you might need to log-in with your Google account. After that, you'll see your available albums.


You'll be able to see albums for all the blogs associated with your Google account. There is a special album "Blogger Pictures" just for your uploaded profile pictures as well.

Click on any of the albums to view the photos you've uploaded.


Every album has a limit of 1000 photos and a new album will be automatically created when a current album is full.

With that, you'll be able to upkeep the album and delete any unnecessary not-used photos uploaded previously.

Duplicates are advised to be deleted as well because it saves space. But be careful not to delete images that are currently in-use in your blog, or else the image link will be broken and will not be displayed on your blog.

Tweet

How To Change Dimension of Photo Manually on Blogspot

How to modify the photo resolution on Blogger?
How to change size of photo manually on Blogspot?
How to edit the picture size on photos uploaded on Blogspot?

If you want to manually change the dimension, or distort the size, of a particular photo uploaded on Blogger, here's how.

This is the sample picture.


After uploading, check the code and look for "width:" and "height:" from the photo code.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_h8eC61avCMk/Sj47sGxezHI/AAAAAAAAA-8/yxPvykDZdDQ/s1600-h/asian.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 265px;" src="http://3.bp.blogspot.com/_h8eC61avCMk/Sj47sGxezHI/AAAAAAAAA-8/yxPvykDZdDQ/s400/asian.jpg" alt="" id="BLOGGER_PHOTO_ID_5466089975697168450" border="0" /></a>

Then change the pixels to your desired dimension.

Here's an example of "width: 200px; height: 500px;".


Enjoy changing the dimension!

Tweet

How To Remove Link on Photos Uploaded to Blogger

How to disable linking on photos uploaded on Blogspot?
How to unlink the pictures on Blogspot?

Everytime when you upload a picture onto your blog post, the picture will be automatically linked to its original sized picture.

If you want to disable/remove the auto-linking, here's how.


Here's one picture freshly uploaded onto this blog post. As you can see, whenever you mouse-over the picture, the cursor will change to a pointer style and it's clickable.

To remove the link, you have to dig into the code of the photo.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_h8eC61avCMk/SlYZCOEdQ-I/AAAAAAAABCU/v0M-TPWHbVk/s1600-h/honey.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 300px; height: 400px;" src="http://2.bp.blogspot.com/_h8eC61avCMk/SlYZCOEdQ-I/AAAAAAAABCU/v0M-TPWHbVk/s400/honey.jpg" alt="" id="BLOGGER_PHOTO_ID_5466089975697168450" border="0" /></a>

As you can see from the code above, you should remove the code highlighted in orange to remove the link.

Therefore, this would be the remaining code.

<img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 300px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnVrqdk13Vpvi-fgPXo_3EPQ3D68V5TDVl73mLReAQWgwQ_M4MChjrVdVKL9PQcRu1_fR7CIHQRJ50l20HraHVl3SiTDSt8-29uMNIKEegFRJdvzKuTkpk87Un8SeSqMCI5mHRtr24KkqW/s400/honey.jpg" alt="" id="BLOGGER_PHOTO_ID_5466089975697168450" border="0" />

However, if you want to remove the pointer cursor as well, you should remove the "cursor" part from the remaining code.

And this would be the final picture.


Now the picture is not linked, not clickable and the cursor doesn't change to a pointer whenever you mouse-over it.

That's it!

Tweet

How To Change Default Photo Size Uploaded on Blogspot

How to change the size on photos uploaded on Blogger?
How to set the original photo size on Blogspot?
How to modify the size of photos uploaded on Blogspot via Picasa?
How to change the photos uploaded on Blogspot to the original size?
How to edit the size of the photos uploaded on Blogspot?

If you have uploaded a photo bigger than the default 400px x 400px maximum width and height on Blogspot and would like to display its original size, here's how.


Here's a demonstration: You uploaded this (tiger) picture onto your Blogspot (which is originally larger at 1071px x 1600px), and you want it to be displayed on a bigger scale. What you need to do is to look at the HTML section of the particular blog post.

Look for the code lines for the picture. It will look somehow like this.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8c5xKOBdDcQ8tQKPvxfs7PKqb8axwCvH0YEtU77TYU1OK-Xi42cKWobBnVtSkwsYJa5mOdjMZJiZKMJ-h7IOSQOgyG4oa2d41IT1XLwkOZsOzcn2jpH8pnSxdVPDmi3uD6XkLJnuEBTYD/s1600/IMG_5331.JPG" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitqkvboK545Ri5iLu1OVXvBcvoE6mr_2eQ5B7mqVHFQ7ptFdyMiuq1F8XAi18_FJISk_4GCZT05Nm8UX3faLqft2y7qrizCCyGq_DsC9RCfLQy0zg_ELYAFr2sCHC_NH2JNVlAaRq3jADj/s400/DSC_0232.JPG" alt="" id="BLOGGER_PHOTO_ID_5466089975697168450" border="0" /></a>

Firstly, remove "width: 400px; height: 300px;" from the code. If you don't, the image stays at whatever size indicated by these 2 values.

Then, all you need to do is to change the URL's (highlighted in Orange) "s400" or "s320" (depending on your default upload size) part.

Change it to:

• s800 - for medium size.
• s1600 - for full size.

Also, you can change it to s[any value], where [any value] represents the preferred width of the image. (Example - s500, s900, etc, but no more than s1600)

For this example, it's s800. When it's changed to s800, the medium size of the photo shown.


Now the displayed photo size is 536px x 800px.

Likewise, change it to "s1600" if you want to display to full size of the photo. Any value more than "1600" will not work.

Take note: s800 and s1600 has no connection with the height and width, and may show different results compared to the demonstration shown here. It varies depending on the original size of your uploaded photo.

Any questions are welcomed.

Tweet