Going a Bit Off-topic

While this web log may provide some guidance in customizing a WordPress site, it inevitably touches on more general topics, particularly CSS (cascading style sheet) modifications—topics that in no way depend upon WordPress.

With that disclaimer, I want to point out some image effects that can be achieved by assigning an instance of an image to a particular class.

Once I successfully added a new image class in the previous post, I saw a new set of possibilities unfold for my images.[1]

Below are two image effects I borrowed from the cool tutorial, W3.CSS Images, on the w3schools site.[2]

Circle Images

To create a circular mask over images, first add a CSS class entry, always following a new entry by clicking the Publish button, which both saves the entry and makes it available to your posts:
.w3-circle {border-radius:50%}

Then insert an image into a post and view the HTML code, which, with my theme looks something like this:

<img src="https://usingopensourcewordpress.myplaza.xyz/wp-content/uploads/2018/06/nytimes_print.png"
alt="" width="360" height="416" class="alignleft size-full wp-image-527" />

Replace the ‘class=”alignleft’ with ‘class=”w3-circle’. This change results in the following:

Nice, yes?

Labeled Images

This next example provides the ability to place text over an image in order to provide labels or annotations.

Again, this effect involves adding several classes to your CSS:

.w3-display-topleft{position:absolute;left:0;top:0}
.w3-display-topright{position:absolute;right:0;top:0}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}
.w3-display-bottomright{position:absolute;right:0;bottom:0}
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-container{position:relative}
.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
.text-imagelabel {color:deeppink!important}


Now insert an image into your post,
Colorado field
and examine the HTML, which in my case is:

<img class="alignleft size-full wp-image-472"
src="https://usingopensourcewordpress.myplaza.xyz/wp-content/uploads/2018/06/IMG_2549-1.jpg" alt="Colorado field" width="1000"
height="250">

Out of that string, you will soon re-use the image path—your version of

https://usingopensourcewordpress.myplaza.xyz/wp-content/uploads/2018/06/IMG_2549-1.jpg

Below that HTML, paste the following—replacing my image path with your own:

    
    <div class="w3-container">
    <div class="w3-display-container text-imagelabel">
    <img src="https://usingopensourcewordpress.myplaza.xyz/wp-content/uploads/2018/06/IMG_2549-1.jpg">
    <div class="w3-display-topleft w3-container">Top Left</p></div>
    <div class="w3-display-topright w3-container">Top Right</p></div>
    <div class="w3-display-bottomleft w3-container">Bottom Left</p></div>
    <div class="w3-display-bottomright w3-container">Bottom Right</p></div>
    <div class="w3-display-left w3-container">Left</p></div>
    <div class="w3-display-right w3-container">Right</div>
    <div class="w3-display-middle w3-large">Middle</div>
    <div class="w3-display-topmiddle w3-container">Top Middle</p></div>
    <div class="w3-display-bottommiddle w3-container">Bottom Middle</p></div>
    </div>
    </div>

If all goes well, something like the following will appear:

Top Left

Top Right

Bottom Left

Bottom Right

Left

Right
Middle
Top Middle

Bottom Middle

One final item. I used deeppink in order to contrast with all parts of the photo. However, as any technical writer knows, one label color seldom contrasts with every part of every illustration in a document.

A better way to label is to add a text-shadow value to the text. For demonstration purposes, I’ll just add a text-shadow value to a <span> that I’ll insert after the <div class="w3-container">. Also, I’ll add a letter-spacing value to the span. Finally, I’ll close the span before the final </div>. This is the entire span:

<span style="text-shadow: 3px 2px yellow; letter-spacing:2px">

This is the result:

Top Left

Top Right

Bottom Left

Bottom Right

Left

Right
Middle
Top Middle

Bottom Middle

 

____Footnotes____

[1] Concerning visual vs. the code editors, the advantage of the code editor is that it allows one to assign classes to images and other elements. With the visual editor, you may find plugins that allow similar effects. However, plugins may occasionally cause conflicts, particularly when the WordPress is updated, and so it’s good to minimize your reliance on plugins.

[2] Some popular, short tutorials for HTML reside at w3schools, a Norwegian-run site that provides clear HTML instructions in English. One strength of the site is the sandbox associated with each tutorial. It allows you not only to run the code recommended by the tutorial but to modify the code, re-running it with each change to note the effects.

Leave a Reply

http-www-in1accord-net-wp