Recently in my company found an error about some images not being shown on our pdf's.
We started looking and found that our images were build like:
<div style="
position: absolute;
top: 20cm;
left: 4.5cm;
width: 3.3cm;
z-index: 9998;
">
<img src="{{ base_path("public/path/to/my/image.png") }}" height="auto" width="100%" />
</div>
But them wont show on the pdf.
This used to work and is still working on production, but no longer working for our other branches even though we didn't touch anything related to this.
We are using dompdf 0.8.6, laravel 5.7.29 and PHP 7.1.3.
We know that adding height to the div and changing image height from auto to 100% solves it, but we have hundreds of images that do not have any height defined and they are being shown as expected.
Any idea why this happens?
Updating any library would do the trick?
Or maybe any library causes this problem?
Related
I have the following piece of code that functionally works well.
<div class="user-pic round-pic">
<img src="<?php echo $user['profile_pic']; ?>">
</div>
The problem is how it looks. When I rollover the image to click, I get this weird half transparent gradient look.
I know it's a stupid pic but I'm working locally. Here is the CSS for this pic:
round-pic img {
width: 100%;
height: 100%;
object-fit: cover;
}
Any thoughts on how I could eliminate this rollover behavior? Little things like this bother me not to mention detract from the UX.
Any help would be appreciated.
Based on a forum suggestion I discovered img:hover{opacity: 0.95} was set in main.css. I simply targeted the <a> tag and used inline to change the style.
<img src="assets/images/profile_pics/blarg.jpeg">
Not a huge issue obviously, but needed to be corrected nonetheless.
I've been attempting to create a hero header in my Laravel 5.4 project. However, one certain thing doesn't seem to be working the way it's supposed to.
(If you're not familiar with what a hero header is; it's basically an image stretching over the entire screen used as a background upon first loading the website, usually with some text and a call to action on top of it.)
This is the way I've structured my code, based on research I've been doing:
home.blade.php:
#extends('layouts.app')
#section('content')
<div class="container">
#include('partials.hero')
</div>
#endsection
hero.blade.php:
<div class="hero-image">
<div class="hero-text">
<h1>Hero header</h1>
<p>Hero text</p>
<button id="hero-prim" class="button-primary">Action!</button>
<button id="hero-sec" class="button-secondary">Info</button>
</div>
and finally the css:
.hero-image{
background-image: url(/images/hero-image.png);
width: 100%;
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
The strange thing about this is that the text and the buttons are loaded with the page, but there's no sign of the image. Even if I exclude any other elements and try to only show the image, it gives me nothing.
This makes me think the issue must be in how I'm setting the background-image in my CSS, but I've no idea how I'd have to do it differently.
Any help or advice is greatly appreciated!
EDIT:
The image now displays properly, but doesn't stretch across the entire width of the screen, instead I think it only stretches across the section.
In any case, I'm not sure exactly which change in code made this happen, but after trying out some Bootstrap classes on it and defining the height of html and body as 100% (courtesy of VegaPunk), things have been better.
I'm sorry I can't define a more clear answer, but it's still a mystery to me, since yesterday none of these solutions seemed to work on their own.
I face the same problem and solved it just now. My css code was background: url(images/banner.jpg); and the error was Failed to load resource: the server responded with a status of 404 (Not Found). The solution is adding two dot '.' and a single slash '/' before images background: url(../images/banner.jpg);, Now the image has been appeared. My images and css folder in my project public folder and banner.jpg is in the images folder.
Your image should be located in your public folder. So create a folder in public called 'Images' with a capital I and place the hero-image.png inside the created folder.
Heights are really tricky in CSS. I suggest you use a framework like Bootstrap or Foundation.
It doesnt know 50% of what, you need to declare
html, body { height: 100%;}
I installed TinyMCE for my phplist but the fullscreen mode is not displaying in full width
I saw this line of code
<div id="mce_32" class="mce-tinymce mce-container mce-panel mce-fullscreen" hidefocus="1" tabindex="-1" style="visibility: hidden; border-width: 1px; width: 600px;">
The editor window only has 600px width. I changed it with 100% directly in browser console, it can display with full width. But I can't fix it by editing the css , and the plugin php config, or the javascript.
Anyone knows how to fix it?
Try this:
.mce-fullscreen{width:100% !important}
Remember try to avoid using !important tag.
Use it as less often as possible
I'm using a jquery plugin to create an image slider with thumbnails underneath.
My goal is to have the main image's background be bg.png, with the thumbnail section background be wood.png.
I've changed the CSS to what I believe to be correct(see below), but the background of the thumbnail section isn't extending the full 961px, it's restricted to the 921px width I've established with the main image. I have a feeling this might be due to nesting within the plugin's php/jquery, I'm just not sure how to go about altering it to work. If that is the case, how do I fix it? If it's something else, how do I determine what it is/how to fix it?
thethe-image-slider.php
timthumb.php
live site
Thanks.
CSS
.thethe_image_slider.white-square-1{
background: url('../images/bg.png');
}
.white-square-1 .thethe-image-slider-thumbnails{
background: url('../images/wood.png');
margin-top: 20px;
margin-bottom: 40px;
width: 961px;
}
find this line
<div class="thethe_image_slider white-square-1" id="thethe_image_slider323" style="width:921px;"><div class="thethe_image_slider_inner" style="width:921px; height:392px;">
and change to this
<div class="thethe_image_slider white-square-1" id="thethe_image_slider323" style="width:961px;"><div class="thethe_image_slider_inner" style="width:921px; height:392px;margin:0 auto;">
in your code
Move your thethe-image-slider-thumbnails div out of your thethe_image_slider white-square-1 div but inside the gallery div. Works fine for me then.
I am looking for a solution to deliver a "wallpaper" banner with the adserver "openx". A wallpaper consists of a leaderboard banner (728x90 px) and a vertical skyscraper. I cant find any option in OpenX itself, so I guess there must be some kind of dirty methods to get it done.
Anyone here having experiences with it? I'm thinking of delivering just an leaderboard banner and then attaching a html snipped to the banner - which contains the markup to my skyscraper-banner... :-/
greg0ire > You can see an example of a "wallpaper" banner on this site (you might experience an overlay banner before, make sure you disable ad blocking extensions): http://www.allocine.fr/ Some days it is in flash, other days it is just a background-image css property set on the body element. I'd like to achieve the second option.
Thanks!
I got wallpapers ads to work through openx using this method.
First I created a div below the content wrapper of my site (using wordpress, header.php file).
<div id="adbg" style=" margin: 0pt auto; height: 1000px; width: 100%; position: fixed; cursor:pointer; ">
Then I created a div block with the wallpaper image in the CSS and added it to OpenX as a TEXT BANNER
<div OnClick="location.href='#';" style="background: url('image.jpg') no-repeat scroll center top #026eb4; height: 100%; width: 100%; margin: 0pt auto; cursor:pointer; "></div>
Finally, I took the openx embed code and place it within the ADBG div I pasted above.
This technique worked well for me on all browsers.
You can of course take the CSS in the adbg div and store it in your CSS file.
For the moment, I ended up doing this, but I'd like to see better solutions:
<div class="openx_<?php echo $_block->getBlockParameter('css_class');?> openx_background hidden">
<?php echo str_replace('INSERT_RANDOM_NUMBER_HERE', rand(0, 9000), $_block->getBlockParameter('html', ESC_RAW));?>
<?php echo javascript_tag()?>
var checkImg = window.setInterval(function(){
if (jQuery('.openx_background img').length)
{
jQuery("body").css('background', 'url("' + jQuery('.openx_background img').attr('src') + '") no-repeat');
window.clearInterval(checkImg);
}
}, 1000);
//give up 3 s later
setTimeout(function(){
if (jQuery('.openx_background img').length == 0)
{
clearInterval(checkImg);
}
}, 3001);
<?php echo end_javascript_tag()?>
</div>
$_block->getBlockParameter('html', ESC_RAW) contains the openx javascript invocation code.
Not sure if this is still of interest, but there's a setting in openX for that called "Companion positioning". Have a look at the OpenX reference guide under point 4.6:
http://opensourceusers.com/sites/default/files/openx_reference_guide.pdf
It's a method to make sure that a skyscraper is delivered every time a certain leaderboard is delivered. You can then use the prepend/append functionality to color the background to turn this "hockey stick" into a full blown wallpaper.