Develop Reference

PHP HTML CSS - display image 1:1

I have saved images on the server. They are linked in a database. How can I display the images in a square without cutting them? The images have different proportions of the sides.
I want the image to be displayed square. When you click on it, I want the image to be displayed in the normal shape.
Can anyone help me? (Javascript is also ok).
Thank you!
extension
<?php
$path = "medien/benutzer/8/";
$dir = opendir($path);
$extensions = array("jpg", "bmp", "gif", "jpeg", "png");
while(($file = readdir($dir)) !== false)
{
if(in_array(pathinfo($file, PATHINFO_EXTENSION), $extensions))
{
echo "<a data-fancybox='gallery' href=".$path.$file."><img src=".$path.$file."></a>";
}
}
?>
it is to be compared with Instagram. The posts in the profile are displayed one after another in a square. If you tap on it, you can view the whole picture.
I have several images in a folder that should be displayed in the same way.

Give this a shot.
.image {
height: 100px;
width: 100px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="image" class='background-image: url("/path/file.ext");'></div>

change order of divs without using grid or flex

I am building a news blog without the use of grid or flexbox.
My function uses Heredoc in PHP and prints 6 news stories to a page in a sequence from oldest at the top to newest at the bottom like this.
Problem: Essentially I want to change the div order so that the newest stories IE positions 6,5,4 on the image are always delimited on the top line. I have tried to doctor my CSS with class:nth-of-type(1) approach as seen in this other stack post without success.
Here is very similar problem on stack
But can't seem to get this done and wondered if this will need a JavaScript solution or can this still be done is CSS.
My Function
function get_stories() {
$query = query(" SELECT * FROM stories");
confirm($query);
while ($row = fetch_array($query)) {
$product_image = display_image($row['story_image']);
$story = <<<DELIMETER
<article class="news-item" data-category="Cat">
<div class="thumb">
<img src="../resources/{$product_image}" class="headline-story" alt=“wirgo news headline" width=“250" height=“250"></a>
</div>
<div class="news-txt">
<h3>{$row['story_title']}</h3>
<p>{$row['story_description']}</p>
</div>
</article>
DELIMETER;
echo $story;
}
}
CSS
.news-item {
display:inline-block !important;
vertical-align:top !important;
width:403px;
margin-right:20px !important;
padding-bottom: 100px !important;
padding-top: 100px;
}

You could wrap your fetch_array ($query) in a array_reverse():
while ($row = array_reverse( fetch_array($query) ) )
That will return the results in the reverse order and will give you what you want. No need for CSS or JS.

Using Javascript/Php: Trying to display background image - logic wrong?

So I want to display a background image (that is the thumbnail image in wordpress post) using css in hero-wrapper div if the screen size is min. 900px.
I have using php to check if there is a thumbnail image, then using javascript to check screen width and then adding background-image property to the dive. Not working, I think my logic is wrong??
HTML
<?php
if ( has_post_thumbnail() ) { ?>
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<script type="text/javascript">
if (jQuery(window).width() == 900) {
<?php echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >'; ?>
}
</script>
<?php } ?>
<section class="hero-wrapper">
<figure class="frontpage-hero">
<div class="banner-box">
<h2>GET YOUR FREE CASE ASSESSMENT?</h2>
<h6>Enter your details below for a consultation</h6>
<form>
<input type="text" name="name" placeholder="Name..">
<input type="text" name="email" placeholder="Email..">
<input type="submit" name="submit">
</form>
</div>
</figure>
</section>
css
.hero-wrapper {
margin: 0;
padding: 0;
min-height: 669px;
background-repeat: no-repeat;
}
#media screen (min-width: 900px) {
.hero-wrapper {
min-height: 669px;
background-repeat: no-repeat;
}
}

You are echoing a <section> tag inside a <script> tag.
You should change this
<script type="text/javascript">
if (jQuery(window).width() == 900) {
<?php echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >'; ?>
}
</script>
To something like this
<script type="text/javascript">
if (jQuery(window).width() >= 900) {
$('.hero-wrapper').css('background-image', 'url(' + <?php echo $thumb['0']; ?> + ')');
}
</script>

Your assumption is wrong twice:
your jQuery(window).width() == 900 condition will run only once and will not reflect window size changes
you're trying to use php (server side language) to output html (client side markup) inside javascript (client side code) code block. You will end up with syntax error.
Correct approach is to just output your html element and use CSS media queries to control its appearance. Something like:
.hero-wrapper {
display: none;
}
#media (min-width: 900px) {
.hero-wrapper {
display: block;
}
}
Please also notice that image displayed as background will not enforce element to have any height and hence your element will show up with 0px height (invisible in other words). You will need to specify element's dimensions somehow (and remember that images may have different aspect ratios).
After all it may be easier for you to not use background image but insert normal image instead and control its dimensions using CSS.

You're not adding anything to the existing "hero-wrapper" div with your code, you're just echoing some HTML within a Javascript block, which won't achieve anything. You've almost certainly got syntax errors in your console. The final rendered page will look something like this:
<script type="text/javascript">
if (jQuery(window).width() == 900) {
<section class="hero-wrapper" style="background-image: url('thumbnail.png') >
}
</script>
<section class="hero-wrapper">
<figure class="frontpage-hero">
...etc
This will get you a JS console error along the lines of:
Uncaught SyntaxError: Unexpected token <
Even if that part worked, the HTML is also invalid because you never close the style attribute with a ", and this code will only ever execute when the window width is exactly 900px, which I don't think you intended.
What you need to be doing is altering the existing div to add the style, and also allow it when the width is greater than or equal to 900px. This should do it:
<script type="text/javascript">
$(document).ready(function() {
if ($(window).width() >= 900) {
$(".hero-wrapper").css("background-image", "url('<?php echo $thumb['0']; ?>')");
}
});
</script>
I also wrapped the code in document.ready so that it won't run until the page is ready.

I'd remove the javascript and do this in your CSS media queries with display: none; to hide the element for screens under 900px i.e
HTML/PHP
<?php
if ( has_post_thumbnail() ) {
$thumb = wp_get_attachment_image_src(
get_post_thumbnail_id($post->ID), 'full' );
echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >';
} ?>
And in your CSS
#media screen (min-width: 900px) {
.hero-wrapper {
min-height: 669px;
background-repeat: no-repeat;
display: block;
}
}
#media screen (max-width: 900px) {
.hero-wrapper {
display: none;
}
}

Change text align when col level is reached in bootstrap

I am using bootstrap 3.3.7 and I want to change the text alignment to Left when col-sm-6 is reached. If this level is not reached yet then the text alignment is right. How can I do that?
Below is my div:
<div class="col-sm-6 text-right" style="padding-bottom:10px; padding-top:10px" >
<a class="BAN_ForgotPass" href="#">Forgot the password ?</a>
</div>
I have tried to add this in the script css in the header but didn't work:
<style type="text/css">
#media (max-width: 767px) {
footer .text-right { text-align:left }
}
</style>
Any suggestions?
Another question please: is there anyway to detect in javascript or jquery if col level was reached? I am asking this because sometimes we need to hide images or add somthing in some levels ...
For example: hide image x when col-sm-6 is reached. Is it possible?

Assuming you have the correct bootstrap HTML then this should work
#media (max-width:767px) {
.container .text-right {
text-align: left
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-6 text-right">
<a class="BAN_ForgotPass" href="#">Forgot the password ?</a>
</div>
</div>
</div>
To answer your second question, about hiding elements you can use utility classes in this case hidden-sm and hidden-xs

try this below code
#media (max-width: 767px) {
.text-right { text-align:left; }
}

Try this into your page with inline CSS and if works fine make external CSS
.col-sm-6
{
text-align:left;
}
if this works make a Separate CSS for each changes you want
like for image hide add below line in above code
.col-sm-6
{
text-align:left;
diaplay : block;
}

Change image once we hover on image is not working

once we hover on image, i want to display another image.
<div>
<a href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>',
'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');"
title="<?php echo $this->__('Share on Google Plus') ?>"><img src ="<?php echo $this->getSkinUrl('images/G+.png') ?>"/></a>
</div>
i tried as below :
I added class="a1", but it did't worked for me.
<a class="a1" href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>',
'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');"
title="<?php echo $this->__('Share on Google Plus') ?>"><img src ="<?php echo $this->getSkinUrl('images/G+.png') ?>"/></a>
css
.a1:hover {
background-image: url('images/G+1.png');
}

Here are two solutions for your query. (Change image on mouse hover)
HTML + JavaScript Demo
<div class="image_hover">
<a href="#" rel="nofollow">
<img src="http://i.imgur.com/h1hLX4Vb.jpg" height="160" onmouseout="this.src='http://i.imgur.com/h1hLX4Vb.jpg'" onmouseover="this.src='http://i.imgur.com/dmnwaafb.jpg'" width="160">
</a>
</div>
HTML + CSS Demo
.image_hover {
position: relative;
cursor: pointer;
}
.image_hover img {
position: absolute;
transition: opacity .5s ease;
}
.image_hover img:hover {
opacity: 0;
}
<div class="image_hover">
<img src="http://i.imgur.com/h1hLX4Vb.jpg" width="160" height="160"/>
<img src="http://i.imgur.com/dmnwaafb.jpg" width="160" height="160"/>
</div>

First, give your link tag some style, to set it's background.
a.a1 {
display: block;
width: 100px;
height: 50px; (width and height are whatever you need them to be)
background: url('images/G+.png') no-repeat center center;
}
Now this is a very light example here, but what it is doing is setting your link as a block-level element, giving the right dimensions of the image background, and then setting the whole elements background as the image.
Then, for the rollover effect, you use:
a.a1:hover {
background: url('images/G+1.png') no-repeat center center;
}
Now I like to put my no-repeat and positioning attributes in the background attribute, you can separate these into background-size etc if you really want.
I am aware in your implementation you have an img in there setting the picture, but for what you want to achieve I'd suggest using a css alternative.
SO link on the subject (as per comment):
CSS: image link, change on hover

Additional the answer in #AaronLavers's comment (use background-image and replace it on :hover), you can use :before - pseudo class and content property.
The plus
It's generic solution. You have not to set the width and the height of the link - like in background-image way.
The minus
You can't change the image's size like using background-size etc. but if your image is the exact size you want, the problem solved.
a:before {
content:url(http://i.stack.imgur.com/upUcm.jpg);
}
a:hover:before {
content:url(http://i.stack.imgur.com/sn2Ag.jpg);
}

The reason this is not working is because the img tag and background-image are 2 different things. If you want this to work, you could try putting the background image on the a to begin with and then changing it on hover. It needs important because of specificity rules. The other option would involve putting php in your css file, but that is probably not worth the effort to set up.
CSS
.a1:hover {
background-image: url('images/G+1.png') !important;
}
HTML
<a class="a1" style="background-image: url('<?php echo $this->getSkinUrl('images/G+.png') ?>');"></a>