Stephen Burge's Blog, page 11

How to Create Image Collages in WordPress

The Easy Image Collage plugin for WordPress allows you to create image collages within your WordPress site and use them everywhere, either on a post, page, or custom post type. 

The plugin is compatible with both the Classic WP Editor and the Gutenberg Editor. Furthermore, it is possible to embed unlimited collages to any post or page, drag the images to accommodate them within their spot in the collage, and to add a Pinterest button to share the collage. 

In this tutorial, we will explain the functioning of this module. Let’s get started!



[[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]]

CSS Flexbox # 17. Using CSS Variables With CSS Flexbox

We've already determined that CSS Flexbox is super cool, so let's look at mixing in another super cool CSS tool. Custom Properties (also known as CSS Variables or Cascading Variables) are entities that allow you to assign a value in one location and then simply call it as a variable everywhere else. So, changing the value in one place changes it everywhere the var() function refers to the property, no more Find and Replace needed!

Basically this is a two part operation:

You define the value of the custom CSS property (eg. --color1: #ff00ff;, --width: 25%; or --box-padding: 10px;)
You refer to this value within the var() function throughout your CSS (eg. color: var(--color1);, width: var(--width);, padding: var(--box-padding);)


So they are not really variables, but custom properties. For the sake of understanding, this tutorial will use both definitions. 

You can create multiple custom property values, and use them across multiple stylesheets, using the @import...



[[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]]

Useful Tips for Securing your Drupal Site

Drupal is well known for its stability and security out-of-the-box. However, we all know how dangerous the internet can be with all the risks of having your site attacked. There are particular situations in which an extra security measures are needed. This tutorial will deal with specific ways to secure your Drupal site, and the modules involved in this process. 

Let’s get started!



[[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]]

Development Environments for Drupal with Vagrant and Scotch Box

Your local websites are always developed within the same operating system, that is the operating system of your machine (Windows, OSX, Linux). However, the online version of your site is probably hosted on some type of Linux server. Vagrant allows developers to have the conditions to replicate these systems within a Vagrant box. There are multiple kinds of boxes since Vagrant is a very popular alternative amongst developers. One of these boxes is called Scotch Box. Scotch Box is a preconfigured Vagrant Box with a LAMP (Linux, Apache, MySql, PHP) or a LEMP (Linux, Apache/Ngnix, MySql/MongoDB, PHP) stack in it.

This tutorial will explain the basic installation of these tools. Keep reading to learn how!



[[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]]

Styling the Button Element with CSS

No matter what CMS you might be using, WordPress, Drupal, Joomla, Magento, etc., it's of benefit to learn some CSS to make sure you can carry your branding through your site. Buttons on websites are a bit more complex to style, but they really give the site a finished and polished look when you customize them to fit your look and feel.

The <button> tag describes a clickable surface, which triggers an action, a JS method or event when clicking on it. Buttons provide interactivity in your site, that is why they should always be associated with a script (that is not always the case, as we will see later).

You are allowed to embed text and images into a <button> element, in contrast to the <input type=”button”> element. Buttons can be embedded in all HTML content categories, including <form> elements.

Keep reading to learn more!



[[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]]

Theming a Drupal 8 View with CSS Grid

Some different modules and plugins can alter the display of a view in Drupal, for instance, to alternate the order of image and text every new row, or to build some kind of stacked layout. 

It is possible to alter the display of a view with just some lines of CSS code instead. This approach has many advantages, being the fact of not having to install and update a module, the most relevant one.

Keep reading to learn how!



[[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]]

The Next Decade at OSTraining

OSTraining’s tenth anniversary is coming up on November 18th!

This is a meaningful milestone, and we owe a huge “Thank You” to OSTraining’s members, viewers and readers. You made this decade possible. Some of you have been with us since even longer - since 2006 and 2007, when we first started training.



[[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]]

How to Create a Masonry-Like View in Drupal 8

Masonry is a very popular JavaScript library, that stacks items in columns and rows, like a masonry brick wall.

The items reorder themselves according to their size as the viewport size changes with a nice animation effect. For some examples, take a look at the official Masonry site.

It is possible to create a view in Drupal with this style of layout. Keep reading to learn how!



[[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]]

How to Change Edit Permissions For WordPress Content

WordPress is an excellent platform for writing, editing and publishing content. So it’s important to know who has permission to do that on your WordPress site.

I’m going to explain the editing permissions for your WordPress posts.

This tutorial starts by explaining the default permissions and in the next sections we'll see how to customize those permissions.



[[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]]

Notifications For Yoast SEO Scores in WordPress Posts

We've written about the PublishPress plugin before on this blog. In one popular post, we showed how to email WordPress users when a new post is published.

In this guide, we're going to talk more about those notifications. If SEO is really important for your site, we'll explain how to automatically get notified about the Yoast SEO score for new posts.

PublishPress now supports metadata in notifications.



[[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]]