I created a function for my wookommerce shop so that the tag Goratex automatically insert badges to the product in the archive.
My problem is CSC stylization, I can't insert that badge on the product image, it cropps the image of the product itself.
See image
<div class="badgeGoratex">
echo '<img src="/wp-content/uploads/goretex-logo.png" />';
</div>
CSS
.badgeGoratex {
position: relative;
float: right;
margin-top: 30px;
margin-right: 30px;
}
Related
I'm using the following code to display a featured image in WordPress. It's working correctly, but I am struggling with get_the_title() to display the title of the post within the image and have that adjust correctly when being responsive.
echo '<img src="'.wp_get_attachment_url( get_post_thumbnail_id() ).'" style="width:100%; height:auto;">';
You can make the image as a background in a div and place the title inside.
// you can use get_the_ID() or $post->ID to get the ID of the post
$featured_img_url = get_the_post_thumbnail_url($post->ID, 'full');
<div class="wrapper" style="background-image: url(<?php echo $featured_img_url;?>);">
<h2 class="the-title"><?php echo the_title(); ?></h2>
</div>
// Add this to your css
.wrapper{
position: relative;
height: 200px;
width: 200px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
// This will center the text inside
.the-title{
position: absolute;
top: 0;
bottom: 0;
text-align: center;
}
I am using WordPress and ACF to display some photographs from custom post types on my page.
I would like the images to all be the full height of the container but they may have different widths (context photography gallery) and I would like them to scroll horizontally
the images are currently contained as list items in an unordered list.
Im unsure how to accomplish this with CSS. so far I have them scrolling, but they are all different heights.
i could make sure the images are all just uploaded with a fixed height but that doesn't solve the problem of them not resizing with the browser.
JS Fiddle:
https://jsfiddle.net/svone2zq/9/
Live url: http://www.mattwilkinson.co.uk/beta/
HTML CODE
if( $posts ): ?>
<ul class="photolistul">
<?php foreach( $posts as $post): // variable must be called $post (IMPORTANT) ?>
<?php setup_postdata($post); ?>
<li class="photolistli">
<!-- need the right info here -->
<div class="photocontainer1">
<span><?php the_field('single_image_title'); ?></span>
<img class="img-responsive photo" src="<?php the_field('single_add_image') ?>" alt="<?php echo $image['alt']; ?>" />
</div>
</li>
<?php endforeach; ?>
</ul>
<?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<?php endif; ?>
</div>
CSS
.home-image-container ul.photolistul {
display: inline-block;
list-style-type: none;
overflow: scroll;
overflow-x: show;
overflow-y: hidden;
white-space: nowrap;
}
.home-image-container ul.photolistul li.photolistli {
display: inline-block;
height: 80vh;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
position: inherit;
max-height: 100%;
max-width: 100%;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 img {
position: relative;
float: left;
max-height: 100% !important;
max-width: auto;
}
it looks like you want to create a carousel, if so I think the best solution would be Owl Carousel 2 here.
I have a solution for you too
http://codepen.io/Nikolaus91/pen/EKwJXw
I didn't have a better idea to set .stage width other way than using jQuery. Maybe you will came up with a better solution when you will see mine.
var sumwidth=0;
$(".stage").children('.carousel-image-container').each(function() {
var child = $(this);
sumwidth+=child.outerWidth();
});
$(".stage").css({
'min-width' : sumwidth + 25 + 'px'
});
P.S. 25 value is random, don't know why this 25px is missing when outerWidth value is sumarized. Maybe it's because of codepen...
P.S. -2 If you are making website based on images (majority of the content) remeber to compress images using for example (my favourite) kraken.io. If you are uploading images using media library in wordpress install WP Smush by wpmu dev it will compress images when uploaded - no need to remeber about compressing images.
The last important thing (in my opinion) is to use some kind of lazy loading solution, downloading multiple images at once when only minority is visible is bad approach, try BjLazy for wordpress. Might suit your needs.
Working with the css in you jsfiddle I came up with this which seems to do the trick.
.home-image-container ul.photolistul {
display: inline-block;
list-style-type: none;
overflow: scroll;
overflow-x: show;
overflow-y: hidden;
white-space: nowrap;
}
.img-resposnive {
height: 100%;
width: 100%;
}
.home-image-container ul.photolistul li.photolistli {
display: inline-block;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
height: 400px;
max-height: 600px;
min-height: 200px;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
position: relative;
float: left;
}
I created a custom attribute with 10 options ( mix10, mix20 .... mix100). What I am trying to do is when I select mix10, to get "mix10" as a custom sticker on product thumbnail image. I have no clue how to add this custom attribute as a small CSS on the thumbnail image of products.
First of all your going to have to look at z-index the styling property and then you're going to need to get the attribute in relation to the image.
Create a simple div over your product image
<div id="mix-sticker" class="mix-sticker_<?php echo $_product->getAttributecode()?>">
<img YOUR PRODUCT IMAGE/>
</div>
Then for your CSS styling you'd need to do something similar to
#mix-sticker {
z-index:500;
width: 400px;
height: 400px;
}
.mix-sticker_1 {
background:url(../images/mix1.png) top left no-repeat;
}
Let's assume you want to put this sticker on the thumbnails in your category listing. Open up /app/design/frontend/[YOURPACKAGE]/[YOURTHEME]/template/catalog/product/list.phtml and find the section that outputs your thumbnail images. It will likely look something like:
<li>
<a>
<img />
<a>
...
</li>
What you will need to do is insert some code right inside the <a> link:
<?php $_product = Mage::getModel('catalog/product')->load($_product->getId()); ?>
<div class="sticker">
<?php if($_product->getData('mix')=='mix10'){echo '<span class="mix10">'.$this->__('Mix10').'</span>'; }
elseif($_product->getData('mix')=='mix20'){echo '<span class="mix20">'.$this->__('Mix20').'</span>'; }
elseif ...
?>
</div>
Added all your options as elseif statements.
Then, in your CSS file, add styling for those stickers. That file will likely be located at /skin/frontend/[YOURPACKAGE]/[YOURTHEME]/css/styles.css:
.sticker {
position: absolute;
left: -5px;
top: -5px;
}
.sticker > span {
font-size: 0;
text-indent: -77777px;
width: 75px; /*image size*/
height: 75px; /*image size*/
background: url(../images/mix10.png) no-repeat left top; /*image location*/
display: block;
}
.sticker > span.mix20 {background: url(../images/mix20.png) no-repeat left top; margin: 1px 0 0 1px}
...
Add styles for all the sticker options you used in your PHTML file and then make sure your images are loaded to the server.
I've created an page where users can view images along with the image description although I'm having some issues with the CSS for the description. The description is retrieved via PHP and is shown as a echoed variable. The issue with this is that the descriptions seems to carry on along one single line when it should be carrying on within the div.
As shown below, it displays along one line when it should be wrapping below to the same width as the text area below the description.
I've tried changing the width of the .desc class to a set pixel width of 290px instead 100% (should still take the 290px from the image-desc class container) but I'm having no luck.
My current CSS:
.image-info {
width: 290px;
display: inline;
float: right;
}
.image-info .desc {
text-align: justify;
width: 290px;
margin: 10px 0px;
}
and the HTML:
<div class="image-info">
<? $desc = htmlentities($row['desc'], ENT_QUOTES, 'UTF-8'); ?>
← Back to Gallery
<div class="desc"><? echo $desc; ?></div>
<? if(empty($_SESSION['user'])) { } else { print '<i class="icon-chevron-down"></i>Options<br /><div class="slidingDes"><form action="admin/includes/edit-img.php?id=' . $id . '" method="post"> <textarea type="text" name="description" placeholder="' . $desc . '"></textarea> <br/><input type="submit" value="Change" class="btn btn-primary"/> </form><form action="admin/includes/cover-image.php?id=' . $id . '" method="post"> <input type="submit" value="Cover Photo" class="btn btn-danger"/> </form></div>';}?>
</div>
It seems that your content go beyond the limit when there is no white space in the word
so just add word-wrap:break-word; to imageInfo class
here is your css
.image-info {
width: 290px;
display: inline;
float: right;
word-wrap:break-word;
}
Take a look here in fiddle
Add the new CSS 3 word-break property:
word-break: break-word; /* Will prevent text from bleeding outside container */
Use the CSS3 word wrap
word-wrap:break-word;
This will force the text to go down
Is it possible to center an image only trough setting a class to the img tag without side effects? The problem is the following: I have an anchor around an image. If I use the following CSS
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
And this (stripped down) HTML:
<a href="/path/to/image.jpg" class="fancybox" rel="fancybox" title="System">
<img src="/path/to/image.jpg" title="System" class="aligncenter">
</a>
the link takes the whole width of the main div. This means not only the image is clickable - also the space around the image (actually the whole width) is clickable. This is through the CSS display: block.
How can I center an image without using a parent div? I don't want the whole area clickable.
Background:
You can read this topic. It is about Wordpress and the built in editor. He automatically generates the class aligncenter on an image (if the user pressed the center button). I need this for my own theme. According to the moderators there this should be only a CSS question and doesn't have to do with changing code in Wordpress.
in aligncenter class add text-align:center
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
text-align:center;
}
I'm not familiar with wordpress, but you might want to try setting the image's and the anchors's css 'display' property to 'inline-block'.
If you are limited in changing the document's DOM, another option is adding an 'onClick' attribute to the image.
This will allow you to run some function once the image is clicked.
So, for example, if you want to redirect to another page:
<img src='myImg.png' onclick='myRedirect()' style='cursor:pointer'/>
And in the page's header:
<script type='text/JavaScript'>
var myRedirect = function(){
window.location.href = 'Some other location';
}
</script>
Notice the style='cursor:pointer', which changes the mouse's cursor to a 'hand' cursor.
To avoid an additional div container or even JavaScript, you can make the anchor display as a block:
.logo {display: block; height: 115px; margin: 0 auto; width: 115px;}
/* height and width must equal your image's values */
<img src="logo.png" alt="Logo" />
Live demo: http://jsfiddle.net/performancecode/Ggk8v/
it still incorporates a div, but the way i do it is:
<div class="megaman">
<img src="img/megaman.jpg" alt="megaman">
</div>
img {
height: 125px;
width: 200px;
}
.megaman{
text-align: center;
margin: 0 auto;
display: block;
}
And yes, I replaced .logo with .megaman because megaman rocks! But it should work. I couldn't figure it out without using a div.
The solution I found. Adding /></a> and width and height to the anchor tag cuts down the hyperlink to the image...
<a class="link" href="URL" target="_blank"> <img width="75px" height="75px" alt="Facebook" src="IMAGE LOCATION"/></a>
Second answer:
paste this in functions.php
add_filter('image_send_to_editor','give_linked_images_class',10,8);
function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ) {
// only do this on center
if($align == 'center') {
$html = str_replace('aligncenter', '', $html);
$html = '<p style="width: 100%; text-align: center;" >'.$html.'</p>';
}
return $html;
}
Down side, this won't effect already inserted images...
Also if you can please move the style of the <p> to the stylesheet.