I am trying to add a background url to a DIV alongside an advanced custom field.
http://placehold.it/1000x500
Like this : Custom Fields for Div background images? (wordpress)
In the Advanced Custom Field I have tried text, wysiwyg, link picker...
However, when the page is loaded the / seem to be stripped out and "" are also in there.
Any ideas on getting this working
Here is the code I have tried:
<div class="clearfix featuresStrip homeBBanner-edit homeBBanner
style="background-image:url('<a href="<?php the_field('background_url'); ?>. </a>');">
style="background-image: url('<a href="<?php the_field('background_url'); ?>. </a>');">
style="background-image: url('<?php the_field('background_url'); ?>');">
I think you should test to set No formatting for this field as shown in the below screenshot:
One other thing that might be a problem is that you don't close the first attribute (class) in your element:
|
v
<div class="clearfix featuresStrip homeBBanner-edit homeBBanner style="
In fact, your entire markup looks suspicious, what are the anchor tag doing here background-image:url('<a href="<?php the_field('background_url'); ?>. </a>');?
Try changing your code to something along these lines:
<div class="clearfix featuresStrip homeBBanner-edit homeBBanner" style="background-image:url('<?php the_field('background_url'); ?>');">
...
</div>
The above assumes that the background_url field is plain text.
Related
I have used a wordpress plugin (Add Featured Image Custom Link) to insert custom url to the featured image.
I have two functionalities in my portfolio:
when the user click on image it will popup the image; this is working properly.
the anchor tag I have used for the link which I have added to featured image I want to redirect to the website of which I have added the link on featured image
How do I do #2
<div class="option inner">
<div>
<h5><?php the_title(); ?></h5>
<?php
$url = get_the_post_thumbnail_url(get_the_ID(),'full');
?>
</div>
</div>
If you want to get the input from the (Add Featured Image Custom Link) WordPress Plugin it's easy. This code will add the link if the input is not empty.
<div class="option inner">
<div>
<h5><?php the_title(); ?></h5>
<?php
$cust_li_fi_value = get_post_meta( $post->ID, '_custom_url_image', true );
if( $cust_li_fi_value ) { ?>
<?php }
?>
</div>
</div>
Cheers,
Happy Coding :)
I got my solution by one way i think it is not the proper way
that is, inplace of i wrote the funciton the_content
and inside editor of the wordpress i use the custome html like this
I'm new to Wordpress theme development.
i was trying to convert a static html theme to wordpress but my background image is not working here's the code
<div class="hero-slides owl-carousel">
<!-- Single Slide -->
<div class="single-hero-slide bg-img background-overlay" style="background-image: url(http://localhost/wordpress/wp-content/uploads/2018/07/bg1.jpg);"></div>
<!-- Single Slide -->
<div class="single-hero-slide bg-img background-overlay" style="background-image: url(http://localhost/wordpress/wp-content/uploads/2018/07/bg2.jpg);"></div>
</div>
when i inspect element the background-image url() shows empty.
the static html page works just fine.
First Check that all the JS and CSS files for the slider, are loaded correctly in the page.
To get the path to theme directory use <?php bloginfo('template_directory'); ?>
Then in your html you can use this as the path to the image
<div class="single-hero-slide bg-img background-overlay" `style="background-image: url(<?php bloginfo('url'); ?>/wp-content/uploads/2018/07/bg1.jpg);"></div>
My guess is that this is an issue with loading of js files, double check by debugging the console for errors from developers tools in the browser.
Sorry guys false alarm. the problem was with my editor. It wasn't saving the php file. I restarted my pc had to re-enter the image path now it worked.
Have look on this code:
<a href="#" class="list-group-item">
<span class="badge"><?=$st ?></span>
<img class="small_profile_pic" src="<?=$pic ?>" /> aaa<?=$msg['UserName'] ?> :
</a>
this is a row that show a message in short type. in this row I need to <?=$msg['UserName'] ?> be after image but it going to next line.
when I type word without a tag its OK but links goes to next line. How do I fix this?
more explanation on this pic:
Please notice that I can't use float, if there is another way except float please tell me that.
Edited:
(I have fixed that place by changing parent tag to span but ...)
I need to make whole row a link to that specific message and make username a link to user profile. Who can I place links inside each other?Or another solution maybe?
Second Edit
I have placed a tags inside each other and both of them works well but still second a tag goes to next line! I have tried display:inline but whole row collapsed!
You can't use 'a' tag in "a" tag .... but just for you If you want to align it after image use style property and use ,
<a href="#" class="list-group-item">
<span class="badge"><?=$st ?></span>
<img class="small_profile_pic" src="<?=$pic ?>" style="display:inline" /> aaa<?=$msg['UserName'] ?> :
</a>
I don't know much php but I have a parallax template and different sections which are technically pages created in wp-admin. So for example page 2 is:
<!-- Section #2 -->
<section id="middle" data-speed="4" data-type="background">
<div class="container">
<?php query_posts('page_id=' . of_get_option('home_page_2', 'no entry' )); while (have_posts()) : the_post(); ?>
<?php global $more;
$more = 0;
the_content(""); ?>
<?php endwhile; ?>
</div>
</section></a>
Now I want to modify the main wp menu at the top to link to this section. I have tried doing it with html so I wrapepd that whole section around an <a id="2"> tag and recalling it in the menu with website.com/#2 and this works partially BUT it now sees that whole section as a hyperlink thus messing up its formatting. Is there another way of doing this with php?
I'm not sure if I understood what you need correctly, but in order to link to an element on the page, you could do the following:
Option 1: Set an id attribute to the element:
<section id="mysection">...</section>
Option 2: create an empty anchor tag with an id attribute at the top of the section element:
<a id="mysection"></a>
<section>
<h2>My Section</h2>
<!-- ... -->
</section>
Then target the section's id with your anchor tag:
Go to My Section
JSFiddle Demo.
I have a wordpress posts link and around list item (each post) i have hyperlink, but the problem is that mu hyperlink becomes with width and height of 0 and all that block of post is not linkable, however in the source code from browser i can see that it shows more hyperlinks and they close as they open so they are width and height of 0, just around title and content hyperlinks affects them and makes them linkable, to note again in code i have just one hyperlink.
EDITED
Somehow i have more links displayed even if i have one wrapped all the content, on browser it shows few more links and if i delete that one, they all removes
<li>
<a class = "posts_link" href="www.google.com">
<div class = "posts">
<h2><?php the_title(); ?></h2>
<div class = "posts_list">
<?php the_content('Read more...');?>
<div class = "clear"></div>
</div>
<div class = "addition">
<div class = "add_time">
<time datetime="<?php the_time( 'Y-m-d' ); ?>" pubdate><?php the_date(); ?> <?php the_time(); ?></time>
</div>
<div class = "add_comment">
<?php comments_popup_link('Leave a Comment', '1 Comment', '% Comments'); ?>
</div>
<br />
</div>
</div>
</a>
</li>
If all that you want to do is make the whole div clickable, there are certainly better ways. One of them would to add a onclick function to your div and write the function, could either be window.open or location.href, both will do the job.
It's hard to tell from this screen but did you add display:block to your a href? If you want an area to link you need to replace default display:inline to block..
Your problem is that
You're using a foreach loop
The link is not being provided with any text
Untill the link is provided with text, its height and width will have no meaning at all. Because there is nothing you can click on. However adding a little bit padding might do the work.
http://jsfiddle.net/afzaal_ahmad_zeeshan/Jes6e/
a {
padding: 5px; // to make it clickable
border: 1px solid #333; // to make it visible..
}
In the fiddle you will see that the link is having no width or height but is still clickable. Why? Because it creates some space for the element to be clickable.
When there is no space, nothing is clickable and so no element is linked.
I have tested your code,
http://jsfiddle.net/afzaal_ahmad_zeeshan/8NdnF/ Here is the fiddle for that. And guess what? Whole of the element is clickable.