[Resolved] Styling the "License the image" link

[Hasan]

On this page, the “License this image” link has been created with the following code:

/**********************************************************************************
	Insert license link after the image on single posts - provided by theme support
***********************************************************************************/

add_filter( 'the_content', 'db_insert_before_first_paragraph' );
function db_insert_before_first_paragraph( $content ) { 
    if ( is_single() ) {

        $my_div = '<a href="/purchase/" target="_blank" class="license-caption-link">❤ License this image</a>';
        $first_para_pos = strpos( $content, '<p' );
        $new_content = substr_replace( $content, $my_div, $first_para_pos, 0 );
        
        return $new_content;
    }
    
    return $content;

}

While trying to style the link with CSS, it seems like something is wrong. The style is also affecting the image (background color, padding), which it should not.

Also, I have the same link on this page created with the following code:

/********************************************************************************************************
	Create automatic excerpt for the stories page and insert the license link - provided by theme support
*********************************************************************************************************/

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+?src=[\'"]([^\'"]+)[\'"].*?>/i', $post->post_content, $matches);
  $first_img = $matches[1][0];

  if(empty($first_img)) {
    $first_img = "/path/to/default.png";
  }
  return '<img src="'.$first_img.'" /><a href="/purchase/" target="_blank" class="license-caption-link">❤ License this image</a>';
}
add_shortcode('first-image', 'catch_that_image');

The style for both of the links should be the same (top and bottom margin). Please help to fix this!

[David]

Hi there,

both the image block and your <a> tag both have the license-caption-link class. Use a more specific class in your <a>

[Hasan]

Thanks David!

Sorry can’t figure out where to put that! I’ve assigned the class to the <a> tag. Don’t know how it is related with the image block. Can you please suggest the code? (both of the code block has been provided by you)

[David]

If you select the Image Block in the editor and in the Settings Sidebar under Advanced there is an Additional CSS field. Do you see the license-caption-link class ? If so remove it.

[Hasan]

Thank you so much David! Understand now where I made the mistake!!

[David]

Glad to be of help

[Author]

Posts