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
Related
Page on URL https://www.topmazoretkypraha.com/fotogalerie.html cannot load in Chrome properly. When I look to console in devtools there is 5 times an error : "Failed to load resource: net::ERR_SPDY_PROTOCOL_ERROR" .
Because of that 5 thumbnails of pictures of 5 galleries don't appear on screen. I can find what requests are behind these errors. It is for example GET of "https://www.topmazoretkypraha.com/phpThumb/phpThumb.php?src=/fotogalerie/2018/Kromeriz/img00001.jpg&w=120&h=120&hash=fb0137670311c4ace04dce839d03701e" .
Because it is all about website hosting it could be hard to debug. But I think there is a Nginx and than Apache with PHP. The phpThumbnailer is requested by Chrome from HTML source. What should be my steps to solve this problem?
I searched google but I'm rather confused than clever from that. So I decided to ask here.
include lines 108-132 of https://www.topmazoretkypraha.com/fotogalerie.html
<div class="panelGaleries" align="justify">
<span class="orangetitle">Fotogalerie za rok 2018</span><br /><br />
<span class="bodytext">
<div style="position:relative;">
<img src="/phpThumb/phpThumb.php?src=/fotogalerie/2018/Kromeriz/img00001.jpg&w=120&h=120&hash=fb0137670311c4ace04dce839d03701e" alt="O poklad hanáckých Atén" />O poklad hanáckých Atén
</div>
<div style="clear:both;"> </div>
<div style="position:relative;">
<img src="/phpThumb/phpThumb.php?src=/fotogalerie/2018/Chodov/img00001.jpg&w=120&h=120&hash=58dadfc8c122ee14c51487e5987a43d0" alt="Majorettes Chodov" />Majorettes Chodov
</div>
<div style="clear:both;"> </div>
<div style="position:relative;">
<img src="/phpThumb/phpThumb.php?src=/fotogalerie/2018/Kolin/img00001.jpg&w=120&h=120&hash=e540c90e1f1608608984fcaeb8a3093f" alt="Kmochův Kolín" />Kmochův Kolín
</div>
<div style="clear:both;"> </div>
<div style="position:relative;">
<img src="/phpThumb/phpThumb.php?src=/fotogalerie/2018/MS/img00001.jpg&w=120&h=120&hash=8f9f4b9fcd7d06a760c5c068cd413363" alt="IFMS - Mistrovství světa" />IFMS - Mistrovství světa
</div>
<div style="clear:both;"> </div>
<div style="position:relative;">
<img src="/phpThumb/phpThumb.php?src=/fotogalerie/2018/wannado/img00001.jpg&w=120&h=120&hash=ddae43d181ff7378fed770527a92714d" alt="Wannado festival" />Wannado festival
</div>
<div style="clear:both;"> </div>
</span>
</div>
there should be no error when data is loaded, but still there is
The problem was that web hosting adds HTTP header Content-Encoding: gzip for all the PHP content even when the Content-Type: image/jpeg is in the output from that script. For the hotfix I added HTTP header Content-Encoding: none into that script. And it worked. But now I am asking web hosting provider to not add the wrong header if Content-Type: image/jpeg is present. At HTTPS it makes sense.
I want to create a program to show iframes from a specific server which sends JPEG streams through HTTP and play sound from another HTTP port together and synced. I've searched in the whole forum but didn't find a straight forward answer to it.
I've created the following HTML5 code, it works but the problem is the image streams coming earlier than voice and it is out of sync. My aim is to sync the image stream and voice together by setting a delay or buffer for image.
Here is my code:
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<IFRAME id="video" src="http://192.168.1.111:8081" width="800px" align="center" height="600px" scrolling="no" frameborder=no marginheight="0px"></IFRAME>
</div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-6">
<audio controls autoplay>
<source src="http://192.168.1.114:8000/sound2" type="video/ogg">
</audio>
</div>
<div class="col-md-4"></div>
</div>
I would appreciate if you post any solution to this problem.
Thanks.
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">
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.
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>.