[Resolved] Styling the "License the image" link

Home Forums Support Styling the "License the image" link

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #926779
    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!

    #926784
    David
    Staff
    Customer Support

    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>

    #926790
    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)

    #926801
    David
    Staff
    Customer Support

    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.

    #926835
    Hasan

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

    #926839
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.