Javascript help customizing Portfolio Grid

If you don’t know the shortcode itself, try var_dumping (in PHP) global $shortcode_tags. Shortcodes are PHP based. Shortcodes can be executed with do_shortcode(). You can pass the returned value via wp_localize_script() to JavaScript. In JS you can then assign the passed content to an HTML container.

@bcworkz

I’m circling back to this. Been trying the API route but I’ve run into many roadblocks.

I’ll read up on shortcode functions as mentioned above but my question now is more about where to execute these. The admin created a child theme that has a functions.php file. Can I use that for this short code or do I have to make these updates directly in the functions.php file in stored in the theme folder for the site?

My plan, if I’m understanding this correctly, is to generate the short code in the child theme’s functions.php and then pass the return value to JS that will be written in the block editor’s advanced section of the page this return information will be displayed.

Does this make any sense or am I looking at this all wrong?

A child theme’s functions.php is usually OK. However, for organizational reasons alone, it could make more sense to place your code in a custom, site specific plugin. Additionally, some child themes are actually commercial themes based on a common framework theme. If it’s one of those, as opposed to a bespoke child theme, you are maybe better off using a plugin.

That said, the principal reason for child theme or site specific plugin is to avoid having your code wiped out during an update. If there is no chance of something being updated by file replacement, there is little reason to not add you code; other than it could be organizationally messy.

I’m not following what your intended plan actually entails. The default advanced section for blocks does not have a field that’s appropriate for writing normal content, they are for element attributes like class or id. There’s a dedicated block for shortcodes, but I’m not clear why you’d be creating your own shortcode. To insert inline JS? That’s reasonable for short bits of code, but for more extensive JS you probably should enqueue it as an external file. By enqueuing, you can then pass data to JS through wp_localize_script()

This still hasn’t answered where the data is coming from. You seemed to indicate in your OP that it comes from a shortcode. You could have your PHP code get that shortcode’s returned value and pass it to your JS. Ideally IMO, the content you want to display on click would be part of the tile’s output, but hidden from view. Then you script only needs to make it visible, then hidden again on dismissal or clicking something else. But if it’s difficult to influence tile output, maybe it’s not meant to be.

If the content you need comes from a shortcode, where does the shortcode handler get the data? It may be better to go directly to the source instead of going through the shortcode.

@bcworkz

I located the plugin file that generates the cards for that page and I copied it to the child theme. Now I just need to figure out how to override the plugin’s template with mine. I think this commented out section is the info that I am looking for. If that’s the case perfect!

<?php
    global $post, $more, $aux_content_width;
    $more = 0; // to enable read more tag

    // the image width is 63% of wrapper
    $media_width = $aux_content_width * 0.63;
    $image_aspect_ratio = 0.65;

    $post_vars   = auxpfo_get_portfolio_config( $post, array(
        'request_from'       => 'archive',
        'media_width'        => $media_width,
        'media_size'         => 'large',
        'upscale_image'      => true,
        'crop'               => true,
        'add_image_hw'       => true,
        'image_sizes'        => array(
            array( 'min' => '', 'max' => '1024px', 'width' => '100vw' ),
            array( 'min' => '', 'max' => '',       'width' => $media_width.'px' )
        ),
        'srcset_sizes'  => array(
            array( 'width' =>     $media_width, 'height' =>     $media_width * $image_aspect_ratio ),
            array( 'width' => 2 * $media_width, 'height' => 2 * $media_width * $image_aspect_ratio ),
            array( 'width' => 4 * $media_width, 'height' => 4 * $media_width * $image_aspect_ratio )
        )
     ) );
    extract( $post_vars );

    // Add class name for custom styles
    $land_item_class_name = auxin_get_option( 'show_portfolio_land_side_entry_box_colors' ) ? ' aux-item-land' : '';

?>
                        <article <?php post_class( 'aux-single-portfolio-wrapper aux-portfolio-land' . $land_item_class_name ); ?> >
                            <?php if ( $has_attach ) { ?>
                            <div class="entry-media">
                                <?php echo $the_media; ?>
                            </div>
                            <?php
                               }else { ?>
                                    <div class="entry-media">
                                        <div class="aux-media-frame aux-media-image">
                                            <a href="<?php echo !empty( $the_link ) ? $the_link : get_permalink(); ?>">
                                                <img src="<?php  echo AUXIN_URL . 'images/welcome/image-frame.svg'; ?>" class="auxin-attachment auxin-featured-image attachment-1024x1024" alt="portfolio default image" >
                                            </a>
                                        </div>
                                    </div>
                            <?php   }
                            ?>
                            <div class="aux-land-side">
                                <div class="entry-main">

                                    <header class="entry-header">
                                        <h3 class="entry-title">
                                            <a href="<?php echo !empty( $the_link ) ? $the_link : get_permalink(); ?>">
                                                <?php echo !empty( $the_name ) ? $the_name : get_the_title(); ?>
                                            </a>
                                        </h3>
                                    </header>

                                     <div class="entry-content">
                                        <?php

                                           // $content_listing_type   = is_category() || is_tag() ? auxin_get_option( 'post_taxonomy_archive_content_on_listing' ) : auxin_get_option( 'blog_content_on_listing' );
                                          //  $content_listing_length = is_category() || is_tag() ? auxin_get_option( 'post_taxonomy_archive_on_listing_length', 255 ) : auxin_get_option( 'excerpt_len', 255 );

                                            // get overview context
                                            $_overview = auxin_get_post_meta( $post, '_overview' );

                                            if( has_excerpt() ) {
                                                the_excerpt();
                                            } elseif( ! empty( $_overview )  ){
                                                auxin_the_trimmed_string( auxin_strip_shortcodes( auxin_extract_text( $_overview ) ), 170 );
                                            }

                                        ?>
                                    </div>
                                </div>

                                <footer class="entry-meta">
                                    <div class="portfolio-tax">
                                        <span class="entry-tax">
                                        <?php // the_category(' '); we can use this template tag, but customizable way is needed! ?>
                                        <?php $tax_name = 'portfolio-cat';
                                              $cat_terms = wp_get_post_terms( $post->ID, $tax_name );
                                              if( $cat_terms = wp_get_post_terms( $post->ID, $tax_name ) ){
                                                  foreach( $cat_terms as $term ){
                                                      echo '<a href="'. get_term_link( $term->slug, $tax_name ) .'" title="'.__("View all posts in ", 'auxin-portfolio'). $term->name .'" rel="category" >'. $term->name .'</a>';
                                                  }
                                              }
                                        ?>
                                        </span>
                                        <?php if( ! empty($cat_terms) ){
                                            edit_post_link(__("Edit", 'auxin-portfolio'), '<i> | </i>', '');
                                            } else {
                                                edit_post_link(__("Edit", 'auxin-portfolio'), '', '');
                                            }
                                        ?>
                                    </div>
                                    <?php
                                    if( function_exists('wp_ulike') && auxin_get_option( 'show_portfolio_archive_like_button' ) ) { ?>
                                        <div class="comments-iconic">
                                            <?php
                                                wp_ulike( 'get', array( 'style' => 'wpulike-heart', 'button_type' => 'image', 'wrapper_class' => 'aux-wpulike aux-wpulike-portfolio-widget' ) );
                                            ?>
                                        </div>
                                    <?php  } ?>

                                </footer>

                            </div>

                        </article>

I think this link has the info I need to override the plugin template, but it’s a bit above my head currently. Seems to be exactly what I’m looking to accomplish though.

https://deliciousbrains.com/wordpress-plugin-development-template-files/

I don’t know what auxin_*() functions do, but it does look promising. Try it! ??

It looks like if you put the desired tile text in the dedicated excerpt field that it’ll be displayed somehow, without changing a thing.

I don’t know how the content will appear, it could be static text below the image, so there could be more to do to get on click behavior. But having content already there to work with gets you over a major hurdle. Nice work sleuthing out the related code!