I'm confronted in integrating a pdf to my project with some css.
But there it comes that I need to actually add an image.
I saw that there is KnpSnappyBundle available, but my css actually works without it as I can add colors and everything. My only question is how can I add an image without using any bundle ?
I tried with a twig link in the html like this
<img class="logo" src="{{ asset('images/logo.png') }}">
I tried with an absolute path like this
<img class="logo" src="{{ asset('images/logo.png', absolute = true) }}">
I tried to add it in the css too:
.logo {
background: url('images/logo.png');
background-size: cover;
height: 100px;
width: 100px;
}
the pdf opens but there is no logo.
So does anyone have an idea on how to do it?
The usual problem with Snappy package which internally uses wkhtmltopdf
tool, is domain name referencing. You should convert all your relative resource paths to absolute paths , and it will work for you. You should look at this or this to convert all css/image links
Related
How do we capture the image that has the following code ? since it is different from general format where i only capture the src and img.
<div class="avatar" style="background-image:
url(customavatars/545/5453285_1410924046.jpg);background-size: cover;background-repeat: no-repeat;background-position: center;width: 120px;height: 120px;border-radius: 70px;margin: 10px 0 10px 10px;" onmouseover="showUserInfoBox('userinfo234340519')" onmouseout="clearShowUserInfoTimer()"></div>
Original web site
Visit https://mobile.uwants.com/viewthread.php?tid=19780494&extra=page%3D1
The image : Visit https://imgur.com/Gbckna1
Thanks
Since the image you want to get is defined as a css background, you'll need to extract the contents of the style attribute, and parse the css you get from that.
You can try to do this yourself, but it would probably be easier to use an existing library, such as cssutils or tinycss2.
You can use re_first()
response.xpath('//div[#class="avatar"]/#style').re_first(r'url\([^\)]+')
So I want to replace the company logo. These are what i tried:
copy new image to the images folder and change the img tag to reference to the new logo.
make the new logo filename same as the old filename. delete the old logo and put the new one in it's place
my problem is that when I change tried the 2 things above, the new logo is displayed like it's been zoomed in. It's weird since the width and height parameters are used in the img tag.
Any ideas what I could be doing wrong?
Some info:
This is the html inside in the twig that references the company logo. This is the one before I started my edits.
<div class="navbar-header">
<a class="navbar-brand" href="http://www.mycompany.com" title="Buy from us" rel="home" target="_blank">{% image "#AppBundle/Resources/public/images/our-company-logo.png" %}<img src="{{ asset_url }}" width="214" height="45" alt="Flinders logo">{% endimage %}</a>
</div>
notes:
I'm running symfony in dev mode
I cleared my symfony cache
I dumped my assets (php app/console assetic:dump) just in case it makes a difference.
why not use it as a background image inside the nav-brand css class and with property of background-position cover or something like that?
I am currently working in Wordpress usnig the Visual Composer. I wish to make an image simply change on mouseover for now. I have read many different ways of doing this with Java and CSS but nothing seems to be specifically for this.
Many thanks!
Working example checks it , replace images with your own.
<a class="foo" href="#">
<img src="http://lorempixel.com/400/200/food/1/" />
<img src="http://lorempixel.com/400/200/food/2/" />
</a>
<style>
.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}
</style>
http://jsfiddle.net/gd8ba/light/
Thanks
Say, I have a link -
<a class="my-link" href="http://www.my-website.com"></a>
I need to show an image on mouse over this link. So, I will add two things in my CSS-
To add image to the link
.ge-link { background-image: url('http://my-website.com/my-img.png'); background-size: contain;background-repeat: no-repeat;}
To add hovering property
.ge-link:hover { background-image: url('http://my-website.com/my-img-hover.png'); background-repeat: no-repeat; background-size: contain;}
I know this post is old, but recently I had the same inquiry, so I found this plugin https://es.wordpress.org/plugins/image-over-image-vc-extension/. I've tested it with WPBakery on WP 5.6.3 and it works fine.
Here are the demos. Hope it works for anyone needing this functionality.
Well, this is a weird one.
I have web page with several svg images.
(I also detect not supported svg browsers and display a regular image instead, but I guess it is not relevant here).
Sometimes (I found it so far in Chrome OSX and Windows), the browser displays another svg instead of the one mentioned in the html .
Assuming I have to svg files linked from my page, logo.svg and logo2.svg, it might display logo2.svg intead of logo.svg.
I've inspected the elements , and all seems to be fine. HTML referes to one svg, while the browser displays a different svg (located on another part of the html) instead.
Any idea ?
<a href="Home">
<div style="float:left;width:170px;height:154px;">
<object class="svg-default" data="/images/logo.svg" type="image/svg+xml" style="width:100%; height:100%;z-index:1000;">
</object>
<img class="svg-fallback" src="/images/logo.png" style="width: 151px; height: 41px; display: none;">
</div>
</a>
Maybe you can dynamically insert the div element with the <object> as its child. And when you want to show another svg, remove the previous div & insert a new div with updated svg.
I am able to get an svg to show just fine when I use
<img src="../images/jte.svg" alt="Logo">
however, when I try and display via css using the following:
html
<div class="logo2">
</div>
css
.logo2 {
background-image: url(jte.svg);
}
Nothing is being displayed. Any idea why this is happening? I have tried multiple different path options "('../images/jte.svg') ('jte.svg) no avail though.
Use a defined width and height for the element in question, or simply attach it to the body. For example:
body { background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg')