I'm trying to display play button over a thumbnail with CSS in my WordPress. I tried many methods but always is bad. Can you help me, where I am wrong?
.post-thumbnail-sidebar {
display: block;
text-align: center;
}
.post-thumbnail-sidebar embed,
.post-thumbnail-sidebar iframe,
.post-thumbnail-sidebar object {
margin-bottom: 30px;
}
.post-thumbnail-sidebar a {
position: absolute;
display: block;
background: url("https://i.imgur.com/FPwyRnP.png") no-repeat;
height: 85px;
width: 136px;
top: 100%;
left: 100%;
margin: -64px 0 0 -88px;
}
<a class="post-thumbnail-sidebar" href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( $r_post_thumb_size, array( 'itemprop' => 'image' ) ); ?>
</a>
Not enough but i think you can start with this.
here's a fiddle
.second-img {
position: absolute;
top: 0px;
margin-left: 20px
}
<div>
<img class="background-img" width="100%" height="100%" style="position:absolute; top:0; left:0;" src= "https://vincentloy.files.wordpress.com/2012/01/in-time-2011-r5-line-xvid-fusion_screenshot_4.jpg">
<img class="second-img" width="100%" height="100%" src = "http://sanyangfrp.com/data/out/805/511806414-play-button-png.png" />
</div>
Related
I have a little problem.I'm still, learn to program and I don't have very good knowledge.
I'm trying to make view like this:
In this view items are located very evenly.
In my view items are not looking good:
Why i have to repair in my code to look like this online shop view?
My code is here:
<?php foreach($posts as $post) : ?>
<div class="col-xs-12 col-sm-6 col-md-4">
<h3><?php echo $post['title']; ?></h3>
<?php if($this->session->userdata('logged_in')) :?>
<small class="post-date">Posted on: <?php echo $post['created_at']; ?> in <strong><?php echo $post['name']; ?></strong></small>
<?php endif ?>
<div class="zoom-in">
<img class="post-thumb" src="<?php echo site_url(); ?>assets/images/posts/<?php echo $post['post_image']; ?>">
</div>
<?php echo word_limiter($post['body'],10); ?>
<b></b>
<input type="button" class="btn btn-danger addcart" productid="<?php echo $post['id'] ?>" value="Добави в количката">
<p><a class="btn btn-link" href="<?php echo site_url('/posts/'.$post['slug']); ?>">Read more</a></p>
</div>
<?php endforeach; } ?>
Thank you in advance!
resize Image Like this
html, body {
color: #333;
font-size: 16px;
line-height: 20px;
}
body {
margin: 20px;
}
h1 {
line-height: 1.2;
margin-bottom: 35px;
text-align: center;
}
h2 {
text-align: center;
}
img {
height: auto;
max-width: 100%;
}
.image-grid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 auto 35px;
max-width: 920px;
}
.svg-image-grid {
clear: both;
margin: 0 auto 35px;
max-width: 920px;
overflow: hidden;
position: relative;
}
/** Screen readers only class from Bootstrap */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
clip-path: inset(50%);
border: 0;
}
/** Actual code examples */
/** Background */
.image-bg {
background-position: center center;
background-size: cover;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin: 5px;
width: calc(25% - 10px);
}
.image-bg-placeholder {
height: 100%;
visibility: hidden;
width: 100%;
}
/** Object-fit */
.image-fit {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin: 5px;
position: relative;
width: calc(25% - 10px);
}
.image-fit-placeholder {
height: 100%;
visibility: hidden;
width: 100%;
}
.image-fit-img {
bottom: 0;
height: 100%;
left: 0;
object-fit: cover;
object-position: center;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
/** Absolute positioning */
.image {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin: 5px;
overflow: hidden;
position: relative;
width: calc(25% - 10px);
}
.image-placeholder {
height: 100%;
visibility: hidden;
width: 100%;
}
.image-img {
left: 50%;
max-height: 150%;
max-width: 177%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/** SVG */
.image-svg {
float: left;
margin: 5px;
padding-bottom: calc(25% - 10px);
position: relative;
width: calc(25% - 10px);
}
.image-svg svg {
bottom: 0;
display: block;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
/** Responsive grid */
#media (max-width: 480px) {
.image,
.image-fit,
.image-bg,
.image-svg {
width: calc(50% - 10px);
}
.image-svg {
padding-bottom: calc(50% - 10px);
}
}
<h1>Techniques to crop and resize images with CSS</h1>
<h2>Image as a background</h2>
<div class="image-grid">
<a href="https://www.flickr.com/photos/teroauralinna/33704491300" class="image-bg" style="background-image:url(https://farm3.staticflickr.com/2809/33704491300_1df01dd919_z_d.jpg)" target="_blank">
<img class="image-bg-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
<img class="image-bg-img sr-only" src="https://farm3.staticflickr.com/2809/33704491300_1df01dd919_z_d.jpg" alt="Cropped image as a background example" />
</a>
<a href="https://www.flickr.com/photos/teroauralinna/33704488370" class="image-bg" style="background-image:url(https://farm3.staticflickr.com/2848/33704488370_9572b9d270_z_d.jpg)" target="_blank">
<img class="image-bg-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
<img class="image-bg-img sr-only" src="https://farm3.staticflickr.com/2848/33704488370_9572b9d270_z_d.jpg" alt="Cropped image as a background example" />
</a>
<a href="https://www.flickr.com/photos/teroauralinna/34088934825" class="image-bg" style="background-image:url(https://farm4.staticflickr.com/3947/34088934825_0acfe80a04_z_d.jpg)" target="_blank">
<img class="image-bg-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
<img class="image-bg-img sr-only" src="https://farm4.staticflickr.com/3947/34088934825_0acfe80a04_z_d.jpg" alt="Cropped image as a background example" />
</a>
<a href="https://www.flickr.com/photos/teroauralinna/34088930595" class="image-bg" style="background-image:url(https://farm4.staticflickr.com/3956/34088930595_2b84cec168_z_d.jpg)" target="_blank">
<img class="image-bg-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
<img class="image-bg-img sr-only" src="https://farm4.staticflickr.com/3956/34088930595_2b84cec168_z_d.jpg" alt="Cropped image as a background example" />
</a>
</div>
I have a button to choose an image and i have a space where i want to show a preview of that image. This space is just above of that button.
Now I want to add a dashed border on this image and border opacity should be 0.47. But the problem is I have already inserted image tag in my code and i'm just changing the <img src=""> dynamically using JS & that is why i can see the border even before choosing an image.
I want this kind of thing:
When image is there its perfectly fine, like this:
But image is not there its showing a small border just above the post button, like this:
Here is my HTML/PHP code :
<div>
<div id="post-image-content">
<div id="post-image-div">
<img id="blah" class="post-image" alt=" " width="100" height="100"/>
<img id="closes" class="close-button-image" src="<?php echo $this->webroot.'mainsite/img/img-close.png'?>" />
</div>
</div>
<a href="#">
<i class="fa fa-camera" aria-hidden="true" id="capture_image_01"></i>
</a>
<?php echo $this->Form->input('cover_image_url', array('type' => 'file','onchange' => 'document.getElementById(\'blah\').src = window.URL.createObjectURL(this.files[0])','style' => array("display:none"),'label' => false, 'div' => false));?>
</div>
And here is my CSS
.post-image {
margin-bottom: 10px;
margin-left: 10px;
border-radius: 4px;
opacity: 0.5;
border: 2px dashed rgba(20, 134, 171, 0.47);
padding: 3px;
}
#post-image-content {
display: block;
overflow: hidden;
}
#post-image-div {
position:relative;
z-index:0;
float: right;
margin: 2px 2px;
}
#post-image-div:hover .close-button-image {
position: absolute;
right: 6px;
top: 8px;
display: block !important;
z-index: 1;
height: 10px;
width: 10px;
}
.close-button-image {
position: absolute;
right: 6px;
top: 8px;
display: none;
z-index: 1;
height: 10px;
width: 10px;
}
Any help would be highly appreciated as i don't have any clue now.
You can add condition before image, if no default image or img tag not needed to shown
<?php if ($image): ?>
<img id="blah" class="post-image" alt=" " width="100" height="100"/>
<?php endif ?>
or add condition to that class only (apply required css)
<img id="blah" class="<?php echo $image ? 'post-image' : '' ?>" alt=" " width="100" height="100"/>
#post-image-div{
border: 2px dashed rgba(20, 134, 171, 0.47);
padding:2px;
border-radius:3px;
}
#post-image-div img,#post-image-div{
width:100px;
height:100px;
<div id="post-image-div">
<img id="closes" class="close-button-image" src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" />
</div>
try this code
I'm trying to build a regex php pattern for a multiline string, to remove the div that has the class of sn_published
I have tried (?s)<div class="sn_published".*?<\/div> it works but wont get the entire content within the div. It stops at the very first ending div.
Any idea? Thanks in advance.
<div class="sn_published">
<div id="snfwid4" class="sn_published_inner clearfix">
<script type="text/javascript">
/* <![CDATA[ */
if(!$.browser.msie||$.browser.version>7){if($.browser.msie&&$.browser.version<9){
document.write('<div class="fb"><iframe src="/9jagallery//www.facebook.com/plugins/like.php;jsessionid=4C9A788DF2A51CA6C494B8A4150A4605?href=http://www.9jagallery.ng/6999862?utm_source=facebook&utm_medium=social&utm_campaign=9jagallery_web&action=recommend&send=false&layout=button_count&width=168&show_faces=false&font&colorscheme=light&height=21&appId=964432556951162" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:168px;height:21px;" allowTransparency="true"></iframe></div>');
}else{
document.write('<div id="fwid5" class="fb"><fb:share-button type="button_count" href="http://www.9jagallery.ng/6999862?utm_source=facebook&utm_medium=social&utm_campaign=9jagallery_web"></fb:share-button></div>');
fbAsyncIds.push('fwid5');
fbStatUrls.push('https://www.blick.ch/stats/?rt=1&objId=6999862&type=article&ctxId=1912&pubId=2&cat=news&meta=like&title=See+the+male+celebrities+in+trad%2C+dapper+looks+on+the+red+carpet&url=http%3A%2F%2Fwww.9jagallery.ng%2Ffashion%2Famaa-2017-see-the-male-celebrities-in-trad-dapper-looks-on-the-red-carpet-id6999862.html');
}}
/* ]]> */
</script><div id="fwid5" class="fb"><fb:share-button type="button_count" href="http://www.9jagallery.ng/6999862?utm_source=facebook&utm_medium=social&utm_campaign=9jagallery_web" class=" fb_iframe_widget" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=&container_width=0&href=http%3A%2F%2Fwww.9jagallery.ng%2F6999862%3Futm_source%3Dfacebook%26utm_medium%3Dsocial%26utm_campaign%3D9jagallery_web&locale=en_US&sdk=joey&type=button_count"><span style="vertical-align: bottom; width: 69px; height: 20px;"><iframe name="fa3d670dae4582" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:share_button Facebook Social Plugin" src="https://www.facebook.com/plugins/share_button.php?app_id=&channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FXBwzv5Yrm_1.js%3Fversion%3D42%23cb%3Df3203d50df82472%26domain%3Dwww.9jagallery.ng%26origin%3Dhttp%253A%252F%252Fwww.9jagallery.ng%252Ff31a62e488eb1d4%26relation%3Dparent.parent&container_width=0&href=http%3A%2F%2Fwww.9jagallery.ng%2F6999862%3Futm_source%3Dfacebook%26utm_medium%3Dsocial%26utm_campaign%3D9jagallery_web&locale=en_US&sdk=joey&type=button_count" class="" style="border: none; visibility: visible; width: 69px; height: 20px;"></iframe></span></fb:share-button></div>
<div class="gp">
<div id="___plusone_0" style="text-indent: 0px; margin: 0px; padding: 0px; background-color: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 90px; height: 20px; background-position: initial initial; background-repeat: initial initial;"><iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 90px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" width="100%" id="I0_1500641915432" name="I0_1500641915432" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&size=medium&hl=en&origin=http%3A%2F%2Fwww.9jagallery.ng&url=http%3A%2F%2Fwww.9jagallery.ng%2F6999862&gsrc=3p&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.m8KuVzGTpkA.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCNcaOvNVX1pvUOBoBGzpH6DVnAaSQ#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1500641915432&parent=http%3A%2F%2Fwww.9jagallery.ng&pfname=&rpctoken=76330505" data-gapiattached="true" title="G+"></iframe></div>
</div><div class="tw" style="margin-right:0px;">
<iframe id="twitter-widget-1" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-share-button twitter-share-button-rendered twitter-tweet-button" title="Twitter Tweet Button" src="http://platform.twitter.com/widgets/tweet_button.5f60791584f95f2ec483faec8b16a58b.en.html#dnt=false&id=twitter-widget-1&lang=en&original_referer=http%3A%2F%2Fwww.9jagallery.ng%2Ffashion%2Famaa-2017-see-the-male-celebrities-in-trad-dapper-looks-on-the-red-carpet-id6999862.html&size=m&text=AMAA%202017%3A%20See%20the%20male%20celebrities%20in%20trad%2C%20dapper%20looks%20on%20the%20red%20carpet%20%409jagalleryNigeria247&time=1500641916562&type=share&url=http%3A%2F%2Fwww.9jagallery.ng%2F6999862%3Futm_source%3Dtwitter%26utm_medium%3Dsocial%26utm_campaign%3D9jagallery_web" data-url="http://www.9jagallery.ng/6999862?utm_source=twitter&utm_medium=social&utm_campaign=9jagallery_web" style="position: static; visibility: visible; width: 61px; height: 20px;"></iframe>
</div>
</div>
</div>
<div foobar>jhuj </div>
You can't. You should use DomDocument for this situation. That makes your job a lot easier.
You can load the HTML in the Dom, loop through all Div with getElementsByTagName method and filter what you need.
JSFiddle here.
Why isn't my a.previous-slide-arrows' and a.next-slide-arrows' background-image visible at all?
I was working on a web page in which I had included this code for the slideshow through the PHP include statement. There, the vertical-align applied to a.previous-slide-arrow and a.next-slide-arrow does not seem to work at all.
I posted the same code here (changed the paths to images as the ones I was using there were on localhost, and changed some PHP for loops for writing the <img> tag which appears 6 times) - and strangely the vertical-align does work here, but the background-image applied to a.previous-slide-arrow and a.next-slide-arrow is not visible. Why?
.image-slideshow-container {} .image-slideshow-container img {
position: fixed;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
img.slider-image1 {
display: block;
}
.first-viewport {
height: 100%;
width: 100%;
position: absolute;
display: table;
}
a.previous-slide-arrow,
a.next-slide-arrow {
display: table-cell;
vertical-align: middle;
position: relative;
color: transparent;
opacity: 0.7;
text-align: center;
/* =s */
left: 20px;
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png");
background-repeat: no-repeat;
}
a.next-slide-arrow {
right: 20px;
left: auto;
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png");
}
.navigation-arrows-container a.previous-slide-arrow:hover,
.navigation-arrows-container a.next-slide-arrow:hover {
opacity: 1;
}
.navigation-bullets-container {
text-align: center;
margin-top: 20px;
margin-bottom: 60px;
display: table-cell;
vertical-align: bottom;
position: relative;
}
.navigation-bullets-container span {
display: none;
}
.navigation-bullets-container a {
width: 20px;
height: 20px;
display: inline-block;
margin-right: 5px;
background: #4b4040;
}
.navigation-bullets-container a:hover {
background: black;
}
.navigation-bullets-container a.active {
background: black;
}
<div class="image-slideshow-container">
<img class="slider-image1" src="http://i992.photobucket.com/albums/af42/webtreatsetc/Textures%20Patterns%20Brushes%20from%20Webtreats/LightBlur.png" alt="pitcher!" />
<img class="slider-image2" src="http://m.rgbimg.com/cache1vNdB6/users/x/xy/xymonau/600/ooNRizq.jpg" alt="pitcher!" />
<img class="slider-image3" src="http://cdn.desktopwallpapers4.me/media/thumbs_400x250/3/23394.jpg" alt="pitcher!" />
<img class="slider-image4" src="http://papers.co/wallpaper/papers.co-sd19-sand-storm-gradient-blur-8-wallpaper.jpg" alt="pitcher!" />
<img class="slider-image5" src="http://m.rgbimg.com/cache1sw4YI/users/x/xy/xymonau/600/nxXqi9O.jpg" alt="pitcher!" />
<img class="slider-image6" src="http://previews.123rf.com/images/hospitalera/hospitalera0805/hospitalera080500016/3089997-Halftone-blue-pattern-with-little-dots-and-some-zoom-blur-applied--Stock-Photo.jpg" alt="pitcher!" />
</div>
<div class="first-viewport">
<a class="previous-slide-arrow" href="#"><</a>
<div class="navigation-bullets-container">
<a class="navigation-bullet1" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
<a class="navigation-bullet2" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
<a class="navigation-bullet3" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
<a class="navigation-bullet4" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
<a class="navigation-bullet5" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
<a class="navigation-bullet6" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
</div>
<a class="next-slide-arrow" href="#">></a>
</div>
EDIT: #EternalHour
Please use background instead of background-image and also give the width and height of the image.
You can add this background-size: contain; to the previous and next arrow classes.
Just add "background-size: 100% 50%;"
a.previous-slide-arrow,
a.next-slide-arrow {
display: table-cell;
vertical-align: middle;
position: relative;
color: transparent;
opacity: 0.7;
text-align: center;
/* =s */
left: 20px;
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png");
background-repeat: no-repeat;
background-size: 100% 50%;
}
It's because you are using a background url, in these circumstances you need to specify a width and height for the container. In this case a, otherwise it will not be visible.
a.previous-slide-arrow, a.next-slide-arrow {
height: 128px;
width: 128px;
...
}
I am by far not an expert with PHP, and could really use some help creating my logo below into a H1. This is in my body section of the site:
<!--logo-->
<div class="logo" style="float:left;">
<?php echo $html->link($html->image('rental_logo.png'),array('controller'=>'homes','action'=>'index'),array('escape'=>false)); ?>
</div>
<div class="logo" style="float: right; margin-right: 470px; padding-top: 40px;">
Here is what I tried to create the above logo into a H1 tag:
<h1>
<a href="<?php echo $html->link($html->image('rental_logonew.png')?>" title="http://example.net/img/rental_logo.png"><br/>
<img src="<?php (http://example.net/img/rental_logonew.png);>/images/rental_logo.png" alt="vacation rentals" title="logo"
</h1>
I am very inexperienced writing code. So, I know the above that I tried to enter is wrong. Should I also be altering my look.css file?
/* css */
#logo {
background: transparent url("http://example.net/img/rental_logo.png") no-repeat scroll 0% 0%;
float: left;
/*width: 200px;*/
padding-bottom:10px;
text-indent: -3333px;
border: 0;
margin: 0;
}
#logo a {
display: block;
width: 280px; /* larger than actual image? */
height: 120px;
text-decoration: none;
border: 0;
}
I am attempting to add "rendered html" as requested. This may be incorrect, because I am unfamiliar with rendered html. I obtained the above codes from my header.ctp and look.css files.
($html->image('rental_logonew.png'),array('controller'=>'homes','action'=>'index'),array('escape'=>false)); ?>
Thanks for looking, and helping if you can.
In the php code i dont see where you close the "a" tag, just follow the structure bellow. I hope it will work.
CSS:
#logo {
width: 344px;
height: 82px;
margin-top: 10px;
/*float: left;*/
background: url(../images/logo.png) no-repeat;
}
h1.logo {
width:344px;
height:82px;
margin:0;
padding:0;
}
h1.logo a {
display: block;
height: 82px;
text-indent: -3000em;
overflow: hidden;
}
HTML:
<div id="logo"><h1 class="logo" title="logo"><a title="logo" href="/">Logo</a></h1></div>
Demo here..