Still new to all of this, not sure if I'm using span class correctly however, I have to "link" this paragraph to a field groupp in wordpress and im not sure how to modify the code correctly.
This is an example of what was meant to be achieved:
<h2><?php the_field('barbarismtitle'); ?></h2>
I can edit this fine in wordpress but Im not sure how I would do the same for this:
<p>After <span class="thebatavia">The Batavia</span> was wrecked, the survivors were left to the dictatorship of <span class="jeronimuscornelisz">Jeronimus Cornelisz</span>, where 125 men, women and children were murdered.</p>
The span is so that only a few words in the paragraph have a certain colour. Any help would be appreciated. (also there aren't spaces in my code, It just wouldn't show otherwise)
Using the span to add a custom class to change the colour of the text is a good idea, if your trying to create a link to another page you will need to use an A tag.
so the php needed to link would look something like this
<p>After The Batavia was wrecked, the
survivors were left to the dictatorship of.....
This is assuming that the_field('barbarismtitle') would return a url to fill the href property
Related
I have a problem with layout of articles page. The problem is that there is too much space after Tilte H1 "Written by" - element and article itself. You can see it here:
http://watersite.loomhost.com/index.php/en/news-eng/40-computer-programmer-cracks
I have managed to get the space between those elements on "blog" page (http://watersite.loomhost.com/index.php/en/news-eng) by adding this code to template.css in my template folder:
.blog .items-leading h2 {
color:#04599a;
font-size:180%;
margin-bottom:-15px;
}
but I dont think -15px is correct and there is also some better coded solution for this?
So Im searching for better solution of "margin-bottom" and getting less space between elements on article page.
Thank you!
Line 9 of bootstrap.min.css reads line-height:40px for h2. Plus there is the .page-header element, you might want to look into this, too... just try the "inspect element" tool of Firefox and play around a little ;-)
You might want to use pull-right on the div around the toggle. Also you have a couple of empty divs above the image.
I'm trying to learn wordpress and php.
Basically, I want the
function draw_ad() {
echo "IMAGE CODE INSIDE A DIV";
// echoing an image inside a div -- StackOverflow does not allow me to post img tags : )
}
add_action('the_content', 'display_ad');
===
Basically, I want to add a picture and be able to manipulate the "left" and "top" css options... but with a plugin. So it will be like a strange picture that covers whatever the area on the screen that I want it to cover :P.
Yes, it is kind of sloppy, but that's what I was asked to do : P.
The add_action('the_content', 'display_ad') kind of does it, but it removes the whole content.
Is there a better way to do this?
Is there a way to tell the wordpress PLUGIN to add this , say, before the theme's header, and not content? (As in, be able to put this thing wherever you want to in the html body tags?
Thank you, guys!
From theme developing I am sure you can add code to the header and at the end of the body tag. (wp-header, wp-footer)
The best thing is to insert the picture tag at the end of the body and style it with position:fixed;. You don't need a div around the img tag.
I'm currently using a system for my portfolio where i add three images per project, which schould be inside an ul.
This works fine, but i need those img tags to be wrapped within li tags, and i have no clue how i should do this.
Take this:
<img src="img1.jpg"/>
<img src="img2.jpg"/>
<img src="img3.jpg"/>
Make this:
<li><img src="img1.jpg"/></li>
<li><img src="img2.jpg"/></li>
<li><img src="img3.jpg"/></li>
Thanks in advance!
Edit:
Sorry, here's more info for you guys:
I'm using Wordpress 3 as cms with custom post types.
The output is done via wp's "the_content()", where i put my images.
I know i could use wp's html editor to wrap li tags around manually,
the problem is that i wont be maintaining the site, so i want to make it easer for my coworkers.
This is why its outputting the img tags in a row, and i need to wrap those li tags around them.
I've read something about "preg_replace", but i cant seem to get it working.
EDIT:
I've found the solution, sometimes the easiest way is the best:
$thecontent = get_the_content();
$thecontent_format = '<li>'.str_replace(array("\r","\n\n","\n"),array('',"\n","</li>\n<li>"),trim($thecontent,"\n\r")).'</li>';
wraps every img element with a li, and then
echo $thecontent_format;
Anyways, thanks for you participation!
I don't want to sound stupid or anything but if your trying to do this with PHP I am assuming that PHP is also creating the img tags for display.... in that case all you have to do is:
echo "<li>";
image tag generating code goes here
and than close it off with:
echo "</li>";
do this for every image tag that being created...
Is that what you were asking?
I am dealing with HTML that's been generated with FCKeditor. So it will look something like this:
<p>Paragraph</p>
<ul>
<li>List item</li>
</ul>
No head tag, no body tag, just a snippet of HTML.
I am trying to add support for certain variables that, when inserted into the HTML, will be replaced with dynamic content. So the HTML, variable inserted, might look like this:
<p>Here's a variable: {widget}</p>
I want to replace {widget} with this:
<div class="widget">Hi, I'm a widget.</div>
FCKeditor encapsulates content (rightly) into paragraphs when you insert a line break. So if I did a straight replace, the resulting HTML would be this:
<p>Here's a variable: <div class="widget">Hi, I'm a widget.</div></p>
That's not going to work because the div tag is inside of the p tag. So what I want to do is close the paragraph and insert the DIV after it:
<p>Here's a variable: </p>
<div class="widget">Hi, I'm a widget.</div>
Let's take this example:
<p class="someclass">Here's a <strong>variable: {widget} more</strong> content
after</p>
I would want this result:
<p class="someclass">Here's a <strong>variable: </strong></p>
<div class="widget">Hi, I'm a widget.</div>
<p class="someclass"><strong> more</strong> content after</p>
At every instance of {widget} in HTML snippet, I need to make a "break" in the HTML. Which is to close every open tag, insert the widget code, then open them all again in order.
Is this possible using a PHP HTML parser? If so, how would I go about it?
I would suggest an entirely different approach. (F)CKEditor can already do what you want. Just try to add a table in the middle of a paragraph. It will close the inline tag stack, add the table, and reopen the stack again.
I suggest that, instead of having your users write {widget}, you write an (F)CKEditor plugin that adds the widgets for you. You can take a look at the code for the table button (or any other block-level element) to see how (F)CKEditor inserts them.
There are two things you can do when a user hits the "widget" button. Eitther you insert some custom tag such as <widget type="foo" />, or you insert a HTML tag that you can recognise later on, like <div class="widget foo"></div>.
With some extra elbow grease you can even make this fancier by actually loading the widget itself, wrapped in such tags. That way, the user would see exactly the same in the editor window as when it was stored. When the editor saves to the server, simply empty the tags wrapping the widget to get rid of it.
Example workflow (cursor marked by | sign):
User types text:
<p>foo bar| baz</p>
User hits "widget" button:
<p>foo bar</p>
<div class="widget foo"> ... contents of "foo" widget ... </div>
<p>|baz</p>
When saving, drop the widget contents:
<p>foo bar</p>
<div class="widget foo"></div>
<p>baz</p>
When displaying the saved contents, parse for div tags with a "widget" class and dynamically fill it:
<p>foo bar</p>
<div class="widget foo"> ... contents of "foo" widget ... </div>
<p>baz</p>
This could be done post-process when saving with regex if you were pretty careful about what you allowed. Alternatively, I do a fair amount of juggling on the front end with my editor (CKEditor) output, combining the user-input content plus things that I jam in both between and around the string that I parse and regex.
Another option to be explored is the BBCode plugin that CKEditor has added. Having been a longtime user of FCK plus a current user of CK, I can tell you that it's well worth the time to make the upgrade. And, according to the CK Developer site, it claims to be built-in. I also found a plugin that will allow BBCode. Both could easily be adapted for your purpose.
Finally, if you're adventurous and confident with Javascript, the HTML Processor can be hacked to do quite a few things. For instance, CK now outputs with styles rather than traditional HTML, and my editor does strictly HTML Emails which don't support style declarations so well. So, I hacked the HTML Processor's code to output everything with height=, width=, align= etc rather than style="height=x; width=x" etc.
On my Drupal site, I have made a Users page using the Views module, which is simply a nicely styled grid (HTML table) of users. I'm displaying a few fields for each one, and both the name and the profile picture have been set to link to the user node.
What is the best way to change it so that the whole cell (HTML td) links to the user node? EDIT: I'm not concerned with adding the HTML link tags, but with accessing each profile page's URL.
I've looked into modifying the theme of the view (over-riding the Style output e.g. views-view-grid--users.tpl.php), but cant see an elegant way to get the URL of the user node.
EDIT: I've implemented a temporary solution in javascript which looks into the HTML of each cell, extracts the first link's URL, and uses that, but is there not a better way of doing this using the Drupal variables somehow?
Thanks for your help.
How about something like this...no JavaScript needed
In your table:
<td>the link</td>
...
In your CSS file:
.td_link {
display: block;
width: 100%;
}
So basically all you need to do is add a class to your link, and a small snippet of CSS.
OK I found a better (super simple) way of extracting the profile URL, and also I over-came a few issues with the whole block-link solution (attributed to espais), which I thought were worth documenting. So here is the complete solution to my original problem:
1) Add a custom template file to override views-view-fields.tpl.php (see http://views-help.doc.logrus.com/help/views/using-theme - thanks to barraponto for the useful link). In this custom file, you should wrap all the code in a link, and add a clear-fix div just before the end to stretch the link to the full height of the container.
<a class="td-link" href="user/<?php print $row->uid; ?>">
...
<div class="clear-fix"></div>
</a>
2) Now you need to get rid of any other links from inside each grid element, as you are not allowed to nest HTML links (produces really weird behaviour). First thing to do is edit the View, and make sure none of the fields have "link this field to it's user" checked. Then if you want to include the profile picture field, you need to add a small fix module because by default there's no way to stop this field being a link! You can get the module from this comment: http://drupal.org/node/720772#comment-2757536
3) Finally the CSS. Add the following to your theme's style.css:
a.td-link {
display: block;
color: #000;
text-decoration: none;
border: 1px solid #E9EFF3;
}
a.td-link:HOVER {border-color: #85b3d4;}
a.td-link label {cursor: pointer;}
div.clear-fix {clear: both;}
This removes the link formatting from the text (as we want the whole block to look like a link, not just the text), and stretches the link out to fill the container. It also makes the cursor graphic consistent, and adds a nice border effect when you mouse-over the block. Remember you can also add a custom CSS class to your View, which makes it much easier/neater to select elements for styling in your CSS code.
It's important to distinguish between actual links, with <a> tags, and arbitrary elements you can click. Even if you don't care about semantics, you should care about your visitors not running JavaScript, especially search engines.
Rather than turning a block element into a link, you should turn a link into a block element, as espais suggested. One way to get more control over the markup is using custom fields to add opening and closing tags for your link around the rest of your fields.
spais and scott-reynen are right. but instead of placing every field under multiple <a> elements, each styled with css to turn them into blocks (which can have margin and padding), why not use a single <a> element?
if everything is meant to link to the same place, you can place it all together under a single <a> element, although every element should be an inline element (<span> instead of <div>). you can do it by changing the row template: check http://views-help.doc.logrus.com/help/views/using-theme
in your case, copy templates from inside the views module to your theme folder, and rename it accordingly as your view "Theme: Information" says. make sure there is no <div> or <p> or any other block element being output. if you need to break lines, use <br>.