I have difficulties in understanding how to manage single and double quotes inside a JavaScript event inside a php block.
This is the code:
<?php
$mainImagePath = '';
$galleryImages = $this->getGalleryImages();
if (count($galleryImages) > 0) {
$gallery = '<div class="more-views">';
$gallery .= '<h2>' . $this->__('More Views') . '</h2>';
$gallery .= '<ul>';
foreach ($galleryImages as $_image) {
if ($_image->getFile() == $_product->getData('small_image')) {
$mainImagePath = $this->getGalleryUrl($_image);
}
$gallery .= '<li>'
. '<a href="' . $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()) . '" '
. 'rel="popupWin:\'' . $this->getGalleryUrl($_image) . '\', useZoom: \'cloudZoom\', smallImage: \'' . $this->getCloudImage($this->getProduct(), $_image) . '\'" class="cloud-zoom-gallery" title="' . $this->htmlEscape($_image->getLabel()) . '" onmouseover="$(\'image\').src = "'.$this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(256).'"; return false;">'
. '<img src="' . $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56) . '" width="56" height="56" alt="' . $this->htmlEscape($_image->getLabel()) . '" />'
. '</a></li>';
}
$gallery .= '</ul></div>';
}
?>
The problem is the onmouseover event, which has a .src method that expects the value to be inside double quotes, but putting double quotes inside that string breaks the rest.
I already tried putting the needed value in a variable and echoing the variable, but that didn't work either.
How can I correctly escape quotes there?
onmouseover="$(\'image\').src = "'.$this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(256).'"; return false;">
use single quote
onmouseover="$(\'image\').src = \''.$this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(256).'\'; return false;">
I would recommended writing out the html / javascript first and then simply echo the php vars into their correct places. You will not have to do any escaping and it makes for more maintainable code.
Your IDE will also be able to correctly apply syntax highlighting
<?php
$mainImagePath = '';
$galleryImages = $this->getGalleryImages();
?>
<?php if(count($galleryImages) > 0) { ?>
<div class="more-views">
<h2><?php echo $this->__('More Views'); ?></h2>
<ul>
<?php foreach ($galleryImages as $_image) { ?>
<?php
if ($_image->getFile() == $_product->getData('small_image')) {
$mainImagePath = $this->getGalleryUrl($_image);
}
?>
<li>
<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="popupWin:'<?php echo $this->getGalleryUrl($_image); ?>', useZoom: 'cloudZoom', smallImage: '<?php echo $this->getCloudImage($this->getProduct(), $_image); ?>'" class="cloud-zoom-gallery" title="<?php echo $this->htmlEscape($_image->getLabel()); ?>" onmouseover="$('image').src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(256); ?>"; return false;">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56) ;?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()); ?>">
</a>
</li>
<?php } ?>
</ul>
</div>
Related
I assembled a Wordpress shortcode but it throws an error in the block editor: "Updating failed. The response is not a valid JSON response." Notwithstanding, the edits are saved. I've been told the reason I get the error is my "shortcode handler function is generating output. Such functions must collect all output into a variable which is returned."
Below are (1) the code that works but causes the error message and (2) my pseudo code to fix the problem by assigning the 'a href' to a variable $html, but doesn't.
(1)
function make_header() {
$args = array(
'posts_per_page' => 1,
'category_name' => 'headlines',
);
$q = new WP_Query( $args);
if ( $q->have_posts() ) {
while ( $q->have_posts() ) {
$q->the_post();
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
?>
<a href="<?php the_permalink() ?>">
<div><img src="<?php echo $featured_img_url; ?>" width="100%" /></div>
<h2>
<?php the_title(); ?>
</h2></a>
<?php
}
wp_reset_postdata();
}
}
add_shortcode('make_header', 'make_header');
(2)
$html = '
<a href="<?php the_permalink() ?>">
<div><img src="<?php echo $featured_img_url; ?>" width="100%" /></div>
<h2>
<?php
the_title(); ?> </h2></a>';
}
wp_reset_postdata();
return $html;
Thanks for your help.
Try below code
$html = ' <div><img src="'. echo $featured_img_url .'" width="100%" /></div> <h2>'. the_title().' </h2>';
the concatenation operator (‘.‘), which returns the concatenation of its right and left arguments.
You could to use concatenation like so:
$html = '<a href="' . esc_url(get_the_permalink()) . '">';
$html .= '<div>';
$html .= '<img src="' . $featured_img_url . '" width="100%" />';
$html .= '</div>';
$html .= '<h2>' . get_the_title() . '</h2></a>';
Also, use get_the_permalink() and get_the_title() as these functions are returning their result instead of outputting it.
The full code would then look something like this:
function make_header() {
$html = '';
$args = array(
'posts_per_page' => 1,
'category_name' => 'headlines',
);
$q = new WP_Query( $args);
if ( $q->have_posts() ) {
while ( $q->have_posts() ) {
$q->the_post();
$featured_img_url = esc_url(get_the_post_thumbnail_url(get_the_ID(),'full'));
$html = '<a href="' . esc_url(get_the_permalink()) . '">';
$html .= '<div>';
$html .= '<img src="' . $featured_img_url . '" width="100%" />';
$html .= '</div>';
$html .= '<h2>' . get_the_title() . '</h2></a>';
}
wp_reset_postdata();
}
return $html;
}
add_shortcode('make_header', 'make_header');
<?php
$recent_posts = wp_get_recent_posts(array('post_type'=>'projet'));
foreach( $recent_posts as $recent ){
echo '<li><a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' . $recent["post_title"].'</a> </li> ';
if ( has_post_thumbnail( $recent["ID"]) ) {
echo get_the_post_thumbnail($recent["ID"],'thumbnail');
}
if (has_excerpt($recent["ID"]) ){
// echo get_the_excerpt($recent["ID"],'the_excerpt');
echo '<p class="excerpt">' . get_the_excerpt($recent["ID"],'the_excerpt') . '</p>';
}
}
?>
Hi, I would like to know how to put all my foreach loop inside a div ? I want each $recent_posts to be inside a div, right now they're one after the other. (btw it's my first post here, excuse me if i'm not clear)
##EDIT##
Here's my html :
<h2>Maquette UX/UI</h2> <img width="150" height="150" src="http://localhost/wordpress/wp-content/uploads/2021/04/vignette_maquette-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image"
alt="" loading="lazy" />
<p class="excerpt">Projet 1</p>
<h2>Intégration Baniera</h2> <img width="150" height="150" src="http://localhost/wordpress/wp-content/uploads/2021/04/vignette_baniera_homepage-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image"
alt="" loading="lazy" />
<p class="excerpt">Projet 2</p>
<h2>Intégration PHP</h2> <img width="150" height="150" src="http://localhost/wordpress/wp-content/uploads/2021/04/order_homepage-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image"
alt="" loading="lazy" />
<p class="excerpt">Projet 3</p>
<p class="excerpt"></p>
</div>
And I want every "group" to be inside a div, right now they're all together
Ok it works now, I wrapped the content of foreach like so :
<?php
$recent_posts = wp_get_recent_posts(array('post_type'=>'projet'));
foreach( $recent_posts as $recent ){
echo '<div class="foreach_wrapper">';
echo '<h2><a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' . $recent["post_title"].'</a></h2> ';
if ( has_post_thumbnail( $recent["ID"]) ) {
echo get_the_post_thumbnail($recent["ID"],'thumbnail');
}
if (has_excerpt($recent["ID"]) ){
// echo get_the_excerpt($recent["ID"],'the_excerpt');
echo '<p class="excerpt">' . get_the_excerpt($recent["ID"],'the_excerpt') . '</p>';
}
echo '</div>';
}
?>
You can echo a div around the foreach, a little side note, you are using a <li> element but forgot the <ul> wrapper please validate your HTML with a HTML validator.
<?php
echo '<div>'; /* I added this */
$recent_posts = wp_get_recent_posts(array('post_type'=>'projet'));
foreach( $recent_posts as $recent ){
echo '<li><a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' . $recent["post_title"].'</a> </li> ';
if ( has_post_thumbnail( $recent["ID"]) ) {
echo get_the_post_thumbnail($recent["ID"],'thumbnail');
}
if (has_excerpt($recent["ID"]) ){
// echo get_the_excerpt($recent["ID"],'the_excerpt');
echo '<p class="excerpt">' . get_the_excerpt($recent["ID"],'the_excerpt') . '</p>';
}
}
echo '</div>'; /* I added this */
?>
add_filter('wp_nav_menu_objects', 'my_wp_nav_menu_objects', 10, 2);
function my_wp_nav_menu_objects( $items, $args ) {
// loop
foreach( $items as &$item ) {
// vars
$image = get_field('menu_item_image', $item);
// append image
if( $image ) {
$item->title .= '<img class="ttl" src="' . <?php echo
$image['url']; ?> . '" alt="' . <?php echo $image['alt']; ?> . '" />';
}
}
// return
return $items;
}
What am I doing wrong? New to PHP and WordPress functions. The problem seems to be in the append image section.
replace this:
$item->title .= '<img class="ttl" src="' . <?php echo
$image['url']; ?> . '" alt="' . <?php echo $image['alt']; ?> . '" />';
for this
$item->title .= '<img class="ttl" src="' .$image['url']. '" alt="' . $image['alt'] . '" />';
you cannot use this <?php echo $image['alt']; ?> inside echo '...'
Reference: http://php.net/manual/en/function.echo.php
Here is the problem that while looping the php in while loop in w3-row-padding of w3 responsive layout . The layout breaks
Here is the source code
<?php
$r=0;
while($r<ceil($fetch_row_count/4))
{ ?>
<div class="w3-row-padding w3-padding-16 w3-center" style="clear:both" id="food">
<?php
while($row=mysqli_fetch_array($res))
{
?>
<div class="w3-quarter">
<img src="admin/uploads/<?php echo $row['image']; ?>" alt="noodles" style="width:50%">
<h3><?php echo $row['title']; ?></h3>
<p><?php echo $row['description']; ?> </p>
</div>
<?php
}
$r++;
}
?>
</div>
Thanks for reply and comments in advance
That bottom div was not being added for each of your padded containers.
The way the code is written you are adding a padded container and then adding your w3-quarter div for each of your result sets and then repeating that a bunch of times with what looks like to me the same set of data in each one.
What you are probably trying to accomplish is just making one padded div and then echo out your result set with the w3-quarter divs inside of it.
Here is your original way with the bottom div corrected:
<?php
$r=0;
while($r<ceil($fetch_row_count/4)) {
echo
'<div class="w3-row-padding w3-padding-16 w3-center" style="clear:both" id="food">';
while($row=mysqli_fetch_array($res)){
echo
'<div class="w3-quarter">' .
'<img src="admin/uploads/' . $row['image'] . '" alt="noodles" style="width:50%">' .
'<h3>' . $row['title'] . '</h3>' .
'<p>' . $row['description'] . '</p>' .
'</div>';
}
$r++;
echo
'</div>';
}
?>
Here is the way I think you are trying to do it: (Just guessing)
<?php
echo
'<div class="w3-row-padding w3-padding-16 w3-center" style="clear:both" id="food">';
$r = 0;
while($row=mysqli_fetch_array($res)){
echo
'<div class="w3-quarter">' .
'<img src="admin/uploads/' . $row['image'] . '" alt="noodles" style="width:50%">' .
'<h3>' . $row['title'] . '</h3>' .
'<p>' . $row['description'] . '</p>' .
'</div>';
$r++;
//I would not actually try to control how many results you add like this.
//I would get the results from a better formatted query.
if($r < ceil($fetch_row_count/4)){
break;
}
}
echo
'</div>';
?>
So I am using Wordpress and I have to have a specific logo on a specific page. From research I have to use conditional logic to swap the existing logo with another depending on the current page. Everything I have tried seems to just break the theme.. Any help on guiding me in the correct direction? So basically every page except page_id=79 would have the same logo in the header.
<a id="logo" href="<?php echo home_url(); ?>">
<?php
if(!empty($options['use-logo'])) {
$default_logo_id = (!empty($options['retina-logo'])) ? 'id="default-logo"' : null;
echo '<img '.$default_logo_id.' alt="'. get_bloginfo('name') .'" src="' . $options['logo'] . '" />';
if(!empty($options['retina-logo'])) echo '<img id="retina-logo" alt="'. get_bloginfo('name') .'" src="' . $options['retina-logo'] . '" />';
} else { echo get_bloginfo('name'); }
?>
</a>
<?php if ( is_page(79) ) { ?>
What to displayed on page 79.
<?php } else { ?>
What will be displayed everywhere else.
<?php } ?>
This should work.
Try using get_queried_object_id();
<a id="logo" href="<?php echo home_url(); ?>">
<?php
if(!empty($options['use-logo']) && get_queried_object_id() != 79) {
$default_logo_id = (!empty($options['retina-logo'])) ? 'id="default-logo"' : null;
echo '<img '.$default_logo_id.' alt="'. get_bloginfo('name') .'" src="' . $options['logo'] . '" />';
if(!empty($options['retina-logo'])) echo '<img id="retina-logo" alt="'. get_bloginfo('name') .'" src="' . $options['retina-logo'] . '" />';
} else { echo get_bloginfo('name'); }
?>
</a>
The url of your logo image is contained within $options['logo']. You should be able to modify this in the admin section of your WordPress installation (try looking in "Appearance -> Header").