I am using twitter bootstrap template in My laravel app.
I need add image which include in my imgs folder in public folder home.jpg. how can I add this image to following bootstrap scripts.
<div class="item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
Laravel By default takes public folder path public/
Let's say your home.jpg file is in public/image/home.jpg
so in your html it will be <img src="http://localhost:8000/image/home.jpg">
Laravel also has specific methode {{ HTML::image('image/home.jpg') }} for this.
For mere refer http://laravel-recipes.com/recipes/185/generating-an-html-image-element
OK finally I got solutions this is working
<img class="first-slide" src="{{asset('/imgs/1.gif')}} " alt="First slide">
Related
I am using Visual Composer / WPBackery to display a "services-image" block on my page. Visual Composer or my theme seems to be using the class="attachment-large size-large" by default which is causing my images to be larger than what is required.
A recent test on GTMetrix showed The following images are resized in HTML or CSS. Serving scaled images could save 226.2KiB
I would like to edit the Visual Composer plugin or the theme files in order to use the class="attachment-small size-small"
This is what is shown on my page:
<div class="wpb_column vc_column_container vc_col-sm-4"><div class="vc_column-inner"><div class="wpb_wrapper">
<figure class="wpb_content_element overlay-info no-mask ">
<img width="768" height="512" src="http://rdz.nzl.mybluehost.me/wp-content/uploads/2020/02/YOUR-EXPERIENCE-1024x683.jpg" class="attachment-large size-large" alt="">
<figcaption class="d-flex">
<div class="align-self-center mx-auto">
<h4 class="mb-0 text-uppercase letterspace-4">YOUR EXPERIENCE</h4>
</div>
</figcaption>
</figure>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p style="text-align: center;">More than anything, I aspire to enhance your experience.<br>
I do that by having fun with you.<br>
It is the single most important aspect of your day.</p>
</div>
</div>
</div></div></div>
the image being used is http://rdz.nzl.mybluehost.me/wp-content/uploads/2020/02/YOUR-EXPERIENCE-1024x683.jpg I would like to use the optimized /resized version of this image instead.
Please assist me in where I can change the default image attachment class which Visual Composer / WPBackery uses?
Thank you
ISSUE RESOLVED:
The issue was related to the path of script calling js. Original script:
````<script src="js/app.js" charset="utf-8"></script>````
Working script:
````<script src="/js/app.js" charset="utf-8"></script>````
The / missing at the beginning was working on initially loaded pages as you navigate deeper into the site it gets thrown off.
I am using the bootstrap accordion with cards to present data to users. When the page was first created as a static page the accordion worked. As soon as I called data to it the accordions lost functionality and can't be opened or collapsed. They stay in the position they are in. Inspecting the webpage shows all the code present but something is blocking the "collapse" function. This is also true of the aria-expanded class. Choosing "true" / "false" have no effect on the class functionality.
I have created a new file, copy and pasted the code into it without the DB calls and verified that it works so it appears the issue is related directly to the PHP calls, the first being:
{{ $department->name }}
The other interesting thing is that after deleting (tried commenting out as well) the DB calls, the page still will not function properly. However, the page where I have not done any data calls but am re-using the same HTML works.
Department.blade.php
<div class="container">
<center><h1 id="">{{ $department->name }}</h1></center>
//Second location data is being called
<center><h1 class="top-space">Mission Statement</h1></center>
<!-- Dynamically allow users with permission to change the mission statement -->
<p id="">{{ $department->mission_statement }}</div>
//Accordion HTML
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
News and Events
</button>
</h5>
</div>
<!-- This should fill with an index view of the department's news and events. OnClick navigate the user to that record in view (layout.single.NandE.blade.php). Control loaded data on-page, only load Card Titles, NandE first. The rest of the card's content should load on a delay to improve user experience -->
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
</div>
</div>
</div>
Test.blade.php (File where accordion works)
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
News and Events
</button>
</h5>
</div>
<!-- This should fill with an index view of the department's news and events. OnClick navigate the user to that record in view (layout.single.NandE.blade.php). Control loaded data on-page, only load Card Titles, NandE first. The rest of the card's content should load on a delay to improve user experience -->
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<ul>
<li>
:
</li>
</ul>
</div>
</div>
</div>
The desired behavior is that when the Department.blade.php file is called the first accordion with news and events is openly displaying the events. On click of the accordion, it should collapse.
Bootstrap's docs say:
Using the card component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use .accordion as a wrapper.
Try changing this:
//Accordion HTML
<div id="accordion">
To this:
//Accordion HTML
<div class="accordion">
I already made a homepage including the grid system of bootstrap, but now im using mainly includes to keep everything tidy but the grid system doesnt seem to work at all. even if i copy the example code of bootstrap itself.
this is the first code of my content php file. including obviously the row part. These are stacked ontop of eachother not next to eachother.
PS: the .content-wrapper has no styling yet so its not affecting anything and the .content has only top and bottom padding.
<div class="content-wrapper">
<div class="content">
<h1>The Test Heading</h1>
<p>
text
</p>
</div>
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
</div>
</div>
here is the index.php file i got with the content area
<div class="container">
<!-- Navigation area -->
<?php include_once ("php/navigation.php");?>
<!-- Carousel -->
<?php include_once ("php/carousel.php");?>
<!-- Content area -->
<?php include_once ("php/content.php");?>
</div> <!-- end of container -->
im not sure if it has to do something with including a file and the grid system, but carousel, container etc all working fine so it should find the css file after being included.
Sidequestion: is a method like this useful? working with includes only? or is it rather non-practical?
So what do u want to do with grid system, because you only have one col so it will just go from begining of file to col 6 it will look like it doesnt do anything rly? You can put lets say and then your div with col and it will move it and so on.
Hi I am new at using codeigniter framework. I am trying to upload the image with the help of imagemagick on my web Page(Wamp Server), but when i try to upload it , it shows in admin panel but it does not show in my web page. I do not know how to use image with the help of imagemagick. Please Help .
<li>
<div class="slider-list">
<div class="slider-img new-height-dev">
<%assign var=category_image value=$this->general->getGeneratedImage('category_master',$category_data[i].vImage,'','1','Yes','','category_image_size')%>
<a href="<%$this->general->getProjectLandingUrl($category_data[i])%>" title="<%$category_data[i].vCategoryName%>">
<img src="<%$category_image%>" alt="<%$category_data[i].vCategoryName%>" title="<%$category_data[i].vCategoryName%>"/>
</a>
</div>
<div class="slider-title" title="<%$category_data[i].vCategoryName%>">
<a href="<%$this->general->getProjectLandingUrl($category_data[i])%>">
<%$category_data[i].vCategoryName%>
</a>
</div>
</div>
</li>
I am using ckeditor to insert some html structure into db. I firstly use code view to paste html structure into editor, after inserting into mysql db, until echo at webpage, the html structure data are still maintained.
However, when the same data is called into the same ckeditor again for updating, the structure is destroyed, and I found the ckeditor has automatically changed html tags to the codes, below is an extract:-
A) html code to be pasted to editor code view for inserting (good)
<a href="#">
<img src="../catalog/view/theme/default/images/services/b1.jpg" alt="" />
<div class="btn-gradient-yellow">Details
<div class="btn-arrow"></div>
</div>
<div class="cat-title-bg">
SERVICES
</div>
</a>
B) db data (good)
<a href="#">
<img src="../catalog/view/theme/default/images/services/b1.jpg" alt="" />
<div class="btn-gradient-yellow">Details
<div class="btn-arrow"></div>
</div>
<div class="cat-title-bg">
SERVICES
</div>
</a>
C) webpage data called from db (good)
called by html_entity_decode($record["content"],ENT_COMPAT, 'UTF-8');
<a href="#">
<img src="/catalog/view/theme/default/images/services/b1.jpg" alt="" />
<div class="btn-gradient-yellow">Details
<div class="btn-arrow"></div>
</div>
<div class="cat-title-bg">
SERVICES
</div>
</a>
D) code view in ckeditor, with contents filled from the above data (changed)
called by html_entity_decode($record["content"],ENT_COMPAT, 'UTF-8');
<img alt="" src="../catalog/view/theme/default/images/services/b1.jpg" />
<div class="btn-gradient-yellow">Details
<div class="btn-arrow"> </div>
</div>
<div class="cat-title-bg">SERVICES</div>
How can I ask ckeditor not to add changes to the data?
CKEditor modifies your HTML because it is incorrect. You cannot put block elements inside of <a> unless you use HTML5 which isn't supported by CKEditor yet.
See my answer for related question. Also take a look at this one regarding blocks in <a>.