Joomla link to barebones article content - html

I know a trick to make link to article without template (tmpl=component), but I see that it still links some styles:
index.php?option=com_content&view=article&id=171:uvjeti-plaćanja&catid=19:poliklinika&Itemid=101&tmpl=component
Is it possible to create link to just bare bones data you'd see in content editor for example?
It would be prefferable if nothing else but pure article content is returned. No html, body, head ... tags.

I have ended up creating file raw.php which contains following code:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?><jdoc:include type="component" />
I have placed this into my template folder and I can just call it with following url:
/?option=com_content&view=article&id=171&catid=19&Itemid=101&tmpl=raw
Analog to that you one can make new.php, place it to folder of current template in use and call it with &tmpl=new argument.

Related

Image embedded inside html, but with image data not inline

Is there a ('newbie-simple') way to embed an image inside html, however not in the inline form as usual:
<img src="data:image/png;base64,iVBORw0KGgoAAAA [...]" />
but in a form where the base64 code is placed on the end of the html file?
A possible benefit of this method would be that an image can be inserted in the page on more than one place using the same image data from the bottom of the html file.
TL;DR: With pure HTML/CSS - unfortunately no.
I need that too for Sciter Notes project to save notes (plain HTML files) with embedded images.
Ideally you should be able to do something like this:
<img src="cid:1234" />
...
<data id=1234 type="image/png" base64>
iVBORw0KGgoAAAA...
</data>
but unfortunately no such mechanism yet.
But you can implement schema explained above with script though.
If you are using HTML5, then you do not have to worry about caches. The browser will load all images and store them into an image-list, therefore the image will be loaded only once and reused at every place the key (the URL to the source image) is found.
The only thing you will have to do, if you are only using HTML, is to copy the URL of the image into every place you need to use it. This is necessary, because you cannot declare variables in HTML and hence cannot change them from another place in the document. For this purpose you would need additionally javascript for example.
Then you can go ahead with CSS to adjust the pictures to your requirements. Yu can either define classes in the header and let the img tags have these classes, or you can type the style properties inline or you can import an external CSS-file.
EDIT:
An example with javascript would be to add this code in
<body>
<img id="img" src="myIMG.jpg">
<script type="text/javascript">
function changeImage(id, src) {
document.getElementById(id).src=a;
}
</script>
</body>
Here the function changeImage is declared now. You can call this function either via onclick or inside of the script tag. You can address the correct image through its ID as first parameter (you will have to give every image its ID, don't confuse it with the image-list of your browser, here you define the ID in the img-tag) and the new source url as second parameter.

Is there a way to store and apply html content to a page like how CSS stores and applies styles

I'm very new to html and CSS, been learning on the go to update a website.
I understand how you can use CSS to store styles so that you can apply styles to multiple elements/pages with ease, and changing the attributes in a CSS style will automatically change all the html styles it governs across multiple pages.
I was wondering if you are able to do this somehow with actual html content instead of just style attributes.
Example: We have heaps of project pages, at the end of every project page we have a table with a bio of the manager who ran the project. This html code is manually written into every page. Since it is manually written though, if you ever want to change or update the info in bio table, you will have to go through and manually update it on every page. Is there a way to have the info in the bio table stored in something similar to a CSS stylesheet, so it just links to every page, and updating the info in the stylesheet will automatically update the info on every page it is linked in.
Code something like:
CSS
.personAbio {
<table><tr><td>Name</td>
<td>Sales Last Week</td></tr>
<tr><td>John</td>
<td>$100</td></tr>
</table>
}
Html
<table class="personAbio">
</table>
There are several ways to accomplish what you need.
Statically include content
The first way is by using (as already suggested) some server-side language.
Using PHP it's simple as, say we're inside your project_8.php (notice the PHP extension!) you simply place this PHP code where you want the about content to appear:
<?php include "about.html"; ?>
Dynamically include content
There's also a dynamic way to accomplish the same using JavaScript and AJAX.
For sake of simplicity hers's how it's done using the jQuery library:
<div id="hereGoesTheAbout"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$("#hereGoesTheAbout").load("about.html");
</script>
The above two <script> tags are best placed right before the closing </body> tag.
Including content dynamically is crawlable by Googlebot, just, a small penalty is given (over the static implementation) - since the additional requests to retrieve the content.
The difference is that using a server-side technique the content is found and embedded into a page while still on the server.
Using JavaScript and AJAX (like in the example above) the page arrives to your browser and than JavaScript dynamically sends to the server a request for the desired content to include.
Not a good way to insert content is by using <iframe>. It's terribly complicated (and involves lot of JS and messaging techniques) to make it responsive.
Also search engines will not index such content so it's not good for your page SEO.
Winner
Static include. Using the same technique you can split your website architecture into manageable includes.
Say you have some product.php template page, and you have all your products inside a folder products/ as files like 000.html to 999.html.
By just linking to example.com/product.php?pr=233 you can get your 233.html product:
<?php include "header.html"; ?>
<article>
<h2>Product:</h2>
<?php include "products/{$_GET['pr']}.html"; ?>
</article>
<aside>
<?php include "about.html"; ?>
</aside>
<?php include "footer.html"; ?>
with the above what you have:
one product.php file template (for all your products)
only one header.html file
only one footer.html file
only one author file
one products/ folder with all your nnn.html products contents.
You are looking for a back end coding language like PHP.
No you can't.
But you can use JavaScript instead to store your data and then bind them into the table.
For exemple:
html:
<table class="personaBio">
<thead>
<tr>Name<\tr>
<tr>Sale of the last week</tr>
</thead>
<tbody></tbody>
</table>
JavaScript/JQuery
var persons = [{name:'John', saleLastWeek:'100'}];
persons.forEach(function(person) {
$('tbody').append(`<tr><td>${person.name}</td><td>${person.saleLastWeek}</td></tr>`);
}
This is an exemple, I am on my phone, I didn't try this code.
You need to learn JavaScript or Jquery.
As already mentioned, you can do it server-side, using a number of approaches:
Server-side includes
Any server-side language/frameworks: PHP, Ruby, Python, Java, etc.
You can, however, also do it on the client side:
With <iframe>: <iframe src="managers/john.html">
With Javascript:
Put all manager bios into, say, manager-bios.js:
var managerBios = {
"john" : { "fullName": "John Doe", "projects": ["a", "b", "c"] ...}
"jane" : ....
}
Reference it in the html: <script src="manager-bios.js"
Reference corresponding manager on the page: <div id="responsibleManager" data-manager="john">
On page load, populate manager's data (I'm using jQuery here):
$(document).load(function() {
var managerId = $("#responsibleManager").data("manager");
$("#responsibleManager").html("<div>" + managerBios[managerId].fullName + "</div> Projects: " + managerBios[managerId].projects.join(","));
}
Load data from external source with Javascript (again, using jQuery here, assuming same html as above):
$("#responsibleManager").load("managers/" + $("#responsibleManager").data("manager") + ".html");

making a particular part of a page an editable region in dreamweaver cs6

I have a template withe several divs. now, i am confused on how to make a particular part editable and append it to another existing page.
E.g. I have a page which has been developed, I want to make the menu navigation, right bar, and footer menu editable such that i can append it to the already created page.
I have created an editable page, but its just adding the whole page to the new page making it look jam-packed.
How can i go about this?
Any help with steps will be appreciated
Thanks !
You could put your html into a php file, and then create the file that you want to append the code to a php file as well. then all you have to do is put:
<?php
include 'filename';
?>
Wherever you want the code to appear on the page.
Note, all html works in a php file as long as the html is not surrounded by the php tags.
For example you could do this
<html>
<title> Hello </title>
....other html here.....
<?php
include 'filename';
?>
</html>
But this wont work:
Hello
....other html here.....
include 'filename';
?>

How to embed snippet of HTML into a Wordpress page *without* plugins?

Searching this topic comes up with custom plugin solutions but I'd prefer to learn what's involved in doing this 'manually'. The problem:
I have a snippet of HTML which includes a form (an Amazon Payments Donation button) which I'd like to insert into one of my Wordpress pages. When I do it in the Text editor, it quasi works but the resulting code gets seriously modified by Wordpress.
For instance, a <br></br> gets added after each hidden input element, and some extraneous <p></p> elements get slotted in as well, making the resulting div huge, full of white space (that's impossible to correct via CSS alone).
What would be a non-plugin fix, or is it even possible?
You can try cleaning the p and br tags from the content
simply add this to your functions.php file
function clean_shortcodes($content){
$array = array (
'<p>[' => '[',
']</p>' => ']',
']<br />' => ']'
);
$content = strtr($content, $array);
return $content;
}
add_filter('the_content', 'clean_shortcodes');
Hope it helps :)

How can I add HTML near the </body> tag within a Joomla Module?

I am quite new to using Joomla. I have created a custom module, however I would like to add some code near the </body> tag (or near the opening <body> tag) so it is guaranteed to be not nested in any tables whatsoever that might be in the template.
I have located details on how to do this within a content plug-in, however I would like to just have the module.
Any ideas? Thank you.
If the entire module is to go just before </body> then you will need to create a module position in your template. In the file /templates/[name]/index.php put this in the required location:
<jdoc:include type="modules" name="endofpage" />
Now when you add the module you can put it in the position "endofpage" (or a better name if you choose).
Otherwise, if your main module content is to be within the regular design, you will have to create two modules or use the plugin method like you said. There is no way to inject content into two different parts of a page with one module (unless you use Javascript to generate it).
I'm not quite sure I follow why what DisgruntledGoat suggested won't work.
If you want to add code immediately at the start of the
1) Create a new module position in your template.xml (call it startofpage, or endofpage)
2) In you template index.php place the code
3) Depending on what you want to output, change the style attribute of the module
</head>
<body>
<jdoc:include type="modules" name="startofpage" style="xhtml" />
...YOUR CONTENT IN HERE
<jdoc:include type="modules" name="endofpage" style="xhtml" />
</body>
</html>
Stuff on a joomla website is placed inside positions, so it depends on the positions your template has.
So, if there is an empty position available (that comes after all the other positions), placing your module there will have it as the last thing before the end of body.