I am working on a wordpress theme and WP now uses oEmbed to automatically turn known links into widgets. The problem here is that the widgets are not responsive (they do not keep the same aspect ratio and adjust to the screen size).
The site is http://testsite1.seyoum.net/
Note that the theme I am using is a child theme of twentyfifteen. You can download the theme files here:
https://onedrive.live.com/redir?resid=B9CDD4D34FF06A75!97938&authkey=!AEj9VpYkCRL0SEE&ithint=file%2crar
I have done some research and found this video: https://youtu.be/Dm0YnuQeROI
In the video he removes the with and height properties of the iframe. The problem for me is that these tags are added automatically by oEmbedd so I need some kind of filter that removes/ignores the height and width tags in the iframe.
I am trying to alter an iframe. More spesifically I want to remove the height and width tags of the iframe by using (what I believe to be) filters.
Example:
I want to change this
<iframe width="660" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&color=000000&download=false&show_user=false&sharing=false&show_comments=false&show_playcount=false&hide_related=true&url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F192992432&show_artwork=false&&"></iframe>
To this:
(The width="660" height="400" is gone)
<iframe scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&color=000000&download=false&show_user=false&sharing=false&show_comments=false&show_playcount=false&hide_related=true&url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F192992432&show_artwork=false&&"></iframe>
I am not familiar with php and it is hard to find articles I can understand so please help me out if you can.
Try to use
function mycustom_embed_defaults($embed_size){
// Applies for all embedded media
/*$embed_size['width'] = 827;*/ // Adjust the width of the player
// $embed_size['height'] = 120; // Adjust the height of the player
unset($embed_size['width']);
unset($embed_size['height']);
return $embed_size; // Return new size
}
or
function mycustom_embed_defaults($embed_size){
// Applies for all embedded media
$embed_size['width'] = "auto"; // Adjust the width of the player
$embed_size['height'] = "auto"; // Adjust the height of the player
return $embed_size; // Return new size
}
or
function mycustom_embed_defaults($embed_size){
// Applies for all embedded media
$embed_size['width'] = "100%"; // Adjust the width of the player
$embed_size['height'] = "100%"; // Adjust the height of the player
return $embed_size; // Return new size
}
The problem is that your plugin seems to need the width property... All you have to do is to know what you want it to be... It doesn't have to be a pixel value...
Hi I would like to give my clients who use a CMS for their website the ability to add their own background image. My CMS doesn't allow clients to edit the background-image directly so I would like to enable them to do it by using some php or other script. I would like them to be able to upload an img as normal (this image will be hidden from view on the webpage but will be visible in the CMS) and then use the script to take the img src and put it into the background-image:url('...');
Here is my code:
<div id="maincontentcontainer" style="background-image:url('...');background-size:100%;background- attachment:fixed;">
<img src="..." alt=""/>
Looking forward to any answers, thanks!
The js part, as I assume that's what you're asking for, is quite simple. You'll have to make sure your CSS is there to make sure it's not visible though. Also assuming jQuery...
var $image = $('.uploaded-image'),
src = $image.attr('src');
$image.remove();
$('#maincontentcontainer').css('background-image', 'url('+src+')');
Fiddle: http://jsfiddle.net/61znv2a3/
I'm using the following code to embed flowplayer on one of my sites.
<IFRAME SRC="http://mydomain.com/video/9" FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=640 HEIGHT=360></IFRAME>
The link mydomain.com/video/9 has the flowplayer video with 100% width / height. Using an iframe on another will have work initially, but if I refresh this error comes up: html5: Video file not found so then I go back to the initial link mydomain.com/video/9, also displays the same error html5: Video file not found. But If I go to the original location of the video, the video still exists!
Then I remove the iframe from the other site, and the video magically starts displaying on mydomain.com/video/9. Why is that, and how can I make it so it allows iFrames?
this question seems an evergreen on TCPDF...
I have an issue that's driving me crazy.
I have an html code that I use as "template" for my PDF, here I have my company logo.
Everything works fine on localhost (Windows), but when I move online, the image is not shown.
Pay attention: I don't get any error (ie the Unable to get image error) on my PDF the image is simple blank!
Infact if I click on the PDF on the position where the images it's supposed to be, I can select it, and Adobe enables the option "Copy image".
Obviously the image exists, is here, and permission are correct.
If I try to surf there, or view the generated HTML page, everything is fine.
This is the PHP code:
$pdf->SetMargins($params->get('pdfMarginLeft', 15), $params->get('pdfMarginTop', 27), $params->get('pdfMarginRight', 15));
$pdf->SetHeaderMargin(PDF_MARGIN_HEADER);
$pdf->SetFooterMargin(PDF_MARGIN_FOOTER);
$pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);
$pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);
$pdf->SetFont('helvetica', '', 8);
$pdf->AddPage();
$pdf->writeHTML($html, true, false, true, false, '');
$pdf->lastPage();
Then this is my HTML code (I just skipped everything except the image):
<img alt="logo black" src="../images/logo_black.png" height="60" width="210" />
I've tried with the url (relative and absolute) and with the path (relative and absolute), the problem still occurs.
Any ideas?
This wasn't your problem, but it's a possible solution for people with a similar issue in the future. Please make sure the HTML attributes have double quotes.
$html = "<img src='...' />"; // This will not work
$html = '<img src="..." />'; // This will work
As things are working locally so you may try changing the image type from png to jpg and check after modifying your code accordingly and uploading the jpg on the server.
You can convert image type "jpg/png" to base64.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...."/>
this may help you !
In my case, I tried every solution above to no avail. It turned out I was missing width and height attributes. Adding those in, and using a root path ended up working for me:
<img src="/images/image.png" width="50" height="50"/>
In my case IMG tag not working until I write full path to file
Not working
<img src="/pdfrender/XXX.jpg" width="50" height="50">
Working (localhost example)
<img src="http://site.local/pdfrender/XXX.jpg" width="50" height="50">
It is also posible add image data inline as base64:
<img src="#Base64encodedImageFile" />
I implemented a str_replace for the image src, and that works ok now.
$html = str_replace("../images", $_SERVER["DOCUMENT_ROOT"] . '/images', $html);
I had to 'resave' the images:
$image = 'images/logo_example.png';
imagepng(imagecreatefrompng($image),$image);
Then it worked.
Not really an answer but as everybody is trying to add a "brick" here is a very strange detail I'm facing:
I have small "strips" of HTML that I put, one after other on a page. If I put the first one, which has 2 png and a small text, on the file, the png are visibles on the PDF.
If I put the second one, which has 2 png and a small text, on the file, the png are visible on the PDF.
Now, if I put the two, ONLY the first one as the images. The second one as blank picture. If I change the picture of the second strip, images became visible.
Detail: 1st and 2nd strips are using the same images!
Notice this seems to happened ONLY with PNG image. So it seems there is a bug and you can't have two time the same PNG image on a page. Using JPG solve the problem.
I had the same problem, locally it was working and on server blank image. I found out that htaccess password was the problem. I've put .htaccess file with the row Satisfy any to the folder with pictures and now it is working.
I'm using timthumb to display a full screen gallery slider in a wordpress site. What I want to do is resize that image to fit the viewport of the vistors machine. At the moment the values are static.
I know php can't detect viewport size, so I assume I need to use jquery.
var viewport_Width = $(window).width();
var viewport_Height = $(window).height();
The problem I have is I don't know how to connect that output to this piece of PHP with static values that tells timthumb how big to make the image:
<div class="cover"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $img ?>&h=800&w=1280&zc=1" alt="<?php the_title(); ?>" width="1280" height="800" /></div>
Please explain it slowly as i am fairly new to PHP.
Use javascript to remove the height and width attributes of your imgs, and then use CSS to set their width and or height to 100%.
$('.cover img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});