i'm using the latest version of anything slider on wp 3.0.4 and i'm having a problem. The slider works but for each slides it adds an extra empty slide -.- (if i have 2 slides it adds 1 slide per "real" slide)
This is the code that i use in my page on wordpress
http://pastie.org/1492604
how do i fix this stupid problem ? Thanks
edit: this is the generated code from wordpress i think that there is nothing wrong
http://pastie.org/1492679
Also from my custom post type there no blank posts.
just don't hit return before entering the next image, wordpress enters a break automatically which messes with the script.
instead of
<div id="slider>
<img src="..." />
<img src="..." />
</div>
use
<div id="slider>
<img src="..." /><img src="..." />
</div>
Related
I have the following html code that tried to place in my WordPress page.
html:
<div class="hovereffect">
<img src="<?php echo get_template_directory_uri() ?>phone.jpg" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
At the moment everything is in the site except the image that does not show.
How can I use this code WordPress in a way that it can display the image?
I think you forget to tell which place it should get the images from. And you are also forgetting a semicolon after the get_template_directory_uri();.
This is an example, but here i'm telling which folder to get the image from:
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/your_image.jpg">
you can do that but it is not a good practice to paste this code as it is in WordPress editor,
upload this image in media and get link of that image
Edit page, select text mode from top right corner of your editor and paste code these i.e
<div class="hovereffect">
<img src="http://example.com/wp-content/uploads/2016/07/img.png" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
Here is good practice create a template for that page and write there your code.
Image replace with feature image
Heading with page title.
Detail with page content
link with page permalink.
Not enough reputation to leave a comment so I will leave this as an answer instead.
Assuming phone.jpg is at the root of your theme, you're forgetting the / (slash) before phone.jpg.
It should be
<img src="<?php echo get_template_directory_uri(); ?>/phone.jpg" >
PHP won't get parsed inside a page. Just upload the image to the WordPress media library and link to it directly.
I have a quite specific problem to solve today - I just can't get my head wrapped around it. Makes totally no sense for me...
It's about a live site: http://rawrockchick.com/#testimonial-slider
If you scroll down to the testimonials on the home page (the link above should bring you there) you'll see that the slider arrows are missing. For a reason I can't figure out the URL is prepended a couple of times before the image src:
<img src="http://rawrockchick.comhttp://rawrockchick.comhttp://rawrockchick.com/media/manual/slider-arrow-left.png">
This wasn't the case two weeks ago, without anybody consciously touching it. I first thought of some Javascript thing happening with the bootstrap slider, but as you can see the testimonial image itself is not affected, even though it's placed in the exact way as the sliders are.
The whole slider is a very simple bootstrap carousel. Excerpts (relevant section) of the code:
<div class="item active">
<div class="row">
<div class="col-sm-8">
<p>"An up-and-coming UK raw food teacher and songstress, Barbara Fernandez has it going on! This girl can do food prep! Her Raw Mexican food is amazing"</p>
<p class="testimonial-author">Nomi Shannon</p>
<p class="testimonial-role">rawgourmet.com</p>
<a class="left carousel-control" href="#testimonial-slider" data-slide="prev"><img src="/media/manual/slider-arrow-left.png"></a>
<a class="right carousel-control" href="#testimonial-slider" data-slide="next"><img src="/media/manual/slider-arrow-right.png"></a>
</div>
<div class="col-sm-4">
<img src="/media/test-nomi-150.jpg" class="img-responsive hidden-xs hidden-sm img-circle" style="margin-left:25px;">
</div>
</div>
</div>
As you can see the images are inserted the exact same way.
What I tried already (no change):
I moved the <img src="/media/manual/slider-arrow-left.png"> out of the link and placed it directly under the working image, the same strange behavior occurs for the slider arrow (by this test I wanted to make sure there's no jquery rule affecting only that one column of the slider, or the a tag).
Hardcoding absolute image URL (src="http://rawrockchick.com/media/manual/slider-arrow-left.png")
WordPress PHP query for image URL (src="<?php echo home_url(); ?>/media/manual/slider-arrow-left.png")
I'd be very thankful if anyone had any ideas about that phenomena. Or idea how to debug it further.
I am not really sure why you are getting a double URL but using an absolute path to your image could help solve things.
<img src="<?php echo home_url(); ?>/media/test-nomi-150.jpg" class="img-responsive hidden-xs hidden-sm img-circle" style="margin-left:25px;">
Solved.
Found it out via disabling plugin for plugin that a Pinterest hover button plugin (this to be precise) was causing that mysterious phenomena.
Thanks for all the answers and hints!
I created an tooltip using qTip 2, where an image and the title is displayed.
But:
If you click the image inside the tooltip, a modal box displays.
In this modal-box the image should be displayed, but it isn't.
Here it is: http://jsfiddle.net/fDavN/8378/
<div id="openModal" class="modalDialog">
<div>
X
<img src='{{{img}}}' alt='image could not be displayed' class='profilep' />
</div>
</div>
Could you take a look at the source code of the modalbox?
Am I not allowed to use {{{img}}} inside it?
I'm rather new to programming, but I'm trying to find a way to do what is described below.
<body>
<div class="gallery">
<img src="photo_1.jpg">
<img src="photo_2.jpg">
<img src="photo_3.jpg">
<!-- trigger for user to load items that weren't downloaded on page load -->
<img src="photo_4.jpg">
<img src="photo_5.jpg">
<img src="photo_6.jpg">
</div>
</body>
I'm trying to find PHP functions that would, ideally, only load the first 3 img embeds within a certain class/ID, and have a clickable trigger to request the remaining img embeds from the server.
I don't know if this is how the typical message board software(such as vBulletin) handles things with "spoiler tags" .. as in whether or not it actually prevents loading, or just hides the content from view. Something like that, if it actually prevents loading, is what I'd like to know about.
First, this has nothing to do with PHP.
The only way to prevent a page from loading the image is to not include the tags on the page.
You could accomplish this a couple ways:
Place the last three photos inside a hidden container and use a Javascript click event to display them when wanted, but that still loads the images when the page is loaded.
Or, you can use an AJAX call to retrieve the items only on demand. Unless they are really large images I would think the first option the best.
<div class="gallery">
<img src='photo1.jpg'/>
<img src='photo2.jpg'/>
<img src='photo3.jpg'/>
<a href="#" onClick='document.getElementById("hidden-gallery").display="visible"'>show more</a>
<div id="hidden-gallery" class="hidden-gallery" style="display:none">
<img src='photo4.jpg'/>
<img src='photo5.jpg'/>
<img src='photo6.jpg'/>
</div>
</div>
I recognize that embedding CSS styles and Javascript the way I did is not the preferred method but it is there just for the examples sake.
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!