iPanorama Window Size Using Short Code

I see questions on the WordPress support size about changing the size of the window a tour is displayed in. Thought I would demo it, just for fun.

To do this I normally just use the “Short Code” section “Embed code with ID”.

I’m not sure, but you may want to leave the settings in “General” checked for “Auto height” and “Auto Width”, but this may over ride them anyway.

Default window size
Default General Settings for Window Size.

You can see this defaults to a window width of 560 pixels by 315 pixels. That makes the window look like this:

Inspecting the page shows that indeed it is a 560×315 size.

Changing the Embed shortcode to now be 760×215 we can see the effect on the display size.

Again, we can confirm the actual display size in comparison to the first window.

So, I think it is about that easy to set the initial display size.

Lightbox in WordPress w/Gutenberg

Spent some time trying to figure out how to add the Lightbox effect to WordPress using Gutenberg as the editor.

I did install the “Simple Lightbox” plugin first. Just left it with all default settings.

First, insert the image to appear in the post or page, using the “Image” block in Gutenberg

Select your image, by whichever method you would like.

Then click on the image and select the “Edit Link” icon.

Seems like all you have to do is select “Media File”.

Once you get it, it is pretty easy. Or maybe I haven’t really “gotten it” yet!

iPanorama – Adding a Compass

Still playing around with the iPanorama plugin for Word Press. When reading about the features on the web site I noticed it said there was a compass to help keep you headed in the right direction!Since I do mostly 360°’s of nature preserves and trails, I thought a compass would be nice. I never could find out how to make it work, and so wrote in the support forum to see what was the secret!

Turns out, it was turned on in the program, one of those many little things that get missed during a major update. No problem, the author soon restored it, and I was off to the races!

It was nice, but I thought it lacking, at least for what I wanted.

Figure 1: The default compass

As you can see, it was quite small, and being black and white was not easily noticeable. While some people may like the fact that it is unobtrusive, it wasn’t for me.

I wrote the plugin author and asked about if, and how it could be changed. He replied promptly that yes it could be easily done in the “Custom CSS” section. Unfortunately as much as I wish I was able to program, I can’t.

He was very accommodating and sent me some sample code. I tried it, and it works so good! And while I can’t write original code, I can often hack up what is there to tweak it to my tastes.

So, if you have an interest, and want to add, or change the compass. Here are my hopefully simple directions.

Figure 2: iPanorama Compass activation and offset.
  • (1) In the scene you want a compass to appear in first make sure it is enabled.
  • (2) In the settings, turn the “Compass” slider on.
    • Note that you must do this for each scene in which you want the compass to appear.
  • (3) There is a field for “North offset”. Nothing to do now, but you may want to come back here later. If your compass does not point north correctly change the degree offset here.
    • Tip: clicking on the compass points it due North. If the image is not showing North at the top rotate the image so North is “Up” then note the current angle and estimate the degree change needed.
  • Save the tour, then if you use the preview button you should see the default small arrow. Where it appears depends on the widget (Theme) you are using. It should look like Figure 1 above.

But you don’t want that plain old compass do you! First you need a good compass image. Then to change the default to your custom image, copy this code into the “Custom CSS” window:

Figure 3: Custom CSS code

(4) Make sure you enable styles!

(5) enter or paste the code and modify the URL for your compass image.

.ipnrm .ipnrm-widget .ipnrm-compass:before {
display:none;
}
.ipnrm .ipnrm-widget .ipnrm-compass:after {
display:none;
}
.ipnrm .ipnrm-widget .ipnrm-compass.ipnrm-active {
width:64px;
height:64px;
background-image:url();
background-size:contain;
}
?
Figure 4: The custom compass

You can further tweak the size using the “width” and “height” parameters.

It looks okay on a mobile phone also!
iPad with widget – Note location of compass
iPad with widget – Note location of compass

Playing with embedded Fonts

<!– –> p1 { font-family: “Times New Roman”, Times, serif; font-size: 20px; } p2 { font-family: “Courier New”, monospace; color: green; } p3 { font-family: “Lucida Console”, “Courier New”, monospace; } p4 { font-family: Tahoma, sans-serif; color:red; } p5 { font-family: beynoregular; font-size: 20px; color:red; } choc { font-family: logger; font-size: 30px; color:#805a46; } choc1 { font-family: logger; font-size: 30px; color:#d2691e; } choc2 { font-family: “logger”; font-size: 30px; color:#35281E; } choc3 { font-family: “logger”; font-size: 30px; color:#7b3f00; } p7 { font-family: “beynoregular”; font-size: 40px; color:black; } p8 { font-family: “faster_oneregular”; font-size: 40px; color:violet; } p9 { font-family: ‘Caveat’; font-size: 30px; color:blue; }

The Web Font Test Page is located here.

======
This is new text I added using p1 Times New Roman. ====
This is new text I added using p2 Courier New. ====
This is new text I added using p3 Lucida Console. ====
This is new text I added using p4 Tahoma. ====

h I Non specified font.

h II Non specified font.

h III Non specified font.

This is new text I added using p (only).

This is new text I added using pV Beyno. él? tippmix eredmények

====
THIS IS Beyno. This doesn’t work.

THIS IS LOGGER. color:#805a46

THIS IS LOGGER. color:#d2691e

THIS IS LOGGER. color:#35281E

THIS IS LOGGER. Best color:#7b3f00

FASTER ONE THIS DOESN’T WORK

This is Caveat! This Works!

=====

This is new text I added inside a plain div statement. But it seems no div is required.

Ipanorama using Tour iframe URL+Name and URL+ID

This entry is part 2 of 9 in the series iPanorama

Above uses iframe with Tour ID: *iframe width=”560″ height=”315″ src=”https://www.kasdorf.name/wordpress/ipanorama/virtualtour/2” frameborder=”0″ allowfullscreen* */iframe”*

iPanorama-using-iframe-Tour-ID
iPanorama-using-iframe-Tour-ID

Above uses iframe with Tour Name: *iframe width=”560″ height=”315″ src=”https://www.kasdorf.name/wordpress/ipanorama/virtualtour/test-after-upgrade-to-pro” frameborder=”0″* * allowfullscreen /iframe

Replace the * with appropriate < or > I would suggest using caution with the use of the tour name in case you ever change it in the future I am not sure what will happen!