i'm using Laravel for my application, i want to show a PDF file in view
i know i have to use <embed> or <iframe> but when i use this tags, i can't see my PDF file in my view and it will download automatic, i dont want to download file, just need to see PDF file content.
this is my view :
<div class="row justify-content-center">
<div id="detail_div_a4">
<embed src="{{ $letter->image }}" type="application/pdf" width="100%" height="600px">
</div>
</div>
src return my PDF file location in $letter->image
thank you for your helps <3
As you mentioned, you can use "iframe" to display your pdf. Here is a sample of code that should work for you.
<div class="row justify-content-center">
<iframe src="{{ asset('folder/file_name.pdf') }}" width="50%" height="600">
This browser does not support PDFs. Please download the PDF to view it: Download PDF
</iframe>
</div>
You can play around with the asset declaration to include your variable vs the file path. You can also test this code without your variable to see if that is causing the issue. You may also have some conflicting code in your custom div. Keep in mind you can style the pdf container in the iframe, so you may not need the div labeled "detail_div_a4". Good luck.
Here is another thread that may offer some additional support: HTML embedded PDF iframe
Related
I have the following problem. I can't display the image in the blade template. I use bootstrap and laravel 5.8. I've tried different options (without asset, with / ahead). Folder img in public.
Code blade and html from browser below.
blade
<div class="carousel-item-a intro-item bg-image"
style="background-image: url({{asset('img/slide-1.jpg')}})">
chrome
<div class="carousel-item-a intro-item bg-image"
style="background-image: url(http://127.0.0.1:8000/img/slide-1.jpg)">
Try this. Looks like you should concatenate string with php code.
<div class="carousel-item-a intro-item bg-image"
style="background-image:url('". {{asset('img/slide-1.jpg')}}."')">
I have the following html code that tried to place in my WordPress page.
html:
<div class="hovereffect">
<img src="<?php echo get_template_directory_uri() ?>phone.jpg" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
At the moment everything is in the site except the image that does not show.
How can I use this code WordPress in a way that it can display the image?
I think you forget to tell which place it should get the images from. And you are also forgetting a semicolon after the get_template_directory_uri();.
This is an example, but here i'm telling which folder to get the image from:
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/your_image.jpg">
you can do that but it is not a good practice to paste this code as it is in WordPress editor,
upload this image in media and get link of that image
Edit page, select text mode from top right corner of your editor and paste code these i.e
<div class="hovereffect">
<img src="http://example.com/wp-content/uploads/2016/07/img.png" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
Here is good practice create a template for that page and write there your code.
Image replace with feature image
Heading with page title.
Detail with page content
link with page permalink.
Not enough reputation to leave a comment so I will leave this as an answer instead.
Assuming phone.jpg is at the root of your theme, you're forgetting the / (slash) before phone.jpg.
It should be
<img src="<?php echo get_template_directory_uri(); ?>/phone.jpg" >
PHP won't get parsed inside a page. Just upload the image to the WordPress media library and link to it directly.
So I've got a part on my website where I show a pdf in an iframe.
This works perfectly fine on computers.
However, some mobile devices start downloading the pdf immediately when they load the website.
This is the code I use.
<div class="showbox" style="display: none;">
<div class="embed-container">
<iframe src="/images/pdf-file.pdf" style="border:none;"></iframe>
</div>
</div>
So I just want the mobile users to be able to visit the website without automatically downloading the pdf.
Any ideas how to pull this off?
how about you use Responsive utility classes ?
take a look at: http://getbootstrap.com/2.3.2/scaffolding.html#responsive
scroll down untill "Responsive utility classes"
you can set your html like this:
<div class="showbox" style="display: none;">
<div class="embed-container">
</div>
</div>
and then put this js anywhere:
if( !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('.showbox .embed-container').append('<iframe src="/images/pdf-file.pdf" style="border:none;"></iframe>');
}
I'm rather new to programming, but I'm trying to find a way to do what is described below.
<body>
<div class="gallery">
<img src="photo_1.jpg">
<img src="photo_2.jpg">
<img src="photo_3.jpg">
<!-- trigger for user to load items that weren't downloaded on page load -->
<img src="photo_4.jpg">
<img src="photo_5.jpg">
<img src="photo_6.jpg">
</div>
</body>
I'm trying to find PHP functions that would, ideally, only load the first 3 img embeds within a certain class/ID, and have a clickable trigger to request the remaining img embeds from the server.
I don't know if this is how the typical message board software(such as vBulletin) handles things with "spoiler tags" .. as in whether or not it actually prevents loading, or just hides the content from view. Something like that, if it actually prevents loading, is what I'd like to know about.
First, this has nothing to do with PHP.
The only way to prevent a page from loading the image is to not include the tags on the page.
You could accomplish this a couple ways:
Place the last three photos inside a hidden container and use a Javascript click event to display them when wanted, but that still loads the images when the page is loaded.
Or, you can use an AJAX call to retrieve the items only on demand. Unless they are really large images I would think the first option the best.
<div class="gallery">
<img src='photo1.jpg'/>
<img src='photo2.jpg'/>
<img src='photo3.jpg'/>
<a href="#" onClick='document.getElementById("hidden-gallery").display="visible"'>show more</a>
<div id="hidden-gallery" class="hidden-gallery" style="display:none">
<img src='photo4.jpg'/>
<img src='photo5.jpg'/>
<img src='photo6.jpg'/>
</div>
</div>
I recognize that embedding CSS styles and Javascript the way I did is not the preferred method but it is there just for the examples sake.
I have many documents on my server that are available for my visitors to download. I have a display set up like so:
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320X200" alt="ALT NAME">
<div class="caption">
<h3>Header Name</h3>
<p>Description</p>
<p align="center">Download</p>
</div>
</div>
</li>
</ul>
Now within this I currently have a image as the main display for each document. I am wanting to display a preview of the document in that space. Maybe a screenshot completed by the browser on page load of just the first page of the document.
I have tried <iframe src="assets/documents/NHSHandbook1314.doc" width="230" height="144"></iframe> instead of the image but that resulted in nothing being displayed in the iframe and the document downloading as soon as the page loads.
I would like to do this using javascript or php on page load. I basically want the browser to take a "screenshot" of the external document and then display it for the visitor to preview. I don't want them to be able to interact "read" the document from the preview, just see what they are downloading. (at least the first page)
I hope that makes sense on what I am wanting to do!
Browsers cannot render Microsoft Word documents. You will need to generate some sort of thumbnail on the server and display that.