In ACF, the image return format is set to Image Array. I'm using this:
$image = get_field('demo_image', $product->get_id());
function example(){
global $product;
$image = get_field('demo_image', $product->get_id());
if( isset($file['url']) && ! empty($file['url']) ) {
<div class="image"> <img src="' . $image['url'] . '"></div>;
}
The CSS:
.image img {
position: absolute;
left: 0;
top: 0;
opacity: 1;
}
.image img:hover {
opacity: 0;
}
The output:
<div class="image"> <img src="http://example.com/wp-content/uploads/product-image.jpg" data-o_src="http://example.com/wp-content/uploads/demo-image.png" data-o_height="" data-o_width="" data-o_srcset="" srcset="http://example.com/wp-content/uploads/product-image-1000x1000.jpg 1000w, http://example.com/wp-content/uploads/product-image-980x980.jpg 980w, http://example.com/wp-content/uploads/product-image-480x480.jpg 480w" data-o_sizes="" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1000px, 100vw" data-o_title="" title="product-image" data-o_data-caption="" data-caption="" data-o_alt="" alt="" data-o_data-src="" data-src="http://example.com/wp-content/uploads/product-image.jpg" data-o_data-large_image="" data-large_image="http://example.com/wp-content/uploads/product-image.jpg" data-o_data-large_image_width="" data-large_image_width="1200" data-o_data-large_image_height="" data-large_image_height="1200" width="1000" height="1000"></div>
I want to show the demo-image.jpg but product-image.jpg is shown instead. demo-image.jpg is loaded as data-o_src.
I found this similar thread Why is ACF giving me the wrong output data for image? but I have already disabled lazyloading and do not use any wp-smush or lazyload plugins. There is no console error either.
Please let know if more information is required. Thank you
Related
I want this button to be of different sizes, depending on the screen, is there a way to put two measurements inside the same style?
`<a class="btn btn-rounded" id="btn1" style=" margin-top: 10px; width: 384px; margin-left: 10px;" href="<?php echo base_url('/newroute/nav/profissional/cadastrarcv'); ?>"> Editar/Atualizar </a>
`
Yes you can do it by media query in css.
for instance
#media only screen and (max-width: 600px) {
.btn-rounded {
width: 30px
}
}
this case detect that the screen is under 600px width and change it automatically
I am using next/image to render my image like this:
<Image
src={imageLink}
width="1920"
height="512"
alt="Hero Image"
/>
This is fine for screen widths above 750px.
How to update the height to "612" when the user visits on mobile or tablet (below 750px screen width)?
Put Image inside div and put the following props on the Image:
<div className="div-class">
<Image src={imageLink} layout="fill" objectFit="cover" />
</div>
The div in this example needs to have position: relative. Now you will be able to give this div any height/width you need with media queries
You create a css class (in your custom.css or anywhere)
Then you define props you need (height, styling etc)
#media (min-width: 576px) {
.custom_class {
max-width: 540px;
}
}
#media (min-width: 768px) {
.custom_class {
max-width: 720px;
}
}
#media (min-width: 992px) {
.custom_class {
max-width: 960px;
}
}
#media (min-width: 1200px) {
.custom_class {
max-width: 1140px;
}
}
put your Image inside div like this and you can change height and width now
<div className='relative h-96 md:h-3/4'>
<Image className='h-full sm:h-64'
src="/static/images/desktop/image-header.jpg" alt="sun"
layout='fill' objectFit='cover' width={400} height={350} />
</div>
In 2023 and with NextJS 13, the Image-API has changed. Working with the new app directory and new naming-convention of NextJS 13, this is what I did to accomplish requested behavior:
// page.jsx
import styles from './page.module.css';
import logo from '../public/logo.png';
export default function Home() {
return (
<div className={styles.logoContainer}>
<Image src={logo} alt='Argo Logo' fill />
</div>
);
}
/* page.module.css */
.logoContainer {
position: relative;
overflow: hidden;
width: 158.57px;
height: 30.93px;
}
#media (max-width: 500px) and (orientation: portrait) {
.logoContainer {
width: 79.285px;
height: 15.465px;
}
}
I have a particle-slider effect for a logo on a site which transitions to a flat logo image file for screen sizes less than 960px. It works fine on Safari and chrome but on Firefox the image stretches out of shape.
Safari/Chrome
Firefox
Do I need to add some specific code for Firefox to make this work?
Here's how I have the code at the moment -
style.css
/* RWD for logo */
#media screen and (max-width: 960px) {
#particle-slider {
display: none;
}
}
#media screen and (min-width: 960px) {
#logo img {
display: none;
}
}
#media screen and (min-width: 320px) and (max-width: 960px) {
#logo {
height: auto;
}
#logo img {
width: 70%;
height: 30%;
position: relative;
top: 50px;
padding-bottom: 50px;
left: 15%;
}
}
/* ----------------------------------------- */
particle-slider.php
<?php /* Template Name: particle-slider */ ?>
<!-- particle-slider template -->
<div id="particle-slider">
<div class="slides">
<div class="slide" data-src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logohight.png"></div>
</div>
<canvas class="draw" style="width: 100%; height: 100%;"></canvas>
</div>
<script type="text/javascript">
var ps = new ParticleSlider({ 'width':'1400', 'height': '600' });
</script>
<div id="logo"> <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logo.png"> </div>
<!-- particle-slider template -->
This has only appeared as an issue after I loaded the front-end files onto a Wordpress CMS (I'm using a HTML5 Blank Child theme), they worked fine as a stand-alone front-end site. How do I fix this?
Try is removing the height: 30% style from the img. I am guessing you want the image to retain its aspect ratio so height: auto might work better?
I have the following table where I display a product image. In the desktop view I want to display the original size of the image and in the mobile version I want to display 180px and center it.
The code is as follows:
<h2><?php echo $product->product_name; ?></h2>
<div class="panel panel-default">
<div class="panel-body">
<table class="table">
<tr><th></th><td ><img id="myImage" src="<?php echo CRM_URL; ?>img/product_images/<?php echo $product->product_image; ?>" /></td></tr>
<tr><th>Model Number</th><td><?php echo $product->product_model_number; ?></td></tr>
<tr><th>Category</th><td><?php echo $product->category; ?></td></tr>
<tr><th>Brand</th><td><?php echo $product->product_brand; ?></td></tr>
<tr><th>Price</th><td><?php echo $price; ?></td></tr>
<tr><td colspan="2"><?php echo $cartForm; ?></td></tr>
</table>
</div>
</div>
and the CSS code:
#media(min-width: 320px) {
.product_search_textbox {
width: 100px;
}
#header div.topbar{
height: 150px;
}
.homepage-slider-content{
margin-top:18px;
}
#myImage {
width: 180px;
}
}
I still can't get the image to change in the mobile view, could someone help me please? What am I doing wrong?
First of all, it should be (max-width: 320px) because you want the mobile CSS to takeover when the width reduces below 320px. Moreover, there has to be a space between #media and (max-width: 320px) like this:
#media (max-width: 320px) {
.product_search_textbox {
width: 100px;
}
#header div.topbar{
height: 150px;
}
.homepage-slider-content{
margin-top:18px;
}
#myImage {
width: 180px;
}
}
I have a row with X possible columns.
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<!-- ... and so on ... -->
</div>
</div>
Now I would like to add margin-top:20px to all small screen columns and the same margin for big screen columns, if there are more than 4 as that would cause two "rows" to be shown and would therefore require some space between.
Is that somehow possible with only the use of CSS?
You can use a media query for whenever you want the top margin..
#media (max-width: 767px) {
.col-xs-6 {
margin-top:20px;
}
}
http://www.bootply.com/126007
P.S. - There is nothing wrong with having the total of .col-* in a .row exceeding 12 (ie: http://getbootstrap.com/css/#grid-example-mixed). It simply causes a wrap. There are several examples in the docs that use this technique. It's generally not ideal for nested rows.
I needed something similar and following is the solution I came up with. Documenting it for future readers (and myself)
$res-list: (xs: (0px, 767px), sm: (768px, 991px), md: (992px, 1199px), lg: (1200px, 9999px));
$dir-list: (t: top, r: right, b: bottom, l: left);
#for $r from 1 through 10{
#each $res-abbr, $res-vals in $res-list{
#media (min-width: nth($res-vals, 1)) and (max-width: nth($res-vals, 2)) {
#each $dir-abbr, $dir-name in $dir-list{
$x: $r * 5;
.m#{$dir-abbr}-#{$res-abbr}-#{$x}{
margin-#{$dir-name}: #{$x}px;
}
.m#{$dir-abbr}-#{$res-abbr}-#{$r}p{
margin-#{$dir-name}: #{$r}unquote('%');
}
}
}
}
}
This SASS code generates classes along the lines of following
#media (min-width: 0px) and (max-width: 767px) {
.mt-xs-5 { margin-top: 5px; }
.mt-xs-1p { margin-top: 1%; }
.mr-xs-5 { margin-right: 5px; }
.mr-xs-1p { margin-right: 1%; }
.mb-xs-5 { margin-bottom: 5px; }
.mb-xs-1p { margin-bottom: 1%; }
.ml-xs-5 { margin-left: 5px; }
.ml-xs-1p { margin-left: 1%; }
}
So the content editor can use .mt-xs-10 to apply margin-top: 10px to given element on extra-small screen.
I hope it helps somebody.
This is an old post but below is a clean solution.
[class*="col-"] {
margin-bottom: 15px;
}
This works well for some situations but it adds extra, unnecessary margin when it's not needed.
To solve this, we can create a new css class that applies top margin to columns when they get stacked. I create a class named .row-grid
.row.row-grid [class*="col-"] + [class*="col-"] {
margin-top: 15px;
}
#media (min-width: 1200px) {
.row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
margin-top: 0;
}
}
#media (min-width: 992px) {
.row.row-grid [class*="col-md-"] + [class*="col-md-"] {
margin-top: 0;
}
}
#media (min-width: 768px) {
.row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
margin-top: 0;
}
}
I use this simple and clean solution:
.row { margin-top: -15px; }
.row > div { margin-top: 15px; }
In that manner, every <div class='col-*-*'> has 15px margin on top, except those on the first row (or, on mobile, except the one on the top).
This simple solution automatically applies a top margin to all columns except the first, at extra small screen sizes. No special class names or other modifications to HTML or CSS are necessary. (Change the margin-top value below to whatever you prefer.)
#media (max-width: 767px) {
[class*="col-"]:not(:first-child) {
margin-top: 30px;
}
}