This is the code When I upload an image by "Add media" button.
<p><img class="alignleft wp-image-197 size-full" src="http://bebe15594.staging-cloud.partnerconsole.net/wp-content/uploads/Brains-like-a-pack-of-cards-Card-Placeholder.png" alt="Brains like a pack of cards - Card Placeholder" width="470" height="663" /></p>
But when I save/update the above code changes to
<p><img class="\"alignleft" src="\"http://bebe15594.staging-cloud.partnerconsole.net/wp-content/uploads/Brains-like-a-pack-of-cards-Card-Placeholder.png\"" alt="\"Brains" width="\"470\"" height="\"663\"" /></p>
Can anyone tell me why it's acting like this?
what can I do to fix this problem??
Add this code to your functions.php file:
function wpse72941_content_filter( $content ) {
$new_content = '';
foreach( preg_split( '/((\r?\n)|(\r\n?))/', $content ) as $line ) {
$new_content .= preg_replace( '/^>/', '>', $line ) . '\r\n';
}
return $new_content;
}
add_filter( 'the_content', 'wpse72941_content_filter', 1 );
You don't specify where your line of code is, i.e. a custom template, the normal 'add post' page, etc. If it's a custom template, add wp_print_scripts('media-upload'); before you enque your own script/s, and after wp_enque_script('jquery');. This is assuming you are using wp_editor to upload the images.
Related
After updating plugins, my "Read more" button on posts changed it's name. In Latvian language it was "Lasīt vairāk", while in Russian "Читать дальше". It's just in plain English. The image of how it looks now is via this link. Plugin updates basically wiped out the padding and the name of the button.
Tried modifying functions.php with
// Replaces the excerpt "Read More" text by a link
function modify_read_more_link() {
return '<a class="read-article" href="' . get_permalink() . '">Your Read
More Link Text</a>';
}
add_filter( 'the_content_more_link', 'modify_read_more_link' );
// Replaces the excerpt "Read More" text by a link
function new_excerpt_more($more) {
global $post;
return '<a class="read-article" href="'. get_permalink($post->ID) . '">
Read the full article...</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');
Tried loco translate and modifying internal translations of Elementor-related plugins. The closest I could get is that the elements is named "eael-post-elements-readmore-btn". Styling the element with CSS doesn't do anything. Padding or margin do not work. It's locked. Can anyone provide a hint?
The button should be in Latvian and Russian language, not in English.
PS. Figured that it is Elementor posts plugin related overriding functions.php and translators as well. At this moment, can't figure how to CSS this thing. Stays static.
Add this in functions.php:
function develop_custom_excerpt_more($more) {
global $post;
// edit here if you like
return '... <a class="excerpt-read-more" href="'. get_permalink( $post->ID ) . '" title="'. __( 'Read ', 'domain_name' ) . esc_attr( get_the_title( $post->ID ) ).'">'. __( 'Show more »', 'domain_name' ) .'</a>';
}
add_filter( 'excerpt_more', 'develop_custom_excerpt_more' );
Figured that it is Elementor posts plugin related overriding functions.php and translators as well. The eael-post-elements-readmore-btn was not changing in padding nor in margin because line-height which by default is set to 1 could not allow space for expansion.
Is it possible to change that behavior on the first time the visitor visit the product page to show the real featured image and only on select variant it will show the image without removing pre-selected variant?
When clicking the product in the listing (with a featured image) the product displays just an image, with the description and stuff, but a different image, not the featured.
I found this but the code is outdated: Same question and answer
My single/product-image.php template:
<div class="product-images relative mb-half has-hover <?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>">
<?php do_action('flatsome_sale_flash'); ?>
<div class="image-tools absolute top show-on-hover right z-3">
<?php do_action('flatsome_product_image_tools_top'); ?>
</div>
<figure class="woocommerce-product-gallery__wrapper <?php echo implode(' ', $slider_classes); ?>"
data-flickity-options='{
"cellAlign": "center",
"wrapAround": true,
"autoPlay": false,
"prevNextButtons":true,
"adaptiveHeight": true,
"imagesLoaded": true,
"lazyLoad": 1,
"dragThreshold" : 15,
"pageDots": false,
"rightToLeft": <?php echo $rtl; ?>
}'>
<?php
if ( $product->get_image_id() ) {
$html = flatsome_wc_get_gallery_image_html( $post_thumbnail_id, true );
} else {
$html = '<div class="woocommerce-product-gallery__image--placeholder">';
$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
$html .= '</div>';
}
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped
do_action( 'woocommerce_product_thumbnails' );
?>
</figure>
<div class="image-tools absolute bottom left z-3">
<?php do_action('flatsome_product_image_tools_bottom'); ?>
</div>
</div>
Well, I 'v figured out how to stop this behavior. after 6 hours of search in the code in theme + WooCommerece plugin code, I found the solution.
1.First copy the file wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js
To your child theme /woocommerce/js/ folder if not have that folder create one.
2.Paste this at your theme child to call the new file and deregister the default file by woo:
add_action('wp_enqueue_scripts', 'override_woo_frontend_scripts');
function override_woo_frontend_scripts() {
wp_deregister_script('wc-add-to-cart-variation');
wp_enqueue_script('wc-add-to-cart-variation', get_stylesheet_directory_uri() . '/woocommerce/js/add-to-cart-variation.min.js', array('jquery', 'wp-util', 'jquery-blockui'), null, true);
}
3.Open the new copied file from your child theme and seatch for line 45 and Comment the following line:
setTimeout( function() {
//$form.trigger( 'check_variations' ); Comment this line to disable auto slide on first page load to the selected variation image
$form.trigger( 'wc_variation_form' );
self.loading = false;
}, 100 );
Copy the entire file you have just edited into some online js minify.
Paste the minified code inside the new file you have just created and rename the file to add-to-cart-variation.min.js.
Done, fixed the problem, the only issue with this can be on the next woocommerce updates if would they do to that file you may miss important updates.
Thanks, good luck
I had the same problem and solved it a slight different way, without needing to edit core WooCommerce js files.
The entire flex slider nav system of selecting the variation image depends on the class 'flex-control-nav' in file add-to-cart-variation.min.js line 650, "$gallery_nav = $product.find( '.flex-control-nav' )".
If the class flex-control-nav is not preset on page load, then the WooCommerce js cannot automatically select the default variation image.
So, when your page loads, make sure that the class flex-control-nav is not present in your thumbnail slider div - use a different class for styling the flexslider. I used a custom product_image.php template for this.
Set a js timer for 300 ms to run once the page loads, and once the timer fires, use js to add the class flex-control-nav into the slider div. You now have image sync between your variation images and main image gallery.
How can i add to my code
<img src="<?php the_sub_field('img'); ?>" alt="????" />
Te "alt" value of the image in my media, form my wordpress.
Advanced Custom Fields gives you a choice of return values. Given your current code I'd guess you've gone with URL.
In order to display the ALT tag you'll need to choose object instead. ID could work too but it's adding an extra step.
After choosing the new return value replace your code with:
<?php if ( $image = get_sub_field( 'img' ) ) {
printf( '<img src="%s" alt="%s" />', $image['url'], $image['title'] );
} ?>
I want wordpress post rss list featured image link
Ex:
<title>Test title</title>
<desc>Test desc</desc>
<image>imagelink</image>
I'm not using plugin.
Thanks
This will do. Add it to functions.php file:
// add the namespace to the RSS opening element
add_action( 'rss2_ns', 'custom_prefix_add_media_namespace' );
function custom_prefix_add_media_namespace() {
echo "xmlns:media="http://search.yahoo.com/mrss/"n";
}
// add the requisite tag where a thumbnail exists
add_action( 'rss2_item', 'custom_prefix_add_media_thumbnail' );
function custom_prefix_add_media_thumbnail() {
global $post;
if( has_post_thumbnail( $post->ID )) {
$thumb_ID = get_post_thumbnail_id( $post->ID );
$details = wp_get_attachment_image_src($thumb_ID, 'thumbnail');
if( is_array($details) ) {
echo '<media:thumbnail url="' . $details[0] . '" width="' . $details[1] . '" height="' . $details[2] . '" />';
}
}
}
Also when you add this, be sure to reset the permalinks (flush them), by going to Settings > Permalinks, and either change permalinks to default, and back to your defined settings, or just re-saving.
After that, check your feed and the media should be there.
I'm really new to Wordpress and slowly getting my head around it but I've come across a problem and I don't know how to fix it.
I'm creating pages using the text editor in the backend and I'm pasting html in there. All's working well and I can output images using this function in functions.php (i found this snippet somwhere but can't remember where)
// Create the shortcode
function template_url( $atts, $content = null ) {
return '<img src="'. get_template_directory_uri() .'/'. $content .'" alt="" />';
}
// Add as shortcode
add_shortcode("template", "template_url");
and i call it like this
[template]images/my-image.jpg[/template]
The problem is how do i add some alt text and also add a class to the image
You can add shortcode with your custom attributes like this:-
Add Following code for adding shortcode:
function template_url( $atts, $content = null )
{
extract(
shortcode_atts( array(
'alt' => '',
'width' => '',
'height' => ''
), $atts )
);
//And this variable you can use like this:-
return '<img src="'. get_template_directory_uri() .'/'. $content .'" alt="'.$alt.'" width="'.$width.'" height="'.$height.'"/>';
}
add_shortcode("template", "template_url");
And use this shortcode in editor:-
[template alt="this is alter text" width="400" height="300"]images/my-image.jpg[/template]
I hope this will be helpful.