Tutorials | steelbridge.io

Bootstrap 4 Carousel With Fade Effect

Here’s a Bootstrap 4 Carousel with fade transition instead of a slide transition. I find carousels or sliders annoying due to the sudden and hurried transitions from slide/item to slide/item. Example shows the code for three items or slides. Excuse my echo() functions as this example is used in a WordPress theme where the Carousel renders on the front page or home page only. Edit to your specifications.

I have also included the additional CSS required to produce the fade transition effect. Also, my example includes Bootstrap captions. I do not care for captions on-top of carousel images, however, it’s demanded. So, in order to allow the text to be readable or not saturated by the background , I applied a background-color #000 to the container ID and opacity: 1; to .carousel img

It’s assumed bootstrap.css and bootstrap.jsis found in your assets directory. If not, add it of course and if you are using WordPress, add the required Bootstrap dependencies described above into your WordPress theme. How to do that is another topic. I’ll try to write about it.

Below is the HTML

<div id="carouselBeadManRedding" class="carousel carousel-fade">
<ol class="carousel-indicators">
<li class="active"> </li>
<li> </li>
<li> </li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"><img class="d-block w-100" src="/add/your/image.jpg" alt="Add Alt">
<div class="carousel-caption d-md-block">
<h2>Title</h2>
<p class="lead">Lead Text</p>
</div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="/add/your/image.jpg" alt="Alt text">
<div class="carousel-caption d-md-block">
<h2>Title</h2>
<p class="lead">Lead Text</p>
</div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="/add/your/image.jpg" alt="Alt Text">
<div class="carousel-caption d-md-block">
<h2>Title</h2>
<p class="lead">Lead Text</p>
</div>
</div>
</div>
</div>

Below is the custom CSS

/* Carousel
----------------------------------- */
#carouselBeadManRedding {
background-color: #000;
}
.carousel.carousel-fade .carousel-item {
display: block;
opacity: 0;
transition: opacity ease-out 1.7s;
left: 0;
top: 0;
position: absolute;
}
.carousel.carousel-fade .carousel-item.active {
opacity: 1 !important;
}
.carousel.carousel-fade .carousel-item:first-child {
top: auto;
position: relative;
transition: opacity ease-out 1.7s;
}
.carousel.carousel-fade .carousel-item:second-child {
top: auto;
position: relative;
transition: opacity ease-out 1.7s;
}
.carousel-item .img-fluid {
margin: 0 auto;
}
.carousel img {
opacity: 0.5;
filter: alpha(opacity=50);
}

I found this post on codeply to be very useful in helping me resolve some of the trouble I was having with transition CSS. Here’s a link Codeply Bootstrap 4 Carousel Fade Transition.

Published by Chris Parsons on April 19, 2018 | Permalink

Get Image Alt From Custom Post Meta Field

(This post assumes you are familiar with creating custom meta fields)

It’s always bugged me when incorporating a meta field image attachment into a template, I find myself typing in the alt=”” contents when in the media section for any given image, there’s a field for alt text. I want to use the content in the alt text field to populate the alt tags in my theme or template, but I haven’t been able to find the solution until last night when I finally got fed up creating another group of image containers and facing the same old conundrum of typing the alt text in manually or calling the post title, maybe the post excerpt. The right thing to do is get the alt text from the image attachment. This time I simply could no longer ignore the fact that somehow, I could get the alt text for an image delivered by a custom meta field. So, I did it. Life is better.

Getting the alt content for a featured image or an image in the theme customizer is well documented online. But I struggled as I said, trying to acquire alt content from a media attachment for a meta filed. I could, and have just used the post_title like so:

The above certainly provides alt text. It prints the post title. But it’s not consistent and we are not using the resource precisely. We are printing the post title and not the intended resource found in the media post type.

So, how to get the image alt for an image attachment produced in a theme or template via custom meta field:

<?php
// Get the URL of the custom meta image field
$get_image_url = get_post_meta(get_the_ID(), 'post-meta-field-id', true);
// Gets the custom post type image id
$get_image_id = attachment_url_to_postid($get_image_url);
// Get's the alt text from the image
$alt = get_post_meta ( $get_image_id, '_wp_attachment_image_alt', true );
echo $alt;

I’ll explain the code above:

The ‘post-meta-field-id’ can cause some confusion here if you are not already familiar with creating custom meta fields. Although there is a plugin available that allows easy creation of meta fields, called Advanced Custom Fields, I prefer to use my own code that I’ve developed over time. It’s a benefit to your clients to utilize your own crafted plugins because you are providing sound, tested, proven functionality without the noisy adds that are common in many of the free solutions available in the plugin repository. Some plugins are heavy on the database as well, loading scripts and features simply not needed for a given website. Anyway, sorry to digress… The ‘post-meta-field-id’ entry is from the code producing your meta field. It’s the callback that produces the content so it can be delivered on the front end… and it’s looks like this (poke around, it’s in there):

I am not trying to demonstrate how to create a meta field as much as I’m providing a reference since this post is for the tech who understands the process of creating meta fields.

Using attachment_url_to_postid associated the image id with the url to said image obtained via $get_image_url. I think using this method could create a load on the server if we are processing thousands of files on a single page. But, to that I say “isn’t processing thousands of files on a single page a problem in and of itself?”

The best part here is _wp_attachment_image_alt. This is where the alt test is delivered in the variable $alt

So, here’s how your in your theme or template will look based on the above solution:

I know there’s other ways to do this and maybe I could have written my examples differently. This is just my way of accomplishing a task as of today. I will update this post with your insights and improvements as they most certainly will come.

What are your thoughts/questions?

Published by Chris Parsons on December 3, 2017 | Permalink

Warning: Fatal Error

Plugin Trouble: WordPress

A fairly common occurrence users of WordPress experience is known as the “white screen of death”. Well, it’s not death and really it’s not the end of the world either. Although some of you panic when your website decides to stop working.

Typically the white screen is accompanied by a couple paragraphs of text signaling you with “Warning” and “Fatal Error”. This is happening because WordPress can’t load the contents of your website. If you look at the statements maybe you can see the word ‘plugins’ located in the file directory string. I have included a photo below where I have circled the file folder in question.

Most fatal errors are associated with a plugin issue.

So, if you see something like whats pictured above, I’ll share with you the solution to getting your site back.. alive and functioning.

Step 1.

Use your code editor, IDE ( Integrated Development Environment) to FTP (File Transfer Protocol) into your sites root directory. Not sure about this? Call your hosting company. I know of one hosting company that offers great support for customers like you. Find them here SteelBridge Media. I use Coda and Dreamweaver. Atom is another one that I like. Textmate, Sublime are a couple others that have served me well. I stick with the two spendy editors, Coda and Dreamweaver.

Anyway, your goal here is to connect via FTP so you can find the plugins folder within the WordPress file structure.

Step 2.

Once you’ve successfully connected to your host, look for the ‘wp-content’ folder, then find the plugins folder.

Step 3.

Rename the plugins folder to ‘plugins-og’. Renaming the plugins folder deactivates all the software contained inside. If you look inside the plugins folder, you’ll see a series of subfolders all containing the plugins you downloaded. One or more of those plugins are causing the trouble you’re experiencing.

The plugins folder can be accessed via ftp

Step 4.

Go to your browser and access “http://the-name-of-your-website-goes-here.com/wp-admin” (use ‘your’ domain name silly, not my example)

Log-in to your WordPress website and activate another theme. I use one of the default themes that come with WordPress upon installation. Pick the Twenty Sixteen theme and activate it. (From your WordPress dashboard, find themes here Appearance -> Themes. Hover over your the Twenty Sixteen theme or any other theme and select the activate button). Activating another theme allows you to see that your WordPress installation is okay. It’s okay because the newly activated theme works! Test your site out to be sure. If you can’t activate a new theme because there aren’t any themes, upload one. Look for the ‘Add New’ button. And if that still doesn’t work, you need to contact me.

Step 5.

Once you have proven out your site works, go back to your plugins folder you accessed via FTP. Open that folder and rename all your plugin sub-folders to end in ‘-og’ and restore the original name of the parent folder to ‘plugins’ (your parent folder was originally ‘plugins’, put it back to that .

Reactivate your original theme and test your site. Don’t be surprised to find stuff missing or non functional. The goal here is to see if your website loads and you don’t get the ‘Warning’ screen.

Once you can see your website loads with out errors (errors are messages that appear on your screen telling you shit is f’ed up) you’re ready for the next step.

Step 6.

Go back to your FTP client and start renaming/restoring original names of the plugins sub-folders ONE AT A TIME to their original name. That means removing the ‘-og ‘ I instructed you to attach to each file folder name. Again these are the files found in the plugins folder.

As you restore each file folder to original name, take some time to verify your site works. This is the whole point of this stage of the process. We are trying to isolate the offending plugin/folder. Test it, reload it. Clear your browser cache!!!

Eventually you will find the offending plugin when you test the site after restoring any given plugin folder name. You’ll know because the ‘white screen of death appears’.

Step 7.

Rename the folder that caused your site to ‘crash’. Yeah, the “white screen of death” thing. Crash means your site didn’t load. So, you saw the error message again. This means the last plugin you restored is a bad, very bad plugin. Delete it from within your WordPress dashboard. Why? Well, some plugins should go through an uninstall process controlled by a script included within the plugin’s folder. I avoid deleting from my IDE. Better yet.. just leave it renamed, then find the developer and reach out and share your experience. Most developers want to help and learn. Expect a reply!

At this point you can look for another similar plugin that provides the solution the offending plugin did at one time not so long ago. Additionally, Once again, you could try to contact the plugin developer and ask for an update. Or, maybe you shouldn’t be plugging around with any and all plugins online! Why? Because if you do that enough, you’ll catch website-crabs, browsyphilis, firefoxitis, safariamydia.

My advice is pay someone to develop a plugin for you. Someone who will keep your site healthy and produce custom plugins that are sanitary!

I can help you. Build plugins. I do that!

Questions? Send me your comments below.

Published by Chris Parsons on November 19, 2016 | Permalink

WordPress function fixes overlapping admin bar

I used to fix the overlapping admin bar issue with CSS. For example:

.logged-in .navbar {
margin-top: 32px;
}

But that solution doesn’t work unless you’re developing with Bootstrap navigation styles. So, I found a cool way to simply tell your browser to move the

down 32px so it renders below the WordPress admin-bar. I use an inline style that activates upon the presence of the WordPress admin-bar. Place the following code in your header.php file where your navigation menu code is. Look for the

tag and duplicate my example below. Keep in mind you may have class and id names that must not be deleted or pasted over. If you are unsure or not getting the results you hope for, comment below with your questions. I’ll do my best to reply quickly.

Example:

<header

<?php

if ( is_admin_bar_showing() ){ echo 'style="margin-top:32px;"'; }

Some of you may feel this is sort of a hack. Maybe so. But I sure like the simplicity of this solution.

Published by Chris Parsons on November 18, 2016 | Permalink