Support » Plugin: Media Credit » Customize Style of Caption

  • Resolved lihao

    (@lihao)


    Hi,

    Thanks for the great plugin.
    May I know how can I adjust the css of the caption? For example, I would like to have the caption of credit displayed at the bottom right corner in a black box. Is that possible to achieve?

    In addition, is it possible to only show the credit in individual post page rather than every page including the main page and the category page?

    Thank you.

Viewing 15 replies - 1 through 15 (of 21 total)
  • Plugin Author pepe

    (@pputzer)

    Sure, you can style .media-credit any way you like. You can also unhook the default stylesheet entirely if your theme does not need it (the handle is media-credit or media-credit-end if “Display credit after posts.” is enabled).

    As for your second question, you can hook into media_credit_shortcode and return the $content attribute to prevent showing the credit on certain pages (e.g. using ! is_single() as a condition).

    Hi Pepe,

    Thank you for your reply. I tried to change the styling of media-credit as I did not enable “display credit after posts”, but it did not work, because the credit text is not in the <span> tag with “media-credit” class, but in an tag outside the <span> tag. It only works if I directly change the css of the tag. Can I know how can I do about it?

    Thank you.

    Plugin Author pepe

    (@pputzer)

    That sound’s quite weird. You are not by any chance using the media_credit_shortcode to customize the markup? Is there an example page I can look at?

    I did not touch the media_credit_shortcode in the php file as I would like to tackle the styling issue first. You could look at http://waterpolicy.online/index.php/category/contributions/ and inspect the media credit text. It is outside the <span> tag of “media-credit”, while when I look at the source code of the web, it is inside the <span> tag.

    Plugin Author pepe

    (@pputzer)

    I’ve found the issue. Unfortunately, the filters provided by WordPress only work on the HTML generated for the image tag itself. If the theme adds an <a> tag around the call to the_post_thumbnail(), the markup generated for the credit is invalid (<a> tags may not be nested). To fix this issue, the credits generated for post thumbnails in version 3.1.5 will not contain any links by default. The old behavior can be enabled by return true for the media_credit_post_thumbnail_include_links filter.

    • This reply was modified 3 years, 11 months ago by pepe.

    Thank you for your reply. So if that’s the case, there is nothing I could do to style the credit text right?

    Plugin Author pepe

    (@pputzer)

    These are your options (in order of what I would recommend):

    1. You can customize all the templates using post thumbnails in your (child) theme. This results in much better markup than what the plugin option can provide.
    2. You can use the media_credit_post_thumbnail hook to provide your own markup just for the post thumbnail filter.
    3. You can wait for the release of 3.1.5.
    Plugin Author pepe

    (@pputzer)

    Fixed in 3.5.1.

    Sure thank you.
    As for filtering the media credits to make it only appear in post pages, do I just add “if (!is_single()){
    return null;
    }”
    in the beginning of the media_credit_shortcode function before the rest of the existing code? Otherwise where should I do the conditioning?

    Plugin Author pepe

    (@pputzer)

    No, you have to return the $content:

    function prevent_non_single_credits( $markup, $atts, $content ) {
      if ( ! is_single() ) {
        return $content;
      } else {
        return '';
      }
    }

    Sorry I am pretty new to WordPress and PHP and thank you so much for your patience, not sure what I did was correct or not. I put the prevent_non_single_credits function parallel to the media_credit_shortcode function, and call it in the filter:

    
    
    /**
     * prevent credit from appearing in non-post pages 
     */
     function prevent_non_single_credits( $markup, $atts, $content ) {
        if ( ! is_single() ) {
           return $content;
        } else {
           return '';
        } 
     }
    
     function media_credit_shortcode( $atts, $content = null ) {
        $output = apply_filters( 'media_credit_shortcode', '', $atts, ‘prevent_non_single_credits’ );
    
    

    The rest of the code unchanged.

    • This reply was modified 3 years, 11 months ago by lihao.
    • This reply was modified 3 years, 11 months ago by lihao.
    • This reply was modified 3 years, 11 months ago by lihao.
    Plugin Author pepe

    (@pputzer)

    Ah, no. The correct code snippet to add to your theme’s functions.php should look like this:

    function prevent_non_single_credits( $markup, $atts, $content ) {
      if ( ! is_single() ) {
        return $content;
      } else {
        return '';
      }
    }
    add_filter( 'media_credit_shortcode', 'prevent_non_single_credits', 10, 3 );
    • This reply was modified 3 years, 11 months ago by pepe.

    It seems to be not working though, I noticed that there is this function called

    
    function colormag_setup() {
    
    	/*
    	 * Make theme available for translation.
    	 * Translations can be filed in the /languages/ directory.
    	 */
    	load_theme_textdomain( 'colormag', get_template_directory() . '/languages' );
    
    	// Add default posts and comments RSS feed links to head
    	add_theme_support( 'automatic-feed-links' );
    
    	// This theme uses Featured Images (also known as post thumbnails) for per-post/per-page.
    	add_theme_support( 'post-thumbnails' );
    
    	// Registering navigation menu.
    	register_nav_menus(array(
          'primary' => __( 'Primary Menu', 'colormag' ),
          'footer' => __( 'Footer Menu', 'colormag' )
       ));
    
    	// Cropping the images to different sizes to be used in the theme
       add_image_size( 'colormag-highlighted-post', 392, 272, true );
       add_image_size( 'colormag-featured-post-medium', 390, 205, true );
       add_image_size( 'colormag-featured-post-small', 130, 90, true );
       add_image_size( 'colormag-featured-image', 800, 445, true );
       // Pro Options
       add_image_size( 'colormag-default-news', 150, 150, true );
       add_image_size( 'colormag-featured-image-large', 1400, 600, true );
    
    	// Setup the WordPress core custom background feature.
    	add_theme_support( 'custom-background', apply_filters( 'colormag_custom_background_args', array(
    		'default-color' => 'eaeaea'
    	) ) );
    
    	/*
        * Let WordPress manage the document title.
        * By adding theme support, we declare that this theme does not use a
        * hard-coded <title> tag in the document head, and expect WordPress to
        * provide it for us.
        */
       add_theme_support('title-tag');
    
    	// Enable support for Post Formats.
    	add_theme_support( 'post-formats', array( 'aside', 'image', 'video', 'quote', 'link', 'gallery', 'chat', 'audio', 'status' ) );
    
    	// Adding excerpt option box for pages as well
    	add_post_type_support( 'page', 'excerpt' );
    
    	/*
    	 * Switch default core markup for search form, comment form, and comments
    	 * to output valid HTML5.
    	 */
    	add_theme_support('html5', array(
    		'search-form', 'comment-form', 'comment-list', 'gallery', 'caption',
    	));
    
    	// adding the WooCommerce plugin support
    	add_theme_support( 'woocommerce' );
    
    	// Adds the support for the Custom Logo introduced in WordPress 4.5
    	add_theme_support( 'custom-logo',
    		array(
    			'flex-width' => true,
    			'flex-height' => true,
    		)
    	);
    
    	// Support Auto Load Next Post plugin
    	add_theme_support('auto-load-next-post');
    }
    endif;
    

    I guess I don’t need to put the code snippet inside the function right? But there seems to be no change as the media credit is still appearing on non-post pages like http://waterpolicy.online/index.php/category/contributions/

    Plugin Author pepe

    (@pputzer)

    The filter is only for credits inserted via shortcodes (in the content editor).

    There is a similar filter hook media_credit_post_thumbnail for post thumbnails.

    Please have a look at the inline documentation in class-media-credit-public.php for the filter parameters.

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘Customize Style of Caption’ is closed to new replies.