0

I'm new to WP templating and I'm trying to create my own custom WP theme from a single page bootstrap theme. To My problem is so particular, per say (hoping I don't get yelled at for this), I'm having a hard time finding solutions for my problem.

I am just making a simple theme with a portfolio page. All my files are local as of now. I downloaded a bootstrap theme from here.

The problem I am having is on my portfolio page. I have a custom post type and (I guess) a custom page template loading for this page (not sure if you need to know that, just wanted to ensure you know). All I want to do is click on one of my thumbnails and have blow up and show on the page while making the background dim (like in the original), see the example from the link above.

The css/js lightbox gallery plugin for this is called baguetteBox.js. There doesn't appear to be anything on the internet showing how to WP template this js photo gallery correctly into a custom post way on WP. Below is an example of the two attributes and class that get dynamically added to the bottom div when someone clicks on any of the thumbnail images. What I want to know is how can I implement this functionality from the BS template into my WP template?

enter image description here

But I am not sure if there is a function or functions that helps me implement that so it does the same thing in WP? What's the procedure for implementing that? My respective template files are as follows:

my page-portfolio template

<?php 

/*

Template Name: Portfolio layout 

*/

?>

<?php get_header(); ?>



<div class="container gallery-container">

    <h1 class="headerTitle" > <?php wp_title(); ?> </h1>

    <p class="page-description text-center"><?php bloginfo('description'); ?></p>

    <div class="tz-gallery">

        <div class="row">




            <?php

            $args = array(

                    'post_type' => 'portfolio'


            );

            $query = new WP_Query( $args );

            ?>



            <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>


                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <a class="lightbox" href="http://localhost:8888/wordpress_local/wp-content/uploads/2018/01/traffic.jpg">
                            <?php the_post_thumbnail( 333, 249 ); ?>
                        </a>
                        <div class="caption">
                            <h3><?php the_title(); ?></h3>
                            <p><?php the_field('editor'); ?></p>
                        </div>
                    </div>
                </div>


            <?php endwhile; endif; wp_reset_postdata(); ?>


        </div>

    </div>

</div>



<?php get_footer(); ?>

my header.php

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title><?php wp_title(); ?></title>

    <?php wp_head(); ?>

</head>

<body <?php body_class(); ?> > 



    <!-- Conditional For Edit Menu to Adjust with Logged in Users -->
    <?php

    if ( is_admin_bar_showing() ) {     

        echo '<style type="text/css"> .navbar.navbar-inverse.navbar-fixed-top {margin-top: 32px;} </style>'; 

    }


    ?>

    <!-- END Conditional Edit for Logged in Users -->


    <div class="navbar navbar-inverse navbar-fixed-top"  >
      <div class="container">



        <div class="navbar-header"> <!-- contains toggle and brand -->

          <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>


          <a href="<?php bloginfo('url'); ?>" class="navbar-brand"><?php bloginfo('name'); ?></a>
        </div>

        <div class="navbar-collapse collapse">



            <?php
            wp_nav_menu( array(
                'theme_location'    => 'primary-menu',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
                'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                'walker'            => new WP_Bootstrap_Navwalker(),
            ) );

            ?>


        </div><!--/.nav-collapse -->
      </div>
    </div>

my footer.php

<?php wp_footer(); ?>

</body>

<!-- script for intiating tz-gallery -->

<script type="text/javascript"> 

baguetteBox.run('.tz-gallery');

</script>

</html>
Improve this question
1
  • I need a WP function that grabs the URL and presents it in a URL format to the browser. Does this work? <?php get_post_field($context = 'display'); ?> Any help is appreciated.
    – Greg Schudel
    Jan 26, 2018 at 22:03

2 Answers 2

Reset to default
1

I got the answer from someone else and got it working. To summarize, the problem was not having the right use of WP functions to call the custom post thumbnail image dynamically. Hence the BueggetteBox.js plugin (a lightbox plugin) functionality would work properly when you clicked on a custom post thumbnail from the gallery within my freshly made custom WP theme.

This is what I had originally in my custom template file (page-portfolio.php)

        <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>


            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <a class="lightbox" href="http://localhost:8888/wordpress_local/wp-content/uploads/2018/01/traffic.jpg">
                        <?php the_post_thumbnail( 333, 249 ); ?>
                    </a>
                    <div class="caption">
                        <h3><?php the_title(); ?></h3>
                        <p><?php the_field('editor'); ?></p>
                    </div>
                </div>
            </div>


        <?php endwhile; endif; wp_reset_postdata(); ?>

Here is the solution that worked. I replaced the above with the below code using the get_post_thumbnail_id() , wp_get_attachment_image_src($thumb_id,'full', true); and then applied the $thumbn_nail property to the hyperlink. See below for implementation:

        <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>

            <?php

            $thumb_id = get_post_thumbnail_id();

            $thumb_url = wp_get_attachment_image_src($thumb_id,'full', true);

            ?>


            <div class="col-sm-6 col-md-4"><!-- get_post_field -->
                <div class="thumbnail">
                    <a class="lightbox" href="<?php echo $thumb_url[0]; ?>">
                        <?php the_post_thumbnail( 333, 249 ); ?>
                    </a>
                    <div class="caption">
                        <h3><?php the_title(); ?></h3>
                        <p><?php the_field('editor'); ?></p>
                    </div>
                </div>
            </div>


        <?php endwhile; endif; wp_reset_postdata(); ?>

annnnnnnnnd presto! Now it works fine!

Improve this answer
2
  • I misunderstood you, but then this wasn't an issue with the lightbox, the issue was you didn't know how to get the full sized picture from WP?
    – D. Dan
    Feb 2, 2018 at 20:15
  • Kinda. The issue was I didn't know how to utilize the lightbox plugin (called BueggetteBox.js, scroll up) to work with my custom post types.
    – Greg Schudel
    Feb 13, 2018 at 16:52
0

To implement a Custom Lightbox solution yourself you need:

  • A thumbnail image
  • An anchor to wrap the thumbnail image with the full size image as href
  • A div to dim the whole page
  • A div to place the full size image in
  • Some css to style the div-s
  • JS code to put the image to the div and bring to front the div-s

Let's begin with the simple things, the div-s:

<div class="my-black-box">
  <div class="my-light-box">
  </div>
</div>

You would put these somewhere in the bottom of the page-portfolio template, let's say after the container, but before the footer.

You also need styling for theese:

.my-black-box{
display: none;
}

We'll just hide them for now.

For the JS you could use:

$('.lightbox').on('click', function(e){  //when we click on the lightbox link
  e.preventDefault(); // do not open the picture
  var picUrl = $(this).attr('href'); // instead we extract the picture url
  picUrl = '<img src="' + picUrl + '">'; // make an img tag from it
  $('.my-light-box').html(picUrl); // put the picture in the lighbox
  $('.my-black-box').addClass('open');  // add a class for the css to be defined
});

And for the css when the lightbox is open:

.my-black-box.open{
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.6);
}

.my-black-box.open .my-light-box{
position: absolute;
max-width: 80vw;
max-height: 80vh;
width: 80vw;
height: 80vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.my-black-box.open .my-light-box img{
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

This should center everything. And finally if we click on the black-box it should close:

$('.my-black-box').on('click', function(){
  $(this).removeClass('open');
});

Edit: of course this is just the basic, you could expand it by implementing next a previous button, close button, more styling, animations. But if you're doing a custom WP theme, something like this, in terms of a basic conception is the way to start a custom lightbox.

Improve this answer
8
  • Can't I just put a function in the href tag? Like this? <?php get_post_field(‘post_type’); ?> I tried doing that it only loops the WP webpage. I think creating my own custom lightbox would be a little unnecessary at this point.
    – Greg Schudel
    Jan 31, 2018 at 15:18
  • I don't understand how would you do that? It doesn't make sense. You can't assign a php function to a href tag. Just JS. On the other hand you said: All I want to do is click on one of my thumbnails and have blow up and show on the page while making the background dim (like in the original), see the example from the link above. - the above code does exactly that. As for the baguetteBox.js - unfortunately I know exactly as much as you, or less.
    – D. Dan
    Jan 31, 2018 at 15:35
  • I can try the code above, but I find it strange that there is not a simpler solution with the native php functions in WordPress to be accomdating to the existing plugin functionality. Also, you said the above is JS, but this is NOT vanilla JS right? Doesn't your suggested code above use jquery?
    – Greg Schudel
    Jan 31, 2018 at 15:46
  • It is jQuery. You didn't said you wanted pure JS. As far as php if your js scripts are loading ok, there is nothing else you can do in it(are they loading properly?). You need JS be it baguette, some other library or custom code vanilla js or not for lighbox to work. Does the console say something?
    – D. Dan
    Jan 31, 2018 at 16:01
  • Console's clean. I resolved all errors before posting my issue on this forum. I just find it strange to go to great lengths to create your own lightbox for the gallery when I've seen tutorials on how to implement a boostrap theme into a WP theme without a custom lightbox. I'll consider what your proposing and I do appreciate your help! Though to be honest, I'm confused why I haven't heard from anyone else on how to resolve this very simple issue. Perhaps I provided too many details instead of not enough??
    – Greg Schudel
    Feb 1, 2018 at 16:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.