My Internet Of Tech @oatsssss - Tumblr Blog

Displaying Inline Images with a Lightbox in Tumblr Text Posts

A feature that I think is currently missing from tumblr is a native lightbox overlay for viewing images from a text post. There is a lightbox for displaying images from a photo or photoset post, but none for a text post.

Solution: Use Fancybox

Here I’ll describe the simplest way I got fancybox working.

Theme Changes

First, download the required fancybox javascript and css files from here. Locate

jquery.fancybox.css

and

jquery.fancybox.pack.js

as shown below.

Now upload them to tumblr as theme assets. You can get to this option by clicking the additional settings when editing your theme’s html.

Once they’re on tumblr, add the following lines to the theme’s html somewhere between the document’s <head></head> tags (code is incomplete):

<link rel="stylesheet" href="INSERT CSS" type="text/css" media="screen" /> <script type="text/javascript" src="INSERT JS"></script>

To complete this code, you have to replace where it says INSERT CSS/JS with the location of the uploaded asset file. You can easily do this by highlighting the placeholder INSERT then hitting the “Insert” button for the asset.

Do this for both files.

Below where you added that code, add this next code responsible for adding fancybox on document load

Save the html changes.

Post Changes

For each image in the text post that you want fancybox enabled, make the following changes to the image’s html:

This is the automatic html produced by tumblr when an image is added to the text post.

Replace the “<figure></figure>” tags with “<a></a>” tags

Replace class="tmblr-full" with class=“fancybox”

Add a “rel” attribute to <a> to indicate how the lightbox will group images on the page

(note that grouping is page wide, so if another image in a completely different post has the same rel attribute, the images will still group together in the lightbox).

Add a “href” attribute that links to the high quality 1280 version of the image.

To get the high quality version of the image, replace _540.png with _1280.png in the src path

The final code looks like this:

It seems like a lot to do, and it kinda is, but it only takes a couple minutes before posting to make these changes so it's definitely worth it. Options for transitions, captions, and a bunch of other stylistic features can be found on the fancybox website.

#Tumblr Tips

Save The World + Reload + Heart Is King + Don't You Worry Child (One Last Tour Finale)

This one is from before my first year in uni. There were a few places I had to get pretty creative. Since there’s no studio quality acapella version of Don’t You Worry Child publicly available, I had to take the acoustic version of it, and run it through Adobe Audition (also achievable with Audacity) to extract the center panned vocals. The acapella quality wasn’t amazing, but it was much better than what could be obtained from the original. In the first transition from Save The World into Reload, I also had to recreate the lead synth melody from Reload to get a less jarring movement into Reload. The intro was taken from a version of Save The World that I can’t even remember now.

In the span of a month, the play count soared from 20 to 5000+. To this day, I still don't know why.

#shm #swedish #house #mafia #production

Blender Snapping

Enable snapping to get those edges perfectly aligned.

Shift -> Tab

When the verts are smushed together, remove doubles to merge them. A box at the bottom of the left sidebar will show an option for the merging threshold.

#blender3d tips #merge

Unity-like Prefabs in Blender

Throughout this project, I’ll be reusing common models like doors, tables, chairs, etc. What I need then, is to be able to make a change to a model, then have all other instances of that model reflect that change. In Unity, this is achieved with prefabs, but I didn’t know that a Blender solution existed until today. In Blender, this can be achieved with linked objects.

My strategy is to have a master (library) .blend with all the models that I’m going to reuse. Then in the scenes that require the model I just link to the library and grab the object from it.

This means you can never delete the library .blend, otherwise the links get broken. It’d also be a good idea to keep “Relative Path” checked when linking as well.

File -> Link

You may find that once you have the linked object in the scene, you can’t move or manipulate it in any way. In order to be able to move, rotate, or scale the object, a proxy is required.

Object -> Make Proxy...

Now when you want to make a change to the linked object, just make the change in the library .blend and reload the linked scene.

#blender3d tips

Single-sided Rendering in Blender Viewport (Backface Culling)

So I’m modelling the interior of the lighthouse but as soon as I make a room with 4 walls, I can’t see inside it because the planes render both faces. Here’s how to get Blender to only render the face in the direction of the normal.

In the 3D viewport, go into edit mode by hitting TAB

Once in edit mode, hit the N key to bring up the right sidebar

Scroll down to the “Shading” tab, expand it, and enable “Backface Culling”

If some faces are rendering on the wrong side, you need to flip the normal of that face. You can do this by selecting the face, then going to

Mesh -> Normals -> Flip Normals

Take note of the hotkeys for flipping normals inside and out.

#lighthouse #flip normals #backface #culling #render #single #side #blender3d tips

Visit Original Link

This project has been on the back-burner for quite a while now. It probably won’t get worked on until the lighthouse is done. This is what it is so far.

Here’s the original:

#HowYouLoveMe #Ableton #production

Project 0 - Lighthouse

This is the one that I’m having the most fun with at the moment. Previously, I had seen so many videos of people playing intense games with the Oculus Rift (like this one) that naturally I envied their enjoyment. A while ago when I discovered Google Cardboard, I thought that this was my chance to partake in the VR explosion so I got a cardboard viewer set, downloaded cardboard apps onto my phone, and took off into the virtual world. After playing through as many demos as I could find, I still felt that I wasn’t satisfied. I wanted something more specific... something more to my taste (this was the closest thing at the time). So I did my research and began development on this project - because making something myself would be the most satisfying and exactly to my taste.

The project started out as Obed suggesting, “Othniel, can’t you do something like this?” He abruptly continued, “and then I can write the story. It’ll be about a woman who throws her child from a lighthouse! Oooh it’ll be so good.” His inspiration was no doubt from the multitude of asian horror films seen in his lifetime. Nevertheless, I thought it’d be something fun to tackle, so I setup the lighthouse in Blender and transferred it over to Unity and got to work. Here’s a screeny of the scene in action. (in development obvi)

Now the coding! This part was especially fun because I really had to think about how the classes would tie into each other. I even used UML Diagrams! Is my McGill education finally paying off? Here’s a picture of some code and a diagram to make it look like I know what I’m doing.

If you somehow need a singleton in Unity, the code above is exactly that. The diagram is for the navigation system I’m building similar to Google’s street view. If you’re wondering what I used to make the UML diagram, it’s Violet UML Editor.

#blender3d #unity3d #cardboard #oculus rift #vrhorror

Trending Blogs

Recently Viewed Blogs

My Internet Of Tech