Topic: Masonry Layout with custom taxonomy templates. | WP Masonry Layout

Masonry Layout with custom taxonomy templates.

Home Forums Pro Version Masonry Layout with custom taxonomy templates.

This topic contains 7 replies, has 2 voices, and was last updated by  Masonry Guy 1 month, 1 week ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #14944 Reply

    Sandra Saenz
    Participant

    Hi,

    I’ve created my own post type and taxonomy via CPT UI plugin. Now my code looks like:

    
    <?php
    
    $taxonomy = get_queried_object()->slug;
    
    $args = array(
        'post_type' => 'my_portfolio',
        'posts_per_page'=> 20,
        'tax_query' => array(
            array(
                'taxonomy' => 'portfolio',
                'field'    => 'slug',
                'terms'    =>  $taxonomy,
            ),
        ),
    );
    
    $query = new WP_Query( $args );
    
    if ( $query->have_posts() ) :
    
        /* Start the Loop */
        while ( $query->have_posts() ) : $query->the_post();
    
            /*
             * Include the Post-Format-specific template for the content.
             * If you want to override this in a child theme, then include a file
             * called content-___.php (where ___ is the Post Format name) and that will be used instead.
             */
            get_template_part( 'template-parts/content', 'portfolio' );
    
        endwhile;
    
        the_posts_navigation();
    
    else :
    
        get_template_part( 'template-parts/content', 'none' );
    
    endif; ?>
    
    <?php wp_reset_postdata(); ?>
    

    And template-parts/content-portfolio file:

    
    <?php
    
      $image = get_field ( 'portfolio_photo' );
    
    ?>
    
    <div class="grid-item">
        <a href="<?php echo $image; ?>" data-rel="lightbox">
          <img src="<?php echo $image; ?>" class="img-responsive" alt="">
        </a>
    </div>
    

    This is how I configured Your plugin:
    .

    To my mind, I should use custom query, but I don’t know how. What should I do so that I could start using Masonry Layout plugin?

    Thanks in advance.

    #14947 Reply

    Sandra Saenz
    Participant

    Okey, I’ve added this to my functions.php

    
    add_filter('wmlp_query', 'my_custom_query_wmlp',10,2);
    function my_custom_query_wmlp($args, $shortcodeID){
        $args = array(
            'post_type' => 'my_portfolio',
            'posts_per_page'=> 5,
            'tax_query' => array(
                array(
                    'taxonomy' => 'portfolio',
                    'field'    => 'slug',
                    'terms'    => 'beauty',
                ),
            ),
        );
        return $args;
    }
    

    And this in my taxonomy-portfolio.php:
    <?php echo do_shortcode( '[wmls name="Portfolio" id="3"]' ); ?>

    And now I can see empty containers (but now they are created by Masonry Layout plugin):

    Now I faced two problems:
    1. As You can see, I hard-coded beauty in my functions.php. It should be dependent on the user’s location (taxonomy). As You can see in the code above I get the current taxonomy via $taxonomy = get_queried_object()->slug;. How can I implement this in my case? I can’t use get_queried_object()->slug in functions.php. On my site I have 4 taxonomies: you can find them here.
    2. How can I pass to the Masonry Layout plugin the template that should be used by the plugin? As You can see above I have the template template-parts/content-portfolio and in the code, I am repeating these templates and get url for each image. To my mind, I should pass this template to Your plugin so that it could know what to iterate. I think that because of this I can see just empty containers on the screenshot above instead of the images (plugin doesn’t know what to iterate).

    Any help would be appreciated!

    Thanks once again.

    #14958 Reply

    Masonry Guy
    Keymaster

    Hi Sandra,

    I actually don’t know what you want to achieve here. So let me point our few things you have done might have done wrong here.

    1. If you want to just show the portfolio category you don’t need to use generic shortcode. From post type you can select the portfolio post type. And if taxonomy has been set to your post type, they will be listed while generating the shortcode.

    2. The masonry layout seems working in the snapshot you sent to me. May be the chance that there are no images associated and you are using only image based layout. Have you tried to some other layouts ?

    3. It really doesn’t make sense to use custom filters in functions.php unless you need custom query that our plugin doesn’t support via shortcode generation.

    I am so sorry as the things you have done looks quite odd to me. So please check if the above mention things works for you. If you still have the issue, please let me know what you want to achieve and will try to guide as far as possible.

    Thanks

    #14959 Reply

    Sandra Saenz
    Participant

    Hi,

    thank You for a prompt reply.

    Please take a look on my taxonomy-portfolio.php file:

    
    <?php
    /**
     * The taxonomy template file.
     *
     * @link https://codex.wordpress.org/Template_Hierarchy
     *
     * @package SandraSaenz
     */
    
    get_header(); ?>
    
    	<div class="col-md-12">
            <?php
    
            $taxonomy = get_queried_object()->slug;
    
            $args = array(
                'post_type' => 'my_portfolio',
                'posts_per_page'=> 20,
                'tax_query' => array(
                    array(
                        'taxonomy' => 'portfolio',
                        'field'    => 'slug',
                        'terms'    =>  $taxonomy,
                    ),
                ),
            );
    
            $query = new WP_Query( $args );
    
            if ( $query->have_posts() ) :
    
                /* Start the Loop */
                while ( $query->have_posts() ) : $query->the_post();
    
                    /*
                     * Include the Post-Format-specific template for the content.
                     * If you want to override this in a child theme, then include a file
                     * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                     */
                    get_template_part( 'template-parts/content', 'portfolio' );
    
                endwhile;
    
                the_posts_navigation();
    
            else :
    
                get_template_part( 'template-parts/content', 'none' );
    
            endif; ?>
    
            <?php wp_reset_postdata(); ?>
    	</div><!-- .col-md-12 -->
    
    <?php
    get_footer();
    

    In this line I’ve injected my own template get_template_part( 'template-parts/content', 'portfolio' );. It looks like:

    
    <?php
    
      $image = get_field ( 'portfolio_photo' );
    
    ?>
    
    <div class="grid-item">
        <a href="<?php echo $image; ?>" data-rel="lightbox">
          <img src="<?php echo $image; ?>" class="img-responsive" alt="">
        </a>
    </div>
    

    Also, I’ve changed the plugin’s configuration and removed generic shortcode from the code. You are right. I can choose “Portfolio” post type and also I can select all my categories (taxonomies). Now it looks like:

    The problem is that the plugin doesn’t work for me. Now on my category page I can see this:

    As You can see all the images are laid out in one column and it looks like the plugin doesn’t work on this page (it doesn’t add any classes to my images).

    Thank You for help.

    Best regards,
    Vladyslav Turak

    #14962 Reply

    Sandra Saenz
    Participant

    Hi once again,

    I am sorry for this second post (I just can’t edit or delete the previous one), but I am new in WordPress and don’t know how it works under the hood. So, in the taxonomy-portfolio.php I’ve completely removed my old code and inserted shortcode generated by plugin and now it looks like:

    
    <?php
    /**
     * The taxonomy template file.
     *
     * @link https://codex.wordpress.org/Template_Hierarchy
     *
     * @package SandraSaenz
     */
    
    get_header(); ?>
    
    	<div class="col-md-12">
            <?php
    
                echo do_shortcode( '[wmls name="Portfolio" id="4"]' );
    
            ?>
    	</div><!-- .col-md-12 -->
    
    <?php
    get_footer();
    

    Now it seems to work:

    But the problem is – I can see only titles, but I need images. I am using “Custom Fields” plugin so that client could easily add and edit photos. In my code I get the image with $image = get_field ( 'portfolio_photo' );. And in my old implementation, it worked. What should I do so that the plugin could get and show not only title but images too?

    Thank You.

    #14963 Reply

    Masonry Guy
    Keymaster

    Hi Sandra,

    If you can set the portfolio image as featured it will be visible in the layout. We only display the featured image in our layout.
    However, it can be changed to your custom image code. For that we need little customization.

    Here is the steps to do that.

    1. Please copy the layout to your wordpress theme from Wp Masonry ? Layouts. You can click Copy To WordPress Theme link next to the layout you are using. Once the layout is copied you will get the new location of the layout. This will make update safe for future.

    2. Open layout.php from the new location and replace

    <?php if ($layoutSettings['show_featured_image'] == 'yes'): ?>
    			<?php if ( has_post_thumbnail() ) :?>
                    <div class="wpme_image">
                        <?php echo wmlp_featured_image($shortcodeData); ?>
                    </div>
                <?php endif; ?>
            <?php endif; ?>

    With your image code.

    I still suggest you to use the featured image instead. As it is standard one.

    Thanks

    #14967 Reply

    Sandra Saenz
    Participant

    Hi,

    your solution works like a charm!

    Thank You for help.

    #14968 Reply

    Masonry Guy
    Keymaster

    Hi Sandra,

    Glad it is working for you.

    If you have a few mins for us, can you please write us a review for our plugin at https://wordpress.org/support/view/plugin-reviews/wp-masonry-layout? This will help us grow and makes easier for others to decide to use the plugin.

    Thanks

Viewing 8 posts - 1 through 8 (of 8 total)
Reply To: Masonry Layout with custom taxonomy templates.
Your information: