Changed cloned content with PHP and jQuery

Question

In a template, I want to clone the content of "#content-standard" into #content-blue. That is done in jQuery and works fine. The cloned content gets different styling, which is set in its new parent with class "new-bgcolor".

HTML

<div class="content-wrapper">
<div class="content-container-main">    
    <div id="content-blue" class="new-bgcolor"> 
    </div>
</div>    
<div id="content-standard">
    <main id="front-page" role="main">
    <?php $args = array('posts_per_page'=>1,'cat=-2'); 
        if(!isset($loopfront)){ $loopfront='';} $loopfront = new WP_Query($args); 
        while ( $loopfront->have_posts() ) { $loopfront->the_post(); get_template_part( './parts/content', 'page' );}unset($loopfront); ?>
    </main>             
</div>

But after cloning, I need to replace a certain piece of this content to match with the new styling from new-bgcolor.

The content from content-standard get generated by fetching the theme part content-page.php in the folder parts. For content-standard inside the div content-blue, I need to load another template part, which loads a function. What this function does is cloning and altering an uploaded image with an iMagick script and extends the name so the changed image doen't overwrite the original.

So template part "content-page.php" with #content-standard" loads an image "//localhost:3000/content/uploads/2017/09/image.jpg", template part "content-page_blue.php" should load "//localhost:3000/content/uploads/2017/09/image-blurred.jpg"

content-page_blue.php gets the blurred image by this function.

<?php $page = get_post(); $image_alt = get_post_meta( $page->ID, '_wp_attachment_image_alt', true); $featured = wp_get_attachment_image( get_post_thumbnail_id($page->ID), 'full' ); $thumb_id = get_post_thumbnail_id();  $thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true); $path = pathinfo($thumb_url[0]); $extension = pathinfo($thumb_url[0], PATHINFO_EXTENSION); $newfilename = $path['filename']."-blurred"; $newfile = $path['dirname']."/".$newfilename.".".$extension; $thumbs = get_field('thumbs', $page->ID);?><?php if($featured) { ?> <div id="post-featured-<?php echo $post->ID; ?>" class="post-image"><a href="<?php the_permalink(); ?>"><img src="<?php echo $newfile; ?>"/></a><p><?php echo get_post(get_post_thumbnail_id())->post_excerpt;?></p></div><?php } ?>

This is also tested and works fine in a previous setup. The problem with the new setup is that I can't seem to load "content-page_blue.php" in the cloned div. My knowledge of jQuery is limited and I used this:

$("#content-standard").clone().appendTo("#content-blue"); var newContent = $('#content-blue').siblings('#content-standard'); $('#content-blue').load("parts/content-page_blue.php" + newContent);

It can't find the template part and bounced an

404 Error http://localhost:3000/parts/content-page_blue.php

Maybe this has got to do with the WP Skeleton setup (which puts the content and WP folder in a public folder) in combination of the page that loads the script is different from the template parts? It looks like this: theme setup. Any help is appreciated and sorry for the long story.

newContent is a jQuery object, why are you concatenating it in the load function ? — adeneo
The idea was to point to the div with #content-standard inside to parent div ##content-blue. Is it better to do $('#jl-gold').load("./parts/content-page_gold.php #jl-gold > #jl-standard"); ? After posting this I learned that the path is relative to the page that loaded the script, so I should find a way to redirect to another folder. If that's possible anyway. — Mike Branch
In load you can fetch content from an element inside the loaded page, but you have to pass a string, like .load("mypage.php #elem"), right now you're passing in an jQuery object, and end up with the same as .load("mypage.php[object, Object]") — adeneo
Thank you for clearing the method. The files that are supposed to communicate with each other are scattered in different subfolders. Is the load method still the best way to do this? — Mike Branch
Problem solved. Unfortunately I didn't find a solution for the scenario as stated above. Maybe AJAX is the solution for this, but I'll get back to this, when there time for experiment. For now, my approach was too complicated from the start. Th wrap it short, I wanted to use a PH function to be used in different PHP file then where this function was declared and call it using jQueury. Little did I know, I could write a similar function in jQuery which makes it easy to call upon any wished element. — Mike Branch

Mike Branch Mike Branch · Accepted Answer · 2017-09-28T12:33:05

Instead of the PHP function, a friend of mine told me it could be done exactly the same in jQuery. Here's the result.

function swapImages() { var images = $('images-containing-div').find('img'); images.each(function( index ) { var src_name = $(this).attr('src') if ( src_name.length ) {  var temp_name = src_name.substring(0, src_name.length - 4); var new_name = temp_name + "-blurred.jpg"; $(this).attr('src', new_name); } });}  swapImages();

Hope this helps anyone.

Changed cloned content with PHP and jQuery

1 Answers