I've been looking at this for a few hours now and I've probably overlooked something silly, but I really can't get this to work.
I have created a .php file with four different php-files which are included with the
I am practicing with building websites and my first website used to solve this problem with frames, I could simply target every anchor tag to the mainframe and it worked perfectly. However, as frames are a deprecated feature, I decided to replace them. I can't seem to get the links working however.
There are tons of answers around, and that's probably the biggest problem, I can't figure out which solution fits to my specific design. Sorry if this is a doublepost.
This is what I've created so far:
<div id="header" class="header">
<img src="Images/metallic.png" width="125" height="125" alt=""/>
<img src="Images/database.png" width="85%" height="125" align="right" alt=""/>
</div>
<?php include 'Parts/upperdivs.php'; ?>
<?php include 'Parts/navigation.php'; ?>
<?php include 'Pages/main.php'; ?>
As said, there are buttons with hyperlinks in the navigation page and 'normal' hyperlinks in the upperdivs. Is there a way to open all those hyperlinks in the main content div, without having to copy all I've already got? I've read a lot of information about Ajax and the PHP-load feature, but I'm not sure what I should use. I've tried adding it as well, but couldn't get it to work. Thanks in advance!
Edit: I've also tried using an Iframe with an Iframe ID, and pointing to it using the target-tag. The problem is that the pages differ very much in content - if I set the height of the Iframe to, let's say, 1000px, it's way to large and you can scroll too far down on pages with minimal content, and if I set it to 100px, I get two scrollbars, one on the Iframe and one on the right side of the webpage, which is very ugly - and above all - very annoying.
Without being clear on exactly what you're asking, I assume you're looking for an easier way to handle includes.
This is not the best way to do it, but I would have each page be in the URL you want, and have the 'Parts' pages be in a separate folder.
/
| main.php
| about.php
| news.php
/ Parts
| navigation.php
| upperdivs.php
| EVERY_PAGE.php
Then as a shortcut, you could make EVERY_PAGE.php like this:
<div id="header" class="header">
<img src="Images/metallic.png" width="125" height="125" alt=""/>
<img src="Images/database.png" width="85%" height="125" align="right" alt=""/>
</div>
<?php include 'Parts/upperdivs.php'; ?>
<?php include 'Parts/navigation.php'; ?>
On each page you would do this:
<?php include 'Parts/EVERY_PAGE.php'; ?>
///
// ... Page code here ...
//
Also, it's good to learn some better styles of coding, but this will get the job done in a clean and quick way.
Related
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.
Is there a quick way, via script maybe, to remove a certain pair of div's out of all my wordpress posts? For example:
I want to go from this:
<div class="single_textimage">
<div class="youtube_play"><iframe src="-,-"></iframe></div>
<div class="single_textimage_text">Some text.</div>
<div class="single_textimage_copyright">Some text.</div>
</div>
To this:
<div class="youtube_play"><iframe src="-,-"></iframe></div>
AND
From this:
<div class="single_textimage">
<img class="aligncenter size-full wp-image-1700" src="-,-" />
<div class="single_textimage_text">Some text.</div>
<div class="single_textimage_copyright">Some text.</div>
</div>
To this:
<img class="aligncenter size-full wp-image-1700" src="-,-" />
So I want the divs: single_textimage, single_textimage_text and single_textimage_copyright to go.
I hope there is an easy script, or difficult for that matter. Via "php", "mysql" or "jquery" for example, that I can put in test.php in the root or something...
I hope I supplied you with enough information. If I haven't made myself clear enough, please reply. :)
Seems to me like you should be able to take those out of whatever template your using - probably in a PHP include, but I don't really use WordPress, so I wouldn't know where without seeing all your files. If you're bent on using jQuery instead of modifying the template, I would throw in some CSS too, to hide the elements that will be removed:
.single_textimage, .single_textimage_text, .single_textimage_copyright{
display:none;
}
Then you can take the elements you want to keep out of their parent DIVs, and place them right after (or before):
$('.youtube_play, .wp-image-1700').each(function(){
$(this).parent().after($(this));
});
Then you can remove the elements you don't want from the page:
$('.single_textimage, .single_textimage_text, .single_textimage_copyright').remove();
Here's a fiddle: https://jsfiddle.net/3uztorzL/
I would use this search and replace utility to update all of the content in the DB:
https://interconnectit.com/products/search-and-replace-for-wordpress-databases/
You'll need a regex to replace <div class="single_textimage_text">Some text.</div> (assuming the "some text" is different in each post). The utility supports regex replace. This may do it:
<div class="single_textimage_text">(.*?)</div>
Make sure you make a backup before you do the replace.
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.
Dreamweaver is generally pretty easy to image map in but I can't seem to get the crosshairs for the image mapping tool to work. I have version CS5.5.
<html>
<head>
<div id="top-header">
<div align="center">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" margin="20">
<tr>
<div id="top-image"><img src="pics/TopHeader.jpg"></div>
<tr>
<div id="nav-bar"><img src="pics/NavBar.jpg" name="NavBar" border="0" usemap="#NavBarMap" id="NavBar"></div>
</div>
</div>
</div>
</table>
</head>
</html>
Basically I'm trying to just click on the NavBar.jpg file in the design window, get the rectangle mapping cursor and just start making the map. For further clarity, this is a header.inc.php file that I'm using to include in all the pages on the site. Every time I go to click on the image it highlights the table code on the split screen.
Can you not image map within a table? I'm using the table for alignment purposes so I'd like to keep it in there if possible. Thanks.
I'm not exactly sure what you are shooting for in your navigation, but you can do the whole thing with CSS in a multitude of different ways. It will be easier to create, and easier to change later on if you find that you need to.
If you haven't created navigation in css before, this list will help you cover a lot of ground: http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php
EDIT:
This site also has some excellent tutorials to clear up any confusion: http://net.tutsplus.com/?s=css+navigation
I have some divs that I want to display under some specific conditions in every page. I put the calls to them in the footer like this:
<div id="loginpopup" style="display: none;">
<?php
include '/auth/login_form.php';
?>
</div>
<div id="createprofilepopup" style="display: none;">
<?php
include '/auth/create_profile_form.php';
?>
</div>
<?php
// Show div that spins when something is happening
include '/divs/loading.php';
?>
but the urls seem to be mis-pointed. And if I fix the urls on any page, pages in other directory paths will be mispointed. What is the correct way to organize this sort of thing across a site?
Thanks!
By tje way if you want to take a look, the currently broken site is http://www.problemio.com
The way you include the files it loads them from an absolute path (in Linux the root directory). If you want to load them relative to the current script just don't add the leading slash:
include 'auth/login_form.php';