I work on the user profile & user gallery, i want to show user uploads images and i have problem about it.
I have the following code
if($uploads) { $s = explode(",", $uploads); // Explode the images string value
$r=1; $f=count($s); foreach($s as $a) { $newdata=$Mat>Get_Upload_Image_Id($a);
if($newdata) { $final_image=$base_url."uploads/".$newdata['image_path'];
echo '<a aria-haspopup="true" target="_blank" href="#">
<div class="Image iLoaded iWithTransition tThumbImage" id="'.$msg_id.'" src="'.$final_image.'" style="background-image: url('.$final_image.');">
</div>
<div class="photoShadow"></div>
</a>';
}
$r=$r+1; } echo '<span class="snd" style="display:none;" rel="'.$uploads.'">
</span>';
}
- This code show me the separately images, i have this code on my HomePage it is ok to separate posts, but on the profile this is not good i wan't the change this, but i'm stuck with this.
I want the show images like this no separately in a row:
put this class in your css and try or if exist the same class with style than update it.
CSS Class
.iLoaded
{
display: inline-block;
vertical-align: middle;
padding: 3px 5px;
}
Related
I'd like to set a random background-image into a <div>Container</div>
To keep it simple I installed a plugin using [shortcode] to display random images. This works fine.
How to get the shortcode [wp-image-refresh] working together with background-image:url(...)
I tried it even as inline-style with no result.
This is what I have:
HTML
<div class="header_random-image">
<div id="hero"></div>
</div>
CSS
#hero {
background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>');
background-size: cover;
background-position: 50% 30%;
height:70vh;
width: 100%;
margin-top: -65px;
}
Another try with no result: Inline-style
<div class="header_random-image">
<div style="background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>')"></div>
</div>
Could anybody be so kind to help? Or does anybody has a simple solution to place div-random-background-images?
Best from Berlin
In most cases your CSS code will be served in a static file, thus the php code won't execute.
As the inline example doesn't work either, I guess the short code does not return an image url but a full image tag instead. The plugin's description
confirms this assumption. WP-IMAGE-REFRESH
You could try this:
PHP
<div class="header_random-image">
<?php echo do_shortcode("[wp-image-refresh class='hero_class']"); ?>
</div>
CSS
.header_random-image {
overflow: hidden;
}
.hero_class {
height: 100%;
width: auto;
margin-top: 0;
}
This should display the image. You'd still have to center it if you want (use flex-box) and check for problems caused on different screen sizes depending on the side ratio of your uploaded images and solve them with some Javascript.
Alternative
Use ACF Pro and add a gallery field to your posts/pages or an option page if you want the same images on all views.
PHP
<?php
$images = get_field('name-of-your-gallery-field');
shuffle($images);
$imageUrl = images[0]['url'];
<div class="header_random-image">
<div style="background-image: url('<?= $imageUrl ?>"); ?>')"></div>
</div>
I want to display a product page with every item aligned with each other. These products are dynamically generated using PHP code. The problem is, they won't align horizontally when one product has a longer name than the other.
To further understand my problem, here is a screenshot:
You can see that the product prices are not aligned with each other because they are influenced by the length of the product names.
Here is my PHP and HTML code:
<!--PHP CODE FOR EXTRACTING DATA FROM TABLE-->
<div class="span_container">
<div class="col-md-4 bottom-cd simpleCart_shelfItem" style="display: inline-block;">
<div class="product-at ">
<a href="single.php"><img class="img-responsive" style="width:300px; height:auto;" src="/EDGE/storeadmin/product_images/<?php echo $row['i_image']; ?>" alt="">
<div class="pro-grid">
<span class="buy-in">View Details</span>
</div>
</a>
</div>
<p class="tun"><?php echo $row['i_name'];?></p>
<p class="number item_price"><i> </i>₱<?php echo $row['i_price']; ?></p>
</div>
</div>
And this is the CSS code of my paragraph (tun):
p.tun {
font-size:1em;
color: #949494;
text-align: center;
line-height: 1.3em;
padding: 1em 0;
}
This is simple. Set position:relative; for the containing .simpleCart class, and a height like height:300px - replace 300 with whatever your box height needs to be so every containing box has the same height.
Then use position:absolute; to position the elements within .simpleCart according to the heights that we know already.
We know and can deduce:
the height of the image: therefore we use, as an example: position:absolute;top:5%; - change 5% according to your needs.
the height of the product prices and that those will be at the bottom no matter how high the .simpleCart box will be. So we use position:absolute;bottom:5% - change 5% according to your needs, again. Now every product price is at the same level. Provided that every .simpleCart box is of the same height.
Finally, we place the paragraph text with the .tun class in between with position:absolute;top:150px; - where you change 150 according to your needs so it fits between the image and the product pricing.
You can use the following js function to match the module heights to the tallest.
equalheight = function(container){
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(container).each(function() {
$el = $(this);
$($el).height('auto')
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}
$(window).load(function() {
equalheight('.equalise-height');
});
<p style="" class="remove-item">
<a href="<?php
echo $this->getUrl('checkout/cart/delete', array('id' => $item->getId(), Mage_Core_Controller_Front_Action::PARAM_NAME_URL_ENCODED => $this->helper('core/url')->getEncodedUrl())); ?>" style="font-size: 8.5px; float: right; margin-right: 6px; color: #cc0909; font-weight: bold"><?php echo $this->__(''); ?>
Remove item
<a class="remove-item-red" style="float: right; margin-right: 2px; margin-top: 2px"></a>
</a>
</p>
I was wondering how to get an img and the text that states Remove button to link to the same place. The img is the <a class="remove-item-red">, a red circle with an x in the middle. So both the img and the text need to serve the same function but whenever I meddle with the a class for my btn, it tends to crash or the usual that the button itself does not serve the function while the text does.
I had Remove item as <?php echo $this->__('Remove item'); ?> before which still resulted in the same, with Remove item doing its function while the a class button does nothing. It's just an image.
What am I doing wrong and how do I fix it?
Try using a div-tag for the Remove button instead of embedding an a-tag in another a-tag.
Like so:
<p style="" class="remove-item">
<a href="#">
Remove item
<div class="remove-item-red"></div>
</a>
</p>
I have the following code :
<div class="wrap">
<div class="next">
<?php next_post('%', 'Next post', 'no'); ?>
</div>
<div class="prev">
<?php previous_post('%', 'Previous post', 'no'); ?>
</div>
</div>
and after hours of trying i am not able to add an image (small arrow image in png format) instead of "next post" and "previous post"
I tried (in the CSS) background-image: url(../img/arrow-left.png); amongst other things.
It does seem to work however when i create href tags
but the problem is that I cannot embed <?php next_post(); ?> in the href can I ?
like so : " class="next">
which did not work for me..
If you need any more information, please let me know and I will provide it.
Wordpress function next_post has been deprecated. Better to use the next_post_link function.
http://codex.wordpress.org/Function_Reference/next_post_link
You can change the output format including the images like this :
<div class="wrap">
<div class="next">
<?php $next_dir = "<img src='" . get_bloginfo('template_directory') . "/img/arrow-right.png'/>"?>
<?php next_post_link('%link', $next_dir . '<span>Next Post</span>', TRUE); ?>
</div>
<div class="prev">
<?php $prev_dir = "<img src='" . get_bloginfo('template_directory') . "/img/arrow-left.png'/>"?>
<?php previous_post_link('%link', '<span>Previous Post</span>' . $prev_dir, TRUE); ?>
</div>
</div>
UPDATE 1
With the provided solution you have also to modify your css file to your needs. Another way to do this (which is better imo) is without changing any php code is to do something like this :
.next a{
width: 25px;
height: 25px;
background: url(/img/arrow-right.png) no-repeat 0 0;
text-indent: -9999px;
}
.prev a{
width: 25px;
height: 25px;
background: url(/img/arrow-left.png) no-repeat 0 0;
text-indent: -9999px;
}
The html code rendered by wordpress is a links like .
You should also change the width and height to the dimensions of your images.
I'm creating an e-commerce site and I'm having trouble vertically centering all my thumbnails. The problem is all my images are different sizes and getting each one to vertical align across all browsers is turning out to be a pain. I've looked into the different CSS options, display-table, line-height, and others. They worked in modern browsers, but not well in IE (of course). My thought is the large big time sites are resizing the image (which I can do with no problem) and then overlaying the image on top of a background the exact size they need. Does anyone know if this is how it's done? IF so can you direct me to some documentation of how to do this in PHP?
Or if someone thinks I can do this without all the extra work of overlaying images please let me know. In-case you want to see what I'm working with here ya go:
HTML
<a href="#">
<div id="product">
<div id="product-image">
<img src="" border="0" />
</div>
<div id="product-name"></div>
<div id="product-price"></div>
</div>
</a>
OPTION 1 : JQUERY (this seemed to be my best hope, but couldn't get it to work right)
var h = $('#product-image').height();
$.map($('#product-image img'), function(e)
{
var top =( h- $(e).height())/2;
$(e).css("margin-top",top);
});
OPTION 2 : CSS
#product
{
float:left;
margin:5px;
width:200px;
height:200px;
border:1px solid #999;
}
#product-image
{
margin:2px auto;
width:194px;
height:145px;
text-align:center;
}
#product-image img
{
max-height: 100%;
max-width: 100%;
vertical-align:middle;
}
EDIT
I found the working code, thanks Explosion Pills. For anyone trying to get this work I would suggest using this jQuery method and Fiddle link http://jsfiddle.net/9VfUS/1/:
WORKING JQUERY
var h = $('div#product-image').height();
$('div#product-image img').each(function ()
{
var top = (h - $(this).height()) / 2;
$(this).css("margin-top",top);
});
If you can use JavaScript, I would do it that way as it's surefire to get things to work the way you want. You are using .map for the wrong purpose. You want .each:
$('#product-image img').each(function () {
var top = (h - $(this).height()) / 2;
$(this).css("margin-top",top);
});
I assume that h was already calculated correctly as the tallest image or the height of the container or what have you. If it's not, then you have to do that.
Try this, if you know in advance the sizes of your images...
HTML:
<a href="#">
<div class="product">
<div class="product-image" data-image-loc="path_to_your_image"> </div>
<div class="product-name"></div>
<div class="product-price"></div>
</div>
</a>
CSS:
div.product-image {
background-position:center center;
background-repeat:no-repeat;
background-color: transparent;
background-attachment: scroll;
}
div.product-image-width-x-height {
width:{width}px;
height:{height}px;
}
JS:
$(document).ready(function() {
$('div.product-image').each(function() {
$(this).css({backgroundImage:url($(this).attr('data-image-loc'))});
});
});
If you don't know your sizes, then a resize script that serves all your images to a new size would fix that, and you would simply move the width/height css properties to the div#product-image CSS declaration.