Tailwindcss has 2 ways of showing background images:
<div style="background-image: URL();"></div>
<div class="bg-[url('/img/myimage.jpg')]">
This Tailwindcss shows the background image perfectly:
bg-[url('/wp-content/themes/sarasota-soccer-club/images/my-image.jpg')]
but if I try to show an image with an ACF field, it won't work and I have no idea why:
bg-[url(<?php the_field('hero_image'); ?>)] I like this way better because is more elegant. Using style="" in the HTML tag is ugly
but if I use it this way it'll work fine:
style="background-image: url(<?php the_field('hero_image'); ?>);"
So, has anyone found an issue like this with bg-[url(<?php the_field('hero_image'); ?>)]?
Related
I'm working with Laravel 5.8 and in this project I want to show some images that I had uploaded through database like this:
And at the view, I tried this:
<div class="text-center" style="background-image: url('public\images\tavana\{{ $images[0]->path }}');height: 220px;">
But the problem is the image does not load!
However the image already exists at the this directory:
public\images\tavana\imagename.jpg
And other data such as title, subtitle properly shows up.
So how to properly show the image?
use asset to generate url
<div class="text-center" style="background-image: url('{{asset('images/tavana/'.$images[0]->path)}}');height: 220px;background-repeat: no-repeat">
also not sure why you are accessing 0th index $images[0]->path instead you can return first() so it will be $images->path
If you have multiple then use loop
You can't try:
<div class="text-center" style="background-image: url({{url('/')}}.'public/images/tavana/{{ $images[0]->path }}');height: 220px;background-repeat: no-repeat">
I have the following problem. I can't display the image in the blade template. I use bootstrap and laravel 5.8. I've tried different options (without asset, with / ahead). Folder img in public.
Code blade and html from browser below.
blade
<div class="carousel-item-a intro-item bg-image"
style="background-image: url({{asset('img/slide-1.jpg')}})">
chrome
<div class="carousel-item-a intro-item bg-image"
style="background-image: url(http://127.0.0.1:8000/img/slide-1.jpg)">
Try this. Looks like you should concatenate string with php code.
<div class="carousel-item-a intro-item bg-image"
style="background-image:url('". {{asset('img/slide-1.jpg')}}."')">
I have searched high and low for a solution to this. I want to change the markup of an uploaded image in WordPress from this:
<div id="attachment_906" style="width: 590px" class="wp-caption aligncenter">
<img class="size-full wp-image-906 " title="Image Alignment 580x300" alt="Image Alignment 580x300" src="http://localhost/sandbox/wp-content/uploads/2013/03/image-alignment-580x300.jpg" width="580" height="300">
<p class="wp-caption-text">Look at 580×300 getting some <a title="Image Settings" href="http://en.support.wordpress.com/images/image-settings/">caption</a> love.</p>
</div>
To something more like this:
<figure class="center">
<img class="gallery-img" src="http://lorempixel.com/300/500/">
<figcaption>
<span>A slightly longer caption for the image, which is significantly smaller than the last one. pretty neat!</span>
</figcaption>
</figure>
I understand that much of the markup in the original post needs to stay, but is there any way to customize any of this? Even if I could get the same basic structure (a wrapper, the image, a caption wrapper, the caption) I could take it from there with CSS.
Since I'm developing a theme, I need the options to work with the native WordPress tools. If that isn't the case, I can't work with it.
I had hoped that there would simply be a filter or action that I could apply to do this, but I have had no luck in finding such a thing.
Thanks in advance!
You need to use the image_send_to_editor filter. https://developer.wordpress.org/reference/hooks/image_send_to_editor/
That could look something like this in any one of your active theme or plugin's php files (like functions.php);
function filter_image_send_to_editor($content) {
$content .= '<figure class="center">(Generate your markup here)</figure>';
return $content;
}
add_filter('image_send_to_editor', 'filter_image_send_to_editor');
You'll have to write your own code inside that function, of course.
So I've been trying desperately to get my page title to overlay in the center of the header image, both horizontally and vertically, on my portfolio pages (here's a page with a longer title). I finally found a way to get the h1 title where I want it, but now I want to make it larger. However, when I currently resize the window to certain widths, the title doesn't wrap, it just disappears when it gets to long for the window. Would you mind taking a look and see if there would be a fix for this? I'm thinking that I'm using the wrong display tag somewhere along the line, but I'm not the best coder.
Here is the php for the header image and title (you can ignore the title that is black as I will get rid of that once I figure this one out). I think you should be able to see the rest of the html and css, but if I can provide anything else that may help with figuring this out, please let me know what that might be.
<?php get_header(); ?>
<div id="middle" class="clearfix">
<?php // Get the header image
$hi = getHeaderImage();
if($hi) :
?>
<div id="pageHeadImage" class="" >
<div class="inside" style="<?php echo 'background-image: url('.$hi.');' ?>">
<div id="projectTitleDiv">
<span class="aligner"></span>
<h1 class="projectTitle"><?php the_title(); ?></h1>
</div>
</div>
</div>
<?php endif;?>
Your div.aligner is causing the issue - it pushes the h1 out of the div. Remove div.aligner and use the following CSS to vertically centre #projectTitleDiv:
#projectTitleDiv {
position:relative;
top:50%;
transform:translateY(-50%);
}
I was wondering...if any coding expert out there could spare a few minutes to help me out with a tiny problem? It's something to do with the alt image text.
You see, whenever I upload an image, the alt text for it doesn't display properly. You can have a look here --> http://buywerewolfcostume.com/. This is how it's displaying in the source code:
alt="Female-vampire-small.jpg"
alt="side_farm_trap_1.jpg"
How do I get it to display like this -
alt="Female Vampire" and alt="Side Farm Trap"
I tried installing a special Alt image plugin, (the site is built on a Wordpress platform) but that didn't work. I also tried editing the image settings but that didn't work either. Is there a special line of code I should add to the CSS stylesheet?
Btw, here is the image code in my stylesheet:
.images img {padding:0 13px 0 0;}
.images img.last {padding-right:0;}
I'd really appreciate it if anyone out there could please offer some advice...
in your index file where is says
<div class="images" style="padding-top:10px; "><?php get_images(); ?></div>
You might as well just replace with your images and then you can make the alt tags what ever you want.
<div class="images" style="padding-top: 10px;">
<img alt="Female Vampire" src="http://buywerewolfcostume.com/wp-content/uploads/Female-vampire-small.jpg">
<img class="last" alt="Side Farm Trap" src="http://buywerewolfcostume.com/wp-content/uploads/side_farm_trap_1.jpg">
</div>
This is a simple matter in html:
<img src="side_farm_trap_1.jpg" alt="Side Farm Trap" >
Edit after retagging: Does Wordpress hide the option to add alt text or a title to images?
Not sure I totally follow, but does this work for you?
<img src="Female-vampire-small.jpg" alt="Female Vampire" title="Female Vampire" />
The Alt tag is for when the image is for some reason NOT there. The alt text will show up in it's place
The Title tag is displayed as a tooltip in the browser
Note: IE used to display the Alt tag as a tooltip as well, but it no longer does.
When you upload an image via WordPress, put the text you want to show up as 'alt text' both in the "Title" field and in the "Alternative Text" fields. Then click the "Insert Into Post" button.
Here's a video about uploading an image via the WordPress interface. In this video the "alternative text" field is called "caption". In newer versions of WordPress, "caption" and "alternative text" are separated out into different fields. The "caption" field shows up as a caption underneath your image; the 'alternative text' (or 'title') field is what shows up on hover/mouseover. Experiment to see what works best for you.
http://wordpress.tv/2009/01/05/embedding-photos-video-audio-into-your-posts/
Best of luck!