Change the layout of shared link posts to match photo/video posts

By default the shared link posts have a different layout to photo and video posts, but you can change this to match by following the directions below.

First, go to the plugin’s Post Layout page and select your layout. Then enable the following setting: Customize > Misc > Media > Use full-size shared link images. Once enabled, follow the directions below for whichever layout you chose.

Thumbnail layout

In order to change the layout so that the shared link image matches the thumbnail layout you would need to do the following:

1) Go to the plugin’s Customize page, click on the Misc tab, and scroll down to the Custom CSS section.
2) Copy and paste the following into that section:

#cff .cff-shared-link { width: 20%; margin: 0; background: none; border: none; }
#cff.cff-thumb-layout .cff-full-size .cff-link{ max-width: 100%; }
#cff.cff-thumb-layout .cff-link-item .cff-text-wrapper { width: 77%; }
#cff .cff-shared-link .cff-text-link{ display: none; }

3) Enter the following into the Custom JavaScript section below it:

$('.cff-item').each(function(){
  var $self = $(this),
    $textWrapper = $self.find('.cff-text-wrapper'),
    $sharedLink = $self.find('.cff-shared-link');
  $textWrapper.before( $self.find('.cff-shared-link') );
  if( $textWrapper.length < 1 ) $sharedLink.remove();
});

Half width layout

In order to change the layout further so that the link image is on the left side of the post text you would need to do the following:

1) Go to the plugin’s Customize page, click on the Misc tab, and scroll down to the Custom CSS section.
2) Copy and paste the following into that section:

#cff .cff-shared-link { width: 50%; margin: 0; background: none; border: none; }
#cff.cff-half-layout .cff-full-size .cff-link{ max-width: 100%; }
#cff.cff-half-layout .cff-link-item .cff-text-wrapper { width: 47%; }
#cff .cff-shared-link .cff-text-link{ display: none; }

3) Enter the following into the Custom JavaScript section below it:

$('.cff-item').each(function(){
  var $self = $(this),
    $textWrapper = $self.find('.cff-text-wrapper'),
    $sharedLink = $self.find('.cff-shared-link');
  $textWrapper.before( $self.find('.cff-shared-link') );
  if( $textWrapper.length < 1 ) $sharedLink.remove();
});

Couldn’t find your answer in the docs?

Contact Support