WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to Fetch Image Title/Description/LongDesc? (3 posts)

  1. thinkstorm
    Member
    Posted 6 years ago #

    Hello All,
    I am looking for a way to change the way images are inserted in blog posts. I have a couple of issues:

    • The image uploaded uses the CSS class 'alignright', that is rendered correctly, but not in the editor. I would like to replace that with an "align='right'" instead
    • Currently the title is hardcoded in the post - for me that doesn't really make sense: the media library already has a title, alt text, and long description. When I change anything in the media library, that change should be reflected in all posts, which it currently doesn't (for me)
    • For links to images, I want to add the title to the A-tag so the title shows up in the lightbox overlay

    Currently I run something like:

    add_filter('the_content', 'addlightboxrel_replace');
    function addlightboxrel_replace ($content)
    {   global $post;
        //$pattern = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
    	$pattern = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)title=('|\")(.*?)('|\")(.*?)<\/a>/i";
        $replacement = '<a$1href=$2$3.$4$5 title=$8$9$10 rel="lightbox[%LIGHTID%]"$6>$7title=$8$9$10$11</a>';
        $content = preg_replace($pattern, $replacement, $content);
        $content = str_replace("%LIGHTID%", $post->ID, $content);
        return $content;
    }
    ?>

    This would insert the lightbox tag and a title. Problem now is: how do I set the title attribute of images to the title from the media library / alt text / long description? Shouldn't there be a switch for that?

    Cheers,
    Thorsten

  2. thinkstorm
    Member
    Posted 6 years ago #

    I thought about it a bit more... since the image is inserted hardcoded in tinyMCE together with the A-tag, I guess I need two hooks,

    • tinyMCE Insert Image Hook, which puts a custom WordPress Plugin tag within the title and/or alt attribute
    • post load hook, which replaces any the custom WordPress Plugin tag for the title and/or alt attribute tag within A-tag / IMG-tag with a lookup of its value from the database

    I never programmed anything for WordPress yet, can someone please point me into the right direction in which .php files I would need to change code or how to add custom hooks (so wordpress updates don't become a pain)?

    Cheers,
    Thorsten

  3. thinkstorm
    Member
    Posted 6 years ago #

    I posted a quick and dirty solution at http://www.playoutintelligence.com/wordpress/ :

    <?php
    /*
    Plugin Name: Lightbox 2
    Plugin URI: http://www.stimuli.ca/lightbox/
    Description: Used to overlay images on the current page. Lightbox JS v2.2 by <a href="http://www.huddletogether.com/projects/lightbox2/" title="Lightbox JS v2.2 ">Lokesh Dhakar</a>.
    Version: 2.5.0
    Author: Rupert Morris
    Author URI: http://www.stimuli.ca/
    */
    
    /* Where our theme reside: */
    $lightbox_2_theme_path = (dirname(__FILE__)."/Themes");
    update_option('lightbox_2_theme_path', $lightbox_2_theme_path);
    /* Set the default theme to Black */
    add_option('lightbox_2_theme', 'Black');
    
    /* options page */
    $options_page = get_option('siteurl') . '/wp-admin/admin.php?page=lightbox-2/options.php';
    /* Adds our admin options under "Options" */
    function lightbox_2_options_page() {
    	add_options_page('Lightbox Options', 'Lightbox 2', 10, 'lightbox-2/options.php');
    }
    
    function lightbox_styles() {
        /* The next lines figures out where the javascripts and images and CSS are installed,
        relative to your wordpress server's root: */
        $lightbox_2_theme_path = (dirname(__FILE__)."/Themes");
        $lightbox_2_theme = urldecode(get_option('lightbox_2_theme'));
        $lightbox_style = (get_bloginfo('wpurl')."/wp-content/plugins/lightbox-2/Themes/".$lightbox_2_theme."/");
        $lightbox_path =  get_bloginfo('wpurl')."/wp-content/plugins/lightbox-2/lightbox2/";
    
        /* The xhtml header code needed for lightbox to work: */
    	$lightboxscript = "
    	<!-- begin lightbox scripts -->
    	<script type=\"text/javascript\">
        //<![CDATA[
        document.write('<link rel=\"stylesheet\" href=\"".$lightbox_style."lightbox.css\" type=\"text/css\" media=\"screen\" />');
        //]]>
        </script>
    	<script type=\"text/javascript\" src=\"".$lightbox_path."prototype.js\"></script>
    	<script type=\"text/javascript\" src=\"".$lightbox_path."scriptaculous.js\"></script>
    	<script type=\"text/javascript\" src=\"".$lightbox_path."lightbox.js\"></script>
    	<!-- end lightbox scripts -->\n";
    	/* Output $lightboxscript as text for our web pages: */
    	echo($lightboxscript);
    }
    
    /* we want to add the above xhtml to the header of our pages: */
    add_action('wp_footer', 'lightbox_styles');
    add_action('admin_menu', 'lightbox_2_options_page');
    ?>

    the plugin has no options page, it is so dirty my eyes hurt, nine search and replaces with regular expressions that can go wrong, and I bet it slows down access times, too, and is probably not cacheable.

    Please fix ;)

Topic Closed

This topic has been closed to new replies.

About this Topic