Blog

You are here: Home » Blog » Tutorials » How to use the “Media Gallery” in combination with Flashlight

How to use the “Media Gallery” in combination with Flashlight

06 Feb 2012 / 7 Comments /in Tutorials/by

Update: Please update your theme to version 1.9 – this tutorial isn’t required anymore…

This tutorial will guide you through all steps which are necessary to use the “Media Gallery” in combination with Flashlight.

1) Requirements

You need to download the Flashlight theme. I’d recommend the latest version from Themeforest.
Afterwards download the “Attachments” Plugin from the offical Plugin Repsitory. The direct link is: http://wordpress.org/extend/plugins/attachments/. You can buy the “Pro” version but it’s not necessary. The free version offers all features we need right now. If you’re developer the pro version might interest you though.

2) Installation

Install & activate the Flashlight theme and the “Attachments” plugin. Both can be done via the wordpress admin panel. Then open up the helper-slideshow.php file which can be found in the wp-content/themes/flashlight/includes folder (by default). The complete file path is: wp-content/themes/flashlight/includes/helper-slideshow.php.

Now search for following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
        $attachments = get_children(array('post_parent' => $attachment_holder['ID'],
                        'post_status' => 'inherit',
                        'post_type' => 'attachment',
                        'post_mime_type' => 'image',
                        'order' => 'ASC',
                        'orderby' => 'menu_order ID'));


        foreach($attachments as $key => $attachment)
        {
            $this->image_url_array[] = avia_image_by_id($attachment->ID, $avia_config['imgSize'][$size], $returnvalue);
            $this->image_thumb_url_array[] = avia_image_by_id($attachment->ID, $avia_config['imgSize']['widget'], 'url');
            $this->image_id_array[] = $attachment->ID;
        }

and replace it with following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
        $attachments = get_children(array('post_parent' => $attachment_holder['ID'],
                        'post_status' => 'inherit',
                        'post_type' => 'attachment',
                        'post_mime_type' => 'image',
                        'order' => 'ASC',
                        'orderby' => 'menu_order ID'));


        foreach($attachments as $key => $attachment)
        {
            $this->image_url_array[] = avia_image_by_id($attachment->ID, $avia_config['imgSize'][$size], $returnvalue);
            $this->image_thumb_url_array[] = avia_image_by_id($attachment->ID, $avia_config['imgSize']['widget'], 'url');
            $this->image_id_array[] = $attachment->ID;
        }


        if( function_exists( 'attachments_get_attachments' ) )
        {
            $attachments = attachments_get_attachments();
            $total_attachments = count( $attachments );

            if( $total_attachments ) {
                $i = 0;
                foreach($attachments as $attachment)
                {
                    $this->image_url_array[] = avia_image_by_id($attachments[$i]['id'],  $avia_config['imgSize'][$size], $returnvalue);
                    $this->image_thumb_url_array[] = avia_image_by_id($attachments[$i]['id'],  $avia_config['imgSize']['widget'], 'url');
                    $this->image_id_array[] = $attachments[$i]['id'];

                    $i++;
                }
            }

        }

Then scroll down and search for:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$attachments = get_children(array('post_parent' => $attachment_holder['ID'],
                        'post_status' => 'inherit',
                        'post_type' => 'attachment',
                        'post_mime_type' => 'image',
                        'order' => 'ASC',
                        'orderby' => 'menu_order ID'));


        foreach($attachments as $key => $attachment)
        {
            $this->image_array['url'][]  = avia_image_by_id($attachment->ID, $avia_config['imgSize'][$this->imgSize], 'url');
            $this->image_array['link'][] = avia_image_by_id($attachment->ID, 'fullsize','url');
            $this->image_array['id'][]   = $attachment->ID;
        }

and replace it with:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$attachments = get_children(array('post_parent' => $attachment_holder['ID'],
                        'post_status' => 'inherit',
                        'post_type' => 'attachment',
                        'post_mime_type' => 'image',
                        'order' => 'ASC',
                        'orderby' => 'menu_order ID'));


        foreach($attachments as $key => $attachment)
        {
            $this->image_array['url'][]  = avia_image_by_id($attachment->ID, $avia_config['imgSize'][$this->imgSize], 'url');
            $this->image_array['link'][] = avia_image_by_id($attachment->ID, 'fullsize','url');
            $this->image_array['id'][]   = $attachment->ID;
        }


        if( function_exists( 'attachments_get_attachments' ) && ! empty($id) )
        {
            $attachments = attachments_get_attachments();
            $total_attachments = count( $attachments );

            if( $total_attachments ) {

                $i = 0;
                foreach($attachments as $attachment)
                {
                    $this->image_array['url'][]  = avia_image_by_id($attachments[$i]['id'], $avia_config['imgSize'][$this->imgSize], 'url');
                    $this->image_array['link'][] = avia_image_by_id($attachments[$i]['id'], 'fullsize','url');
                    $this->image_array['id'][] = $attachments[$i]['id'];

                    $i++;
                }
            }

        }

Save the modified file.

Afterwards open up flashlight\woocommerce-config\config.php and replace:

1
$image = get_the_post_thumbnail( get_the_ID(), 'portfolio' );

with:

1
2
3
4
5
6
7
8
9
10
11
$image = get_the_post_thumbnail( get_the_ID(), 'portfolio' );

if( function_exists( 'attachments_get_attachments' ) && ! $image )
{
    $attachments = attachments_get_attachments(get_the_ID());
    $total_attachments = count( $attachments );
    if( $total_attachments ) {
        $image = avia_image_by_id($attachments[0]['id'], 'portfolio');
    }

}

and

1
echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog' );

with:

1
2
3
4
5
6
7
8
9
10
11
12
$image = get_the_post_thumbnail( get_the_ID(), 'shop_catalog' );

if( function_exists( 'attachments_get_attachments' ) && ! $image )
{
    $attachments = attachments_get_attachments(get_the_ID());
    $total_attachments = count( $attachments );
    if( $total_attachments ) {
        $image = avia_image_by_id( $attachments[0]['id'], 'shop_catalog' );
    }
}

echo $image;

Then save the file. At least open up flashlight/includes/loop-portfolio.php and replace:

1
$image = get_the_post_thumbnail( get_the_ID(), 'portfolio' );

with:

1
2
3
4
5
6
7
8
9
10
11
$image = get_the_post_thumbnail( get_the_ID(), 'portfolio' );

if( function_exists( 'attachments_get_attachments' ) && ! $image )
{
    $attachments = attachments_get_attachments(get_the_ID());
    $total_attachments = count( $attachments );
   
    if( $total_attachments ) {
       $image = avia_image_by_id( $attachments[0]['id'], 'portfolio' );
    }
}

At least save this file too.

3) Usage

Go to your WordPress Admin Panel and navigate to Settings > Attachments. Make sure that all three checkboxes (pages, post, custom post types) are checked! If not, select them all and click on “Save”.

Next step: Go to any post, page or portfolio entry and click on “Edit”. You should be on the post/page/portfolio entry editor page now. You can upload your featured images here, enter text content, etc.

You will see a new option field on this page – it’s called “Attachments” and looks like:

Click on the “Attach” button to add one or more images from your media libary to this post/page/custom post type. The “thickbox” popup will open, etc. – I think don’t need to explain anything here. You can click on the “Media Gallery” tab to select images from the media gallery. When you see the list of images click on “Show” and “Attach File”.

When you’ve attached all images just close the popup window. You can rearrange all attachments via drag’n'drop (list symbol on the left side). At least save the post/page/portfolio entry and you’ll see that your slideshow contains the new attachments from the media libary too.

That’s it – you can now use any “media gallery” image in combination with Flashlight.

7 replies
  1. moreno says:
    October 27, 2012 at 4:26 pm

    Hi,

    Pictures are well attached.
    But no pictures in slideshow !

    Why

    Thanks

    my website is down for maintenance

    Reply
    • InoPlugs says:
      October 27, 2012 at 6:16 pm

      I updated the code. It should work with the latest version of Flashlight now.

      Reply
      • moreno says:
        November 4, 2012 at 6:50 pm

        Hi,

        I had an error !
        It’s good now !
        But it doesn’t function with “Flexible Grid Gallery” and “WordPress Default Gallery …” (Gallery layout option)

        Why ? :(

        Thanks

        Reply
        • InoPlugs says:
          November 4, 2012 at 7:13 pm

          Yes, the “WordPress Default Gallery” just allows you to attach images to the current entry and you can’t use images from the media gallery (limitation of WP and not of the theme). Afaik “Flexible Grid Gallery” works just fine but I’ll look into it if I find some spare time…

          Reply
        • moreno says:
          November 6, 2012 at 4:31 pm

          I try and i try.
          Install and install again …

          It doesn’t work whit Flexible grid gallery !!

          Thanks

          WP 3.4.2
          Flashlight 1.8

          Reply
  2. legogr says:
    October 28, 2012 at 4:49 pm

    Hi,

    Thanks for the add on. I tried an is working on my site, excepts on WooCommerve product page.

    Thanks!

    Reply
    • InoPlugs says:
      October 28, 2012 at 5:17 pm

      Thanks for the hint. I noticed that the product preview thumbnail itself works – however the background slideshow does not work properly. I’ll look into it when I find some spare time…

      Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Font Size

A A A

Subscribe to Newsletter