Skip to content

Instantly share code, notes, and snippets.

@RichardNesbitt

RichardNesbitt/functions.php

Created March 9, 2020 06:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save RichardNesbitt/7a52d3dadc96977413c883d3a24d36df to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save RichardNesbitt/7a52d3dadc96977413c883d3a24d36df to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. RichardNesbitt created this gist Mar 9, 2020.
    23 changes: 23 additions & 0 deletions functions.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    /*
    Add the following to your theme's functions.php file
    In this case, I wanted to add a background image outside of the normal controls
    so I could darken it by a % using linear gradients.

    I added 2 fields to vc_column_inner:
    */

    // The background image
    vc_add_param("vc_column_inner", array(
    "type" => "attach_image",
    "class" => "",
    "heading" => "Background Image to Fade",
    "param_name" => "bg_img_fade"
    ));

    // A text field to receive a whole number (this will be converted to opacity)
    vc_add_param("vc_column_inner", array(
    "type" => "textfield",
    "class" => "",
    "heading" => "% to fade it (enter as a whole number)",
    "param_name" => "bg_img_fade_num"
    ));
    67 changes: 67 additions & 0 deletions vc_column_inner.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,67 @@
    /* place this file in [your-theme]/vc_templates/ */

    <?php
    if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
    }

    /**
    * Shortcode attributes
    * @var $atts
    * @var $el_class
    * @var $el_id
    * @var $width
    * @var $css
    * @var $offset
    * @var $content - shortcode content
    * Shortcode class
    * @var WPBakeryShortCode_Vc_Column_Inner $this
    */
    $el_class = $width = $el_id = $css = $offset = '';
    $output = '';
    $atts = vc_map_get_attributes( $this->getShortcode(), $atts );
    extract( $atts );

    $width = wpb_translateColumnWidthToSpan( $width );
    $width = vc_column_offset_class_merge( $offset, $width );

    $css_classes = array(
    $this->getExtraClass( $el_class ),
    'wpb_column',
    'vc_column_container',
    $width,
    );

    if ( vc_shortcode_custom_css_has_property( $css, array(
    'border',
    'background',
    ) ) ) {
    $css_classes[] = 'vc_col-has-fill';
    }

    $wrapper_attributes = array();

    $css_class = preg_replace( '/\s+/', ' ', apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, implode( ' ', array_filter( $css_classes ) ), $this->settings['base'], $atts ) );
    $wrapper_attributes[] = 'class="' . esc_attr( trim( $css_class ) ) . '"';
    if ( ! empty( $el_id ) ) {
    $wrapper_attributes[] = 'id="' . esc_attr( $el_id ) . '"';
    }
    $output .= '<div ' . implode( ' ', $wrapper_attributes ) . '>';
    $innerColumnClass = 'vc_column-inner ' . esc_attr( trim( vc_shortcode_custom_css_class( $css ) ) );
    /******** changes start here ********/
    $output .= '<div class="' . trim( $innerColumnClass ) . '"';
    // only add the image if it was entered
    if( !empty($bg_img_fade) ) {
    // default fade of 30% if nothing was entered
    $fade_percent = isset($bg_img_fade_num) ? $bg_img_fade_num / 100 : 0.3;
    $output .= 'style="background:linear-gradient( rgba(0, 0, 0,'.$fade_percent.'), rgba(0, 0, 0,'.$fade_percent.')), url(\''.wp_get_attachment_url( $bg_img_fade ).'\'); background-size: auto 100%;"';
    }
    $output .= '>';
    /******** changes stop here ********/
    $output .= '<div class="wpb_wrapper">';
    $output .= wpb_js_remove_wpautop( $content );
    $output .= '</div>';
    $output .= '</div>';
    $output .= '</div>';

    echo $output;