jquery - Replacing Image Source Value With a PHP Variable Based on Device Width -
i'd able able swap img's src value variable created in php.
i using javascript determine device width. happening within .php file containing wordpress loop. upon recognizing device width, change img's src value accordingly.
i can retrieve php variables using js function when function written in loop, , know, duplicate function each post , resulting in error.
i need able calculate these given php variables outside loop , inject them img src value inside loop.
i recognize may have more errors in code looking resolve! have been working on time , particular issue has become quite troubling. in advance.
current code in use:
<?php query_posts( array ( 'home' => 'wordpress themes', 'orderby' => 'rand', 'posts_per_page' => -1 ) ); ?> <?php while ( have_posts() ) : the_post(); ?> <script> function getimagepath(){ if (window.matchmedia('(max-device-width: 1920px)').matches) { var thesizedimage = <?php the_field('desktop_image'); ?> }if (window.matchmedia('(max-device-width: 1280px)').matches) { var thesizedimage = <?php the_field('tablet_image'); ?> }if (window.matchmedia('(max-device-width: 600px)').matches) { var thesizedimage = <?php the_field('mobile_image'); ?> } return thesizedimage; } </script> <img src="pixel.gif" onload="this.onload=null; this.src=getimagepath();" /> <?php endwhile; wp_reset_query(); ?>
so after further tinkering, able come solution. in fact work, wonder if there far more elegant solution. note query has changed improved page , took care of errors. main problem above code variables image urls getting defined once. solution have provided below rerun each of posts in loop.
<?php query_posts( array ( 'category__not_in' => array( 1, 4, 5, 6, 7 ), 'orderby' => 'rand', 'posts_per_page' => -1 ) ); ?> <?php while ( have_posts() ) : the_post(); ?> <script> if (screen.width <= 1920) {document.write("<img src='<?php the_field('desktop_image');?>' />");} if (screen.width <= 1280) {document.write("<img src='<?php the_field('tablet_image');?>' />");} if (screen.width <= 600) {document.write("<img src='<?php the_field('mobile_image');?>' />");} if (screen.width > 1920){document.write("<img src='<?php the_field('full_resolution');?>' />");} </script> <?php endwhile; wp_reset_query(); ?>
Comments
Post a Comment