To start off, thank you for your time and assistance. I recently bought a wordpress theme with a built in gallery. Here's the link to the theme's live preview, just click on the 'Fashion Model' link and the gallery will pop up: http://themeforest.net/item/mediabook-multimedia-wordpress-theme/full_screen_preview/3025192

As you can see it's a nice gallery that you just click on the different slices to view the different pics in that gallery. My goal for my site is to turn the full-view pics into links to the blogs posts with in the site. But I am completely lost on how to accomplish this task. I haven't worked with PHP too much in the last 5 years since I graduated school, and I only had a basic class on it when I did study it. So, my PHP knowledge is severly lacking. I have no idea where the sourse behind the coding comes from. Here's the exact code for the back-end module that let's you insert the pics:

$module_item_option = new WPW_ModuleItemOption(
                    array(
                    "type" => "option-tab",  
                    "title" => __("Item Type", $wpw_theme_lang),
                    "id" => $this->cfg['id']."_item_type",    
                    "description" => __("Chose what type of item.", $wpw_theme_lang),  
                    "option-group" => "item-type",
                    "br" => "1",  
                    "css-class" => " main-item-setting",
                    "options" => array(
                            "image" => "Image",
                            "video" => "Video",
                            "audio" => "Audio",
                            "text"  => "Text"
                            )
                    )
                );

I'm completely lost as to where the array info is coming from. Like how does the coding know that selecting "Image" means to allow you to access Wordpress' media library. And how can I code this to allow for the images to link to the posts/pages of my choosing? I know this isn't much to go on, so I'll add the entire PHP file. If you need me to add more files then please request and I'll do so. I'm not seeing an option to upload screenshots or actual files or I would just send the whole template. I'm willing to email that though. Here's the entire PHP file:

<?php

//
//  GALLERY OBJECT
//
//

class WPW_HorizontalGallery{

    //main
    public $cfg;
    public $activator;
    public $item_model = array();
    public $base;
    //
    function __construct(){
        global $wpw_theme_lang;
        $this->cfg['id'] = 'wpw_gallery';
        $this->cfg['title'] = 'Gallery';
        $this->cfg['active_on_posts'] = array('post', 'page');

        add_action( 'init', array( &$this, 'init' ) );

    } // function

    public function init(){
        global $wpw_theme_lang;

        //
        //  SET MODULE BASE
        //

        $this->base = new WPW_ModuleBase(
            array(
                "id" => $this->cfg['id'],  
                "title" => $this->cfg['title'],
                "module" => &$this,
                "module_item_model" => array( &$this, 'item_model' ),  
                "admin_scripts" => array( &$this, 'admin_scripts' ),
                "frontend_scripts" => array( &$this, 'frontend_scripts'),
                "active_on_posts" => $this->cfg['active_on_posts'],
                "sortable_items" => true
                )
            );

        //CUSTOM SETTINGS ON MODULE BASE

        //add custom manual buttons
        $module_custom_settings = new WPW_AddMetaOption(
            array(
                'id' => $this->cfg['id']."-custom-settings",
                'type' => 'custom-input',
                'custom-callback' => array( &$this, 'pre_custom_settings')
            )
        );

        $this->base->module_box->add_module($module_custom_settings, 1);

        //INITIAL OPTIONS

        $metabox_input = new WPW_AddMetaOption(
                array(
                "title" => __("<br/><br/>Gallery Items", $wpw_theme_lang),    
                "id" => "wpw_gall_section",
                "description" => __("", $wpw_theme_lang),     
                "type" => "section-title"  
            )
        );  
        $this->base->module_box->add_module($metabox_input, 1); 

        //      

        $metabox_input = new WPW_AddMetaOption(
                array(
                "title" => __("Controls Color ", $wpw_theme_lang),   
                "type" => "select",  
                "id" => $this->cfg['id']."_controls_color",
                "options" => array(
                    "none" => "No Change",
                    "white" => "White",
                    "gray" => "Gray",
                    "dark" => "Dark"
                ),
                "description" => __("Select the color of the graphical buttons that are present in the template. Every color represents a set of icons.", $wpw_theme_lang),  
                "default" => "none"
            )
        );

        $this->base->module_box->add_module($metabox_input, 1);         


        $metabox_input = new WPW_AddMetaOption(
                array(
                "title" => __("Background Color", $wpw_theme_lang),    
                "id" => $this->cfg['id']."_bg_color",    
                "type" => "colorpicker-input", 
                "description" => "", 
                "degault" => ""  
            )
        );  
        $this->base->module_box->add_module($metabox_input, 1);     

        $metabox_input = new WPW_AddMetaOption(
                array(
                "title" => __("Full Screen Options", $wpw_theme_lang),    
                "id" => "wpw_fs_section",
                "description" => __("This settings allows you to set different colors for this gallery when it displays the content in full-screen mode.", $wpw_theme_lang),     
                "type" => "section-title"  
            )
        );  
        $this->base->module_box->add_module($metabox_input, 1);             



        $wpw_enable_module = new WPW_AddMetaOption(
                    array(
                    "type" => "text",  
                    "title" => __("Gallery Height", $wpw_theme_lang),
                    "id" => $this->cfg['id']."_gallery_height",  
                    "description" => __("The height size of the gallery in normal view. This needs to be equal with the height size of the images in the normal view. <br/>In full screen this size will be calculated using the screen size of the viewer.", $wpw_theme_lang),  
                    "default" => "300"
                    )
                );
        $this->base->module_box->add_module($wpw_enable_module, 1);     

        $wpw_enable_module = new WPW_AddMetaOption(
                    array(
                    "type" => "checkbox",  
                    "title" => __("Hide Text Content", $wpw_theme_lang),
                    "id" => $this->cfg['id']."_hide_post_text",  
                    "description" => __("The content of main text editor from above is displayed by default under the gallery when open. You can chose to disable it for this gallery so it won't appear in front page.", $wpw_theme_lang),  
                    "default" => "false"
                    )
                );
        $this->base->module_box->add_module($wpw_enable_module, 1);
    }


    public function item_model(){
        global $wpw_theme_lang;
        if(isset($this->cfg['item_model'])){
            return $this->cfg['item_model'];
        }
        //
        //      MODULE ITEM MODEL
        //
        $module_item_option = new WPW_ModuleItemOption(
                    array(
                    "type" => "option-tab",  
                    "title" => __("Item Type", $wpw_theme_lang),
                    "id" => $this->cfg['id']."_item_type",    
                    "description" => __("Chose what type of item.", $wpw_theme_lang),  
                    "option-group" => "item-type",
                    "br" => "1",  
                    "css-class" => " main-item-setting",
                    "options" => array(
                            "image" => "Image",
                            "video" => "Video",
                            "audio" => "Audio",
                            "text"  => "Text"
                            )
                    )
                );
        $this->item_model[] = $module_item_option;  

        $module_item_option = new WPW_ModuleItemOption(
                    array(
                    "type" => "text",  
                    "title" => __("Item Title", $wpw_theme_lang),
                    "id" => $this->cfg['id']."_title",    
                    "description" => __("The Item title - will appear when you hover over the item and near the Gallery name.", $wpw_theme_lang), 
                    "br" => "1",  
                    "default" => ""
                    )
                );
        $this->item_model[] = $module_item_option;  

        $module_item_option = new WPW_ModuleItemOption(
                    array(
                    "type" => "att-id",  
                    "title" => __("Image", $wpw_theme_lang),
                    "id" => $this->cfg['id']."_att_id",    
                    "description" => __("This is the default image for the gallery item. Required if this is an Image Item. For the rest of the item types will be used as poster. <br/><br/>Click to Upload or select an image that is already in the Media Library. If you upload new images - Upload them then switch to Media Library so you can select them.", $wpw_theme_lang), 
                    "default" => ""
                    )
                );
        $this->item_model[] = $module_item_option;

        $module_item_option = new WPW_ModuleItemOption(
                    array(
                    "type" => "att-id",  
                    "title" => __("Alternate Image", $wpw_theme_lang),
                    "id" => $this->cfg['id']."_att_alt_id",    
                    "description" => __("Add here another image if you want to transform this item into a Before/After Viewer.", $wpw_theme_lang), 
                    "option-group" => "item-type",
                    "option-group-tab" => "image",  
                    "default" => ""
                    )
                );
        $this->item_model[] = $module_item_option;      

        $module_item_option = new WPW_ModuleItemOption(
                    array(
                    "type" => "select",  
                    "title" => __("Media Type", $wpw_theme_lang),
                    "id" => $this->cfg['id']."_media_type",    
                    "description" => __("Chose the type of player you want to use.", $wpw_theme_lang),  
                    "option-group" => "item-type",
                    "option-group-tab" => "video",  
                    "br" => "1",  
                    "options" => array(
                            "vimeo" => "Vimeo",
                            "youtube" => "Youtube",
                            "jplayer" => "jPlayer - Video"
                        )
                    )
                );
        $this->item_model[] = $module_item_option;

        $module_item_option = new WPW_ModuleItemOption(
                    array(
                    "type" => "text",  
                    "title" => __("Media Code", $wpw_theme_lang),
                    "id" => $this->cfg['id']."_media_code",    
                    "description" => __("This field requires a code or a movie path, depending what video player are you using: <br><strong>Vimeo or Youtube</strong>: add the code of your video you need. The Youtube code is after the 'v=' parameter in a url: http://www.youtube.com/watch?v=<strong style='color:red'>iUpkmg1hYLk</strong> <br/><br/><strong>jPlayer Video and Audio</strong>: enter the media file path to play. In this case you can also add multiple paths to different music/video formats - because the player will search whatever movie format is supported by the device is used. <br/> The most usual media paths are .mp3, .mov or .ogg <br/> In case you are using muliple paths, sepparate them with the character: <strong style='font-size:140%;'>;</strong> ", $wpw_theme_lang),  
                    "option-group" => "item-type",
                    "option-group-tab" => "video,audio",  
                    "br" => "1",  
                    "default" => ""
                    )
                );
        $this->item_model[] = $module_item_option;

        $module_item_option = new WPW_ModuleItemOption(
                    array(
                    "type" => "text",  
                    "title" => __("Player Width Size", $wpw_theme_lang),
                    "id" => $this->cfg['id']."_video_ratio",    
                    "description" => __("This setting will set the Width size of the video player but also his ratio when used in zoomed mode.", $wpw_theme_lang),  
                    "option-group" => "item-type",
                    "option-group-tab" => "video",  
                    "br" => "1",  
                    "default" => "520"
                    )
                );
        $this->item_model[] = $module_item_option;      

        $module_item_option = new WPW_ModuleItemOption(
                    array(
                    "type" => "att-id",  
                    "title" => __("Poster", $wpw_theme_lang),
                    "id" => $this->cfg['id']."_video_poster",    
                    "description" => __("In case you want to use the jPlayer, you can also set a poster image for the movie", $wpw_theme_lang),  
                    "option-group" => "item-type",
                    "option-group-tab" => "video",  
                    "br" => "1",  
                    "default" => ""
                    )
                );
        //$this->item_model[] = $module_item_option;



        $module_item_option = new WPW_ModuleItemOption(
                    array(
                    "type" => "textarea",  
                    "title" => __("Text Content", $wpw_theme_lang),
                    "id" => $this->cfg['id']."_text_content",    
                    "description" => __("Supports HTML formated text.", $wpw_theme_lang),  
                    "option-group" => "item-type",  
                    "option-group-tab" => "text,audio",  
                    "br" => "1",  
                    "dont-escape" => 1, 
                    "default" => ""
                    )
                );
        $this->item_model[] = $module_item_option;
        $this->cfg['item_model'] = $this->item_model;

        return $this->item_model;
    }


    function pre_custom_settings(){
        ?><?php
    }   


    function admin_scripts(){
        $src = get_template_directory_uri().'/wpw.h.gallery/module.admin.js';
        wp_register_script( $this->cfg['id'].'_js_admin', $src);
        wp_enqueue_script( $this->cfg['id'].'_js_admin' );
        ?>
            <link rel='stylesheet' href='<?php echo get_template_directory_uri(); ?>/wpw.h.gallery/module.css' type='text/css' media='all' /> 
        <?php
    }

    function frontend_scripts(){
        ?>
            <link rel='stylesheet' href='<?php echo get_template_directory_uri(); ?>/wpw.h.gallery/module.css' type='text/css' media='all' />
        <?php
    }

} // class

$wpw_h_gallery = new WPW_HorizontalGallery();

?>

Thanks again for your time and help.

Recommended Answers

these codes right here..

 $gallery_content .= '<a data-type="'.$item_type.'" href="'.$att_img[0].'" title="'.$att_title.'" data-medium="'.$att_img_med[0].'" data-med-size="'.$att_img_med[1].'-'.$att_img_med[2].'" data-full-size="'.$att_img[1].'-'.$att_img[2].'" '.$alt_data_str.' class="list-item-pad image-content">'.$item_index.'</a>';   

should be the focus of modification.. we should be able to pass the unique id of the images so that wordpress engine be able to interpret it as post..

Jump to Post

Hi,

quickest way of doing this in wordpress without breaking this module is to send the full-image to a dynamic page.

There are many tutorials on the web about creating dynamic page in wordpress environment. I am not going to cover it here, but I will give you two links …

Jump to Post

All 8 Replies

Hi,

You will need to look for the function or class responsible for inserting the items in the database, and the function responsible for sending it on the view.

these codes....

$module_item_option = new WPW_ModuleItemOption(
array(
"type" => "option-tab",
"title" => __("Item Type", $wpw_theme_lang),
"id" => $this->cfg['id']."_item_type",
"description" => __("Chose what type of item.", $wpw_theme_lang),
"option-group" => "item-type",
"br" => "1",
"css-class" => " main-item-setting",
"options" => array(
"image" => "Image",
"video" => "Video",
"audio" => "Audio",
"text" => "Text"
)
)
);

are for your tab menu or to show the setting options, on your administration page for the plugin.

Thanks for replying Veedeoo, I really truly appreciate any help. Yeah that's the issue for me though. I'm usually pretty good at finding this stuff, but I have no idea which file in the theme has that code responsible for inserting the items. The guy who coded this theme hid it pretty code. Or at least I can't figure it out myself. In your expert opinion would this could for inserting come from another PHP file or a JS file usually?

I found the function that inserts into the database. Anybody have any idea how customize it to allow for the image to become a link to whatever page that I link it to? Here's the code:

//GET POST IMAGES
    //
    $module_id = "wpw_gallery";
    $gallery_type = "gallery_page";
    global $wpw_h_gallery;

    $module_items = $wpw_h_gallery->base->get_module_items($local_post->ID);

    if (count($module_items)){

        //GALLERY PROPERTIES
        $gallery_attributes = "";
        $gallery_height = 400;

        //controls-color
        $controls_color = get_post_meta($id, $module_id."_controls_color", true); 
        if(strlen($controls_color) && $controls_color !== "none"){
            $gallery_attributes .= " data-controls-color='".$controls_color."'";    
        }

        //bg-color
        $bg_color = get_post_meta($id, $module_id."_bg_color", true); 
        if(strlen($bg_color)){
            $gallery_attributes .= " data-bg-color='".$bg_color."'";    
        }

        //gallery-height
        $gallery_height = get_post_meta($id, $module_id."_gallery_height", true);
        if(!$gallery_height){
            $gallery_height = 300;
        }
        $gallery_attributes .= " data-gallery-height='".$gallery_height."'";

        //

        $gallery_content .= '<div class="item-list" '.$gallery_attributes.'>';
        $item_index = 0;
        foreach ( $module_items as $module_item ) {

            $item_index += 1;
            //print_r($module_item);

            $att_id = wpw_get_mi_value($module_item, $module_id.'_att_id');
            $att_title = wpw_get_mi_value($module_item, $module_id.'_title');
            $item_type = wpw_get_mi_value($module_item, $module_id.'_item_type');


            switch ($item_type) {
                case 'image':

                    $med_size = array(700, intval($gallery_height));

                    $att_img = wp_get_attachment_image_src( $att_id, 'full');
                    $att_img_med = wp_get_attachment_image_src( $att_id, $med_size);
                    //alternate image
                    $att_alt_id = wpw_get_mi_value($module_item, $module_id.'_att_alt_id');
                    $att_alt_img = wp_get_attachment_image_src( $att_alt_id, 'full');
                    $att_alt_img_med = wp_get_attachment_image_src( $att_alt_id, $med_size);

                    $alt_data_str = "";
                    if($att_alt_id){
                        $alt_data_str = ' data-alt-full="'.$att_alt_img[0].'" data-alt-medium="'.$att_alt_img_med[0].'" data-alt-med-size="'.$att_alt_img_med[1].'-'.$att_alt_img_med[2].'" data-alt-full-size="'.$att_alt_img[1].'-'.$att_alt_img[2].'" '; 
                    }

                    $gallery_content .= '<a data-type="'.$item_type.'" href="'.$att_img[0].'" title="'.$att_title.'" data-medium="'.$att_img_med[0].'" data-med-size="'.$att_img_med[1].'-'.$att_img_med[2].'" data-full-size="'.$att_img[1].'-'.$att_img[2].'" '.$alt_data_str.' class="list-item-pad image-content">'.$item_index.'</a>';       

IGNORE this response.. I came in little slower than your second response..

try looking at the plugins directory..

The default wordpress plugin included in the distribution is akismet. All others are either added by you or by the theme developer.

If you have netbeans for PHP ( this is a free PHP IDE), you can create a new project and then use the plugins directory as the source directory. You can then use the netbeans search function to search for the string "insert". The resulting queries are the file and the location where the word 'insert' were used. Click on any of these files, to view the source code.

these codes right here..

 $gallery_content .= '<a data-type="'.$item_type.'" href="'.$att_img[0].'" title="'.$att_title.'" data-medium="'.$att_img_med[0].'" data-med-size="'.$att_img_med[1].'-'.$att_img_med[2].'" data-full-size="'.$att_img[1].'-'.$att_img[2].'" '.$alt_data_str.' class="list-item-pad image-content">'.$item_index.'</a>';   

should be the focus of modification.. we should be able to pass the unique id of the images so that wordpress engine be able to interpret it as post..

Yeah, I'm completely lost on how to do that. lol.

Hi,

quickest way of doing this in wordpress without breaking this module is to send the full-image to a dynamic page.

There are many tutorials on the web about creating dynamic page in wordpress environment. I am not going to cover it here, but I will give you two links and show you the work around.

If you take a look at this approach posted on stackoverflow.. and another plugin here ..

Warning! Codes below is not tested. I don't have any locally installed wordpress at the moment.

I am more in favor of the first option than the plugin. That would be my reference.

Say we call our dynamic page as view.php.. and we will using the same codes as lifted from stackoverflow..

    <?php
    ## filename: view.php

    define('WP_USE_THEMES', false);
    require("/wp-path/wp-blog-header.php");
    get_header();

    if(isset($_GET['view'])){
    $image = $_GET['img'];
    $title = $_GET['title'];
    $alt = $_GET['alt'];
    $id = $_GET['view'];

    echo '<img src="'. $image .'" alt="'. $alt .'" /><br/>';
    echo  $title .'<br/>';

    ## do what you need to do with rest of the data..
    }
    else{

    ?>
    There is nothing here

    <?php
    }
    get_footer();
    ?>

Save this new page in the wordpress directory.. or in the same directory as your index.php

Now let's go back to our target codes.. we can modify it to this

  $gallery_content .= '<a data-type="'.$item_type.'" href="view.php?view='.$att_id.'"&title='. $att_title .'&img='. $att_img[1] .'&alt='. $alt_data_str .' title="'.$att_title.'" data-medium="'.$att_img_med[0].'" data-med-size="'.$att_img_med[1].'-'.$att_img_med[2].'" data-full-size="'.$att_img[1].'-'.$att_img[2].'" '.$alt_data_str.' class="list-item-pad image-content">'.$item_index.'</a>';   

Try experimenting witht he codes above..don't forget to set these values properly

    define('WP_USE_THEMES', false);
    require("/wp-path/wp-blog-header.php");

Sorry it took so long to reply back. I went your route and got it to work. Thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.