i need to replace in all images in output their style parameters
for example
$output = '<p><img src="" style="float: left; width: 600px; height: 400px">
some text <img src="" style="float: right; width: 600px; height: 300px">';
i need
$output = '<p><img src="" class="alignleft" width="600" height="400"> some text <img src="" class="alignright" width="600" height="300">';
please help
solved
$output = preg_replace_callback('#<img (.+) style="(.+)" />#isU',
function($matches) {
$styles = explode('; ', $matches[2]);
foreach ($styles as $i) {
if (strstr($i, 'width')) $styles['w'] = $i;
if (strstr($i, 'height')) $styles['h'] = $i;
}
$width = $styles['w'];
$width = str_replace('width:', '', $width);
$width = str_replace('px', '', $width);
$height = $styles['h'];
$height = str_replace('height:', '', $height);
$height = str_replace('px', '', $height);
return '<img ' . $matches[1] . ' width="' . $width . '" height="' . $height . '">';
}
, $output);
Related
This question already has answers here:
PHP - For loop only returns last variable in array
(2 answers)
Closed 1 year ago.
I am having some issues getting my extremely messy code to submit data properly. Currently I am scraping a website which harbors many images and trying to collect them all and store them accordingly via my WordPress the_content selection.
Here's what I've got going so far, this is returning the images almost without any issues when I load it via a standard loop.
foreach ($html2->find('.entry-content img') as $image) {
$imageurl = $image->src;
$new = '<img src="' . $imageurl . '" style="height: auto; width: 100%;margin-bottom: 3px;">';
print $thecontent = htmlspecialchars($new); print '<br>';
} foreach ($html2->find('iframe') as $video) {
$videourl = $video->src;;
$new = '<iframe src="' . $videourl . '" scrolling="no" frameborder="0" width="100%" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>';
print $thecontent = htmlspecialchars($new); print '<br>';
}
The above code will return something that looks like this containing 1 - how ever many images + videos we're trying to gather.
<img src="https://www.example.com/some-image-path-here.jpg" style="height: auto; width: 100%;margin-bottom: 3px;">
<img src="https://www.example.com/some-image-path-here.jpg" style="height: auto; width: 100%;margin-bottom: 3px;">
<img src="https://www.example.com/some-image-path-here.jpg" style="height: auto; width: 100%;margin-bottom: 3px;">
<img src="https://www.example.com/some-image-path-here.jpg" style="height: auto; width: 100%;margin-bottom: 3px;">
Now here's what I am using to try and upload the content to my WordPress site (everything except $content appears to be working properly.
$content = $thecontent;
$my_post = array(
'post_title' => wp_strip_all_tags( trim( $title ) ),
'post_content' => $content,
'post_status' => 'publish',
'post_author' => 2,
'post_category' => array(2),
'post_date' => date('Y-m-d H:i:s')
);
$post_id = wp_insert_post( $my_post );
remove_filter('content_save_pre', 'wp_filter_post_kses');
remove_filter('content_filtered_save_pre', 'wp_filter_post_kses');
The above code returns the following within my WordPress the_content portion, which is the first image only, how can I make this work?
<img src="https://www.example.com/some-image-path-here.jpg" style="height: auto; width: 100%;margin-bottom: 3px;">
Note: The portion which is storing the WordPress data is being loaded inside of our initial parse loop, but outside of the loop which is collecting the images + videos.
Each time round the loop your just collecting one piece of information and setting $thecontent to that field and printing it out. You need to add these to together to get a string containing all of the content...
$thecontent = '';
foreach ($html2->find('.entry-content img') as $image) {
$imageurl = $image->src;
$new = '<img src="' . $imageurl . '" style="height: auto; width: 100%;margin-bottom: 3px;">';
$thecontent .= htmlspecialchars($new).'<br>';
}
foreach ($html2->find('iframe') as $video) {
$videourl = $video->src;;
$new = '<iframe src="' . $videourl . '" scrolling="no" frameborder="0" width="100%" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>';
$thecontent .= htmlspecialchars($new).'<br>';
}
print $thecontent;
Note where in each loop I use .= to append the new content to the end of the list. The final content is printed out and should be used
I have generate output as svg in html using php and have to force download it as svg image when i click download as svg. how to generate it as svg image when i click download.
foreach($items as $item){
// echo $item->top;
$top = str_replace('px', '', $item['top']);
$left = str_replace('px', '', $item['left']);
echo '<div style="background-color:#fff;width:333.333px;height:500px;">';
echo '<div style="position:absolute;top:'.$top.';left:'.$left.'">';
$svg_element = $item['svg'];
echo $svg_element;
echo '</div>';
echo '</div>';
}
// output
<div style="background-color:#fff;width:333.333px;height:500px;"><div style="position:absolute;top:235;left:64.0667">
<svg width="198" height="132" viewBox="0 0 99 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<defs><style>#font-face{font-family: 'Twine';src: url("data:application/font-ttf;charset=utf-8;base64,")
<g id="0.38592716854139286"><text fill="#000000" stroke="none" stroke- width="0" stroke-linecap="round" stroke-linejoin="round" x="32" y="39" text-anchor="middle" font-size="40.30555555555556" font-family="Twine" data-textcurve="0" data-itemzoom="1 1" itemzoom="0.5 0.3939393939393939"> <tspan dy="0" x="50%">Hello</tspan></text></g>
For SVG there should not be any div. so i have removed div and created svg with width and height, background color and put the contents in the file save it as .svg extension
$op = '<svg width="'.$template_width.'" height="'.$template_height.'">';
foreach($items as $item){
// echo $item->top;
$top = str_replace('px', '', $item['top']);
$left = str_replace('px', '', $item['left']);
$op .= str_replace('<svg ', '<svg y="'.$top.'" x="'.$left.'" ', $item['svg']);
}
$op .= '</svg>';
$filename = '/front_'.time().'.svg';
file_put_contents(realpath(dirname(__FILE__)).$filename, $op);
I have a little problem in my Shortcode which I am creating for WordPress. The foreach loop is not displaying multiple posts each time. I'm not sure why is it doing this because if I var_dump the $post variable it shows that both the posts are available to that variable, can someone help me out please?
CODE:
function notes_shortcode($atts) {
global $post;
$atts = shortcode_atts( array( 'category' => $args["category"]), $atts, 'notes' );
$args = array( 'category_name' => $atts["category"]);
$posts = get_posts( $args );
$date = get_the_date( 'd', $post->ID );
$month = get_the_date( 'M', $post->ID );
foreach( $posts as $post ) {
setup_postdata($post);
$imgURL = getpostImage( $post->ID );
$title = get_the_title( $post->ID );
$content = substr(get_the_content() , 0, 125);
$post = '<div class="animated fadeInUp" data-animation="fadeInUp" data-delay="200" style="opacity: 0;">';
$post .= '<div class="col-md-4 bloglist">';
$post .= '<div class="post-content">';
$post .= '<div class="post-image">';
$post .= '<div class="flexslider blog-slider">';
$post .= '<div class="overlay" style="opacity: 0;"></div>';
$post .= '<div class="flex-viewport" style="overflow: hidden; position: relative;">';
$post .= '<ul class="slides" style="width: 800%; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-350px, 0px, 0px);">';
$post .= '<li class="clone" aria-hidden="true" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$post .= '<li class="flex-active-slide" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$post .= '<li style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$post .= '<li class="clone" aria-hidden="true" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"></li>';
$post .= '</ul></div></div></div>';
$post .= '<div class="date-box"><span class="day">' . $date . '</span>';
$post .= '<span class="month">' . $month . '</span> </div>';
$post .= '<div class="post-text">';
$post .= '<h3>' . $title . '</h3>';
$post .= '<p> ' . $content . '<br>';
$post .= ' Read More</p></div></div></div></div>';
return $post;
}
}
add_shortcode( 'notes', 'notes_shortcode' );
function getpostImage($postid) {
if (has_post_thumbnail($post->ID)){
$imgArray = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), 'thumbnail' );
$imgURL = $imgArray[0];
return $imgURL;
}
}
Thanks ..
Okay, I solved the problem. I used the WordPress Filters to hook the $buff variable and returned it outside the loop, below is the solution if anyone needs it.
function notes_shortcode($atts) {
global $post;
global $buf;
$atts = shortcode_atts( array( 'category' => $args["category"], 'posts_per_page' => $args["posts_per_page"]), $atts, 'notes' );
$args = array( 'category_name' => $atts["category"], 'posts_per_page' => $atts["posts_per_page"] );
$posts = get_posts( $args );
$date = get_the_date( 'd', $post->ID );
$month = get_the_date( 'M', $post->ID );
$buf = '';
$postHolder = array();
foreach( $posts as $post ) {
setup_postdata($post);
$imgURL = getpostImage( $post->ID );
$title = get_the_title( $post->ID );
$content = substr(get_the_content() , 0, 125);
$buf .= '<div class="animated fadeInUp" data-animation="fadeInUp" data-delay="200" style="opacity: 0;">';
$buf .= '<div class="col-md-4 bloglist">';
$buf .= '<div class="post-content">';
$buf .= '<div class="post-image">';
$buf .= '<div class="flexslider blog-slider">';
$buf .= '<div class="overlay" style="opacity: 0;"></div>';
$buf .= '<div class="flex-viewport" style="overflow: hidden; position: relative; max-width: 350px; max-height: 175px; padding-bottom: 15px; margin-bottom: 15px;">';
$buf .= '<ul class="slides" style="width: 800%; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-350px, 0px, 0px);">';
$buf .= '<li class="clone" aria-hidden="true" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$buf .= '<li class="flex-active-slide" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$buf .= '<li style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$buf .= '<li class="clone" aria-hidden="true" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"></li>';
$buf .= '</ul></div></div></div>';
$buf .= '<div class="date-box"><span class="day">' . $date . '</span>';
$buf .= '<span class="month">' . $month . '</span> </div>';
$buf .= '<div class="post-text">';
$buf .= '<h3>' . $title . '</h3>';
$buf .= '<p> ' . $content . '<br>';
$buf .= ' Read More</p></div></div></div>';
$buf .= apply_filters( 'post_class', '</div>', $atts );
}
$buf .= apply_filters( 'post_class', '', $atts );
return $buf;
}
add_shortcode( 'notes', 'notes_shortcode' );
function getpostImage($postid) {
if (has_post_thumbnail($post->ID)){
$imgArray = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), 'thumbnail' );
$imgURL = $imgArray[0];
return $imgURL;
}
}
Thankyou all for the help ..
You are returning the function, that means that your are making the function end. What you can do is send the array and then loop it later.Use the code below
function notes_shortcode($atts) {
global $post;
$atts = shortcode_atts( array( 'category' => $args["category"]), $atts, 'notes' );
$args = array( 'category_name' => $atts["category"]);
$posts = get_posts( $args );
$date = get_the_date( 'd', $post->ID );
$month = get_the_date( 'M', $post->ID );
$array = array();
foreach( $posts as $post ) {
setup_postdata($post);
$imgURL = getpostImage( $post->ID );
$title = get_the_title( $post->ID );
$content = substr(get_the_content() , 0, 125);
$post = '<div class="animated fadeInUp" data-animation="fadeInUp" data-delay="200" style="opacity: 0;">';
$post .= '<div class="col-md-4 bloglist">';
$post .= '<div class="post-content">';
$post .= '<div class="post-image">';
$post .= '<div class="flexslider blog-slider">';
$post .= '<div class="overlay" style="opacity: 0;"></div>';
$post .= '<div class="flex-viewport" style="overflow: hidden; position: relative;">';
$post .= '<ul class="slides" style="width: 800%; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-350px, 0px, 0px);">';
$post .= '<li class="clone" aria-hidden="true" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$post .= '<li class="flex-active-slide" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$post .= '<li style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$post .= '<li class="clone" aria-hidden="true" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"></li>';
$post .= '</ul></div></div></div>';
$post .= '<div class="date-box"><span class="day">' . $date . '</span>';
$post .= '<span class="month">' . $month . '</span> </div>';
$post .= '<div class="post-text">';
$post .= '<h3>' . $title . '</h3>';
$post .= '<p> ' . $content . '<br>';
$post .= ' Read More</p></div></div></div></div>';
$array[] = $post;
}
return $array;
}
add_shortcode( 'notes', 'notes_shortcode' );
function getpostImage($postid) {
if (has_post_thumbnail($post->ID)){
$imgArray = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), 'thumbnail' );
$imgURL = $imgArray[0];
return $imgURL;
}
}
Hope this helps you
Can any body tell how to change the width & height of iframe in php.
in database i am saving below format.while i am displaying i want to fixed size.
this is the iframe content
<iframe width="400" height="225" src="http://www.youtube.com/embed/c7ct6pNOvEE?feature=oembed" frameborder="0" allowfullscreen></iframe>
Here width & height changes dynamically based on site.then how to convert the width to 500 & height to 350 in php
Thanks in advance
You should just use CSS
html, body, iframe {
height: 100%;
width: 100%;
}
Edit: Next time you should define your question PROPERLY and add a proper descriotion before you post it.
Anyway, since you have the sizes in the database you can simply use echo's to change the size. First you need to get the width and height from the database, then echo it in your HTML.
<?php
$iframe = html_entity_decode($post['url']);
$newWidth = 610;
$newHeight = 450;
?>
<iframe
src="<?php echo $iframe; ?>"
height="<?php echo $newHeight; ?>"
width="<?php echo $newWidth; ?>"
frameborder="0" allowfullscreen>
</iframe>
Edit v12351524274573523
$iframe = '<iframe width="400" height="225" src="youtube.com/embed/c7ct6pNOvEE?feature=oembed" frameborder="0" allowfullscreen></iframe>';
$src = html_entity_decode($post['url']);
$height = 450;
$width = 610;
// add autoplay
$src = $src . (strstr($src, '?') ? '&': '?') . 'autoplay=1';
$iframe = preg_replace('/src="(.*?)"/i', 'src="' . $src .'"', $iframe);
$iframe = preg_replace('/height="(.*?)"/i', 'height="' . $height .'"', $iframe);
$iframe = preg_replace('/width="(.*?)"/i', 'width="' . $width .'"', $iframe);
How do I get images in certain fixed size, example I've attached the image and codes for your review
Please click on this link (image) to understand my question
<img src="<?php echo $picfile; ?>" border="0" width="<?php echo $imgsize[0]; ?>" height="<?php echo $imgsize[1]; ?>" align="left" style="border:1px solid black;margin-right:5px;">
You can get image details with
$details = get_image_size($filename).
$details[3] will contain the width and height in html format ready for you to use.
Could possibly try this
img src='$filename' style='width:250px; height: 250px'
allows you to strech image to specific size
to scale you could use
img src='$filename' style='width:auto; height: 250px'
There are a few ways to do this. As you are looping through your images, you want to keep track of the maximum width.
$newImageArray = array();
$maxWidth = 0;
$maxHeight = 0;
$i = 0;
forEach ( $imageArray as $picfile ) {
$newImageArray[$i]['picFile'] = $picfile;
$imgsize = get_image_size($picfile);
$newImageArray[$i]['width'] = $imgsize[0];
if ( $imgsize[0] > $maxWidth ) {
$maxWidth = $imgsize[0];
}
$newImageArray[$i]['height'] = $imgsize[1];
if ( $imgsize[1] > $maxHeight ) {
$maxHeight = $imgsize[1];
}
$1++;
}
forEach ( $newImageArray as $i) { ?>
<img src="<?php echo $picfile; ?>" border="0" width="<?php echo $maxWidth; ?>" height="<?php echo $maxHeight; ?>" align="left" style="border:1px solid black;margin-right:5px;">
<?php
}
Now you shouldn't really be doing this. A CSS based option would work better. You can add a wrapper container with a width on it and set the images to display:block;width:100%; and the images will always fill the space. I will edit with that solution shortly.
This will keep the image within a fixed width, and scale the image to fit inside of the box when it is too large.
HTML:
<div class="imgWrap">
<img src="http://www.captainangry.com/img/1236647133510anonib.jpg">
</div>
CSS:
.imgWrap {
width:100px;
height:100px;
float:left;
}
.imgWrap img {
display:block;
max-width:100%;
}
If you don't want to do any work in PHP then just wrap the image in a div and set overflow:hidden. This assumes that you know the height you want all of your images to be.
<div style="width:<?php echo $imgsize[0]; ?>; height:100px; overflow:hidden; border:1px solid black; margin-right:5px">
<img src="<?php echo $picfile; ?>" width="<?php echo $imgsize[0]; ?>" height="<?php echo $imgsize[1]; ?>">
</div>