Blogger template: Style blog post based on label - syntax

I'm trying to change the style of a blog post (for instance change the title color), based on the labels associated to the post.
I'm a bit new to the templating, so I though I would be going to add a class with the label in the title <h3> element, and then add my CSS rules.
So I found this which would generate a proper list of labels separated by a space:
<b:loop values='data:post.labels' var='label'><data:label.name/> </b:loop>
However, it seems the validator does not let me add this inside the class attribute as follow:
<h3 class='post-title entry-title <b:loop values="data:post.labels" var="label"><data:label.name/> </b:loop>'>
From there, I found half the solution. Apparently, I should use expr:class instead of class as follow:
<h3 expr:class='"post-title entry-title " + data:list_of_labels'>
So now:
- How can I build this variable data:list_of_labels? (basically how to set a variable)
- Is there a full description of the template syntax somewhere?
- Is there another way to go around this?
Thanks,
JB

This should do it. Using XML entities allows you bypass the XML validation and move the Blogger functions to where you need them. Longer explanation here: http://www.karlhorky.com/2012/06/add-blogger-labels-to-post-as-css.html
<div class="post<b:if cond="data:post.labels"><b:loop values="data:post.labels" var="label"> <data:label.name></data:label.name></b:loop></b:if>">
<data:post.body>
</div>

There is no way to set variables in the blogger data xml, however you can set variables using javascript.
There are many pages on the blogger data xml. Google is your friend. For example this one.
You are on the right track: do a loop, use javascript to check for the combinations you want, change the style properties or load a css file dynamically.

Related

Can I access the header of a text content element?

I need to get the headline and the text separately out of a text content element. The reason is, to give the editor a simple way to add a content for a complicated section in my html theme.
I am new to TYPO3 an we run V11.5.16! I read and watched some tutorials and I got most of my site already working! Contents are dynamic and multilinguale so far.
To get contents from backend, I use Backend Layouts and copy the content from styles.content.get inside my setup.typoscript. I think this is the common way to do it, and as I said, it works. I output them using {contentXY->f:transform.html()} or {contentXY->f:format.raw()}.
For a text content element, I get something like:
<div id="c270" class="frame frame-default frame-type-text frame-layout-0">
<header>
<h2 class="">Headline</h2>
</header>
<p>Some Text</p>
</div>
Is it possible to get only "Headline"? And if so, it hopefully works also for getting out separately "Some Text"
Something like: {contentXY->f:transform.html(filterBy('h2'))}
Thanks in Advance!
EDIT:
According to Peter Krause's answer: I know, there is an extra content element for headers. But I need the text content element, because for the places in the html, I need header AND text. And the editors are technically not savy enough to fill in different content elements. Please don't ask in more detail. ):
You can handle header and body of an CE seperately, but not in a page context.
In page context you get the result from rendering the CEs, which is a string (with HTML).
For each CE there is a rendering information, which nowadays is also FLUID.
Depending on your installation it probably is FSC (ext:fluid_styled_content) or a Bootstrap extension.
This means: there are FLUID templates which can be overriden and modified.
In these templates you have access to each field of a CE separately.
Look for the templates stored in the defined paths (in TSOB) and add your own path for overides:
lib.contentElement {
templateRootPaths {
1 = ...
2 = ...
3 = ...your path...
}
partialRootPaths {
1 = ...
2 = ...
3 = ...your path...
}
layoutRootPaths {
1 = ...
2 = ...
3 = ...your path...
}
}
Thanks for all hints! I think, for my requirement, there is no solution out of the box. So i made a custom CE with Mask and edited the template html. For non-technical editors, it is the best solution in terms of data input. I hope this stands for future upgrades...

How to provide details/summary HTML element in TYPO3's CKEditor?

Unfortunately there's no details/summary element in the default CKEditor configuration of TYPO3 and I'm looking for a way to add it.
What I've been trying to do:
I searched and found a widget on https://ckeditor.com/cke4/addon/detail , but it's repository on GitHub has been archived and the widget does not work as expected. It requires 'api,widget' and this generates a JavaScript error:
[CKEDITOR.resourceManager.load] Resource name "api" was not found at "/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Contrib/plugins/api/plugin.js?t=K24B-4e13cc129f".
When removing this requirement for "api", there's an error regarding line 72
CKEDITOR.api.parser.add(item, el);.
Then I found a similar widget at GitHub , which looks like an older version of the former without requirement for "api".
It already looks quite good, but is still a bit buggy: the HTML structure is changed when saving and the summary is duplicated. When switching to the source code, the HTML structure specified in the template ...
<details><summary>Summary</summary><div class="details-content"></div></details>
… get's partially lost.
I'm not sure if the widgets are buggy or if the editor is limited by the integration into TYPO3 and I was also not able to combine the two in a way that would lead to a working solution.
Update (Jul 22):
I successfully modified the Creating a Simple CKEditor Widget (Part 1) example to create
a widget with the following HTML structure:
<div class="expander">
<p class="expander-title">Title</p>
<div class="expander-content"><p>Content...</p></div>
</div>
With the help of a small JavaScript snippet and some CSS it now behaves almost like a details-summary element, but is not quite as good in terms of SEO and accessibility.
If I replace the elements <div class="expander"> and <p class="expander-title"> with <details> and <summary> in the widget, it unfortunately doesn't work properly anymore and changes the structure when saving. For some reason the RTE treats them differently.
I have already manually added the following to the RTE configuration:
processing:
allowTags:
- details
- summary
allowTagsOutside:
- details
- summary

Custom sections Umbraco

Not even sure I labeled this correctly, I am in the process of converting a site to Umbraco, and there are sections of the site that needs to be edited using the CMS tools in the back end, basically it is a grid with pictures and description text
Here is a sample of the HTML
<div class="hi-icon-effect-1 hi-icon-effect-1a">
<a class="hi-icon">
<img class="img-responsive " id="ImgSales" src="../../Images/sales_icon_circle_grey.png" alt="">
</a>
<p style="padding-left:5px;" id="lblSales" class="">Sales</p>
</div>
What I would like to be able to do is go to the content section of the admin and edit the list of items and configure the image and text for each item.
http://www2.strikemedia.co.za/
If you view the above link and scroll down there will be a grid of items (services) and it is this list that I want to be able to generate.
I am comfortable with all the technologies used in Umbraco, I just do not know the system well enough to do these kinds of modifications, can someone please assist or point me to the resources that will help me build this.
Thanks
You should take a look at the Archetype package: https://our.umbraco.org/projects/backoffice-extensions/archetype/
As far as I understand your question you are looking for a way to add X amount of similar items to the contents of a page - for this, Archetype is probably perfect :-)
Once you have your list of items added inside Umbraco, look here: https://github.com/kgiszewski/ArchetypeManual/blob/master/03%20-%20Template%20Usage.md
Use case #1 in this example will allow you to iterate through items and output it with whatever "template" you want (aka the HTML sample you provided).

How do I do strikethrough (line-through) in asciidoc?

How do I render a strikethrough (or line-through) in an adoc file?
Let's presume I want to write "That technology is -c-r-a-p- not perfect."
That technology is [line-through]#crap# not perfect.
As per Ascii Doc manual, [line-through] is deprecated. You can test here.
Comment from Dan Allen
It's important to understand that line-through is just a CSS role. Therefore, it needs support from the stylesheet in order to appear as though it is working.
If I run the following through Asciidoctor (or Asciidoctor.js):
[.line-through]#strike#
I get:
<span class="line-through">strike</span>
The default stylesheet has a rule for this:
.line-through{text-decoration:line-through}
You would need to do the same.
It is possible to customize the HTML that is generated using custom templates (Asciidoctor.js supports Jade templates). In that case, you'd override the template for inline_quoted, check for the line-through role and produce either an <s> or, preferably, a <del> instead of the span.
If you're only targeting the HTML backend, you can insert HTML code verbatim via a passthrough context. This can be done inline by wrapping the parts in +++:
That technology is +++<del>+++crap+++</del>+++ not perfect.
This won't help you for PDF, DocBook XML, or other output formats, though.
If the output is intended for HTML you can pass HTML.
The <s> HTML element renders text with a strikethrough, or a line
through it. Use the element to represent things that are no longer
relevant or no longer accurate.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s
To render as:
Example text.
use:
1. Pass inline:
Example +++<s>text</s>+++.
2. Pass-through macro:
Example pass:[<s>text</s>].
3. Pass block:
++++
Example <s>text</s>.
++++

How to add an additional article info on sidebar in Joomla 1.5?

I want a sidebar on article page, with additional info. Is there such a solution for Joomla 1.5.
I mean that I add an article and the info is pulled from my text between the tags e.g.
{info_for-sidebar}
Lorem ipsum....
{/info_for-sidebar}
And this info shows in sidebar for current article with actual info.
Is this possible?
Setting up something like what you are asking for require some sort of workarounds.
First, lets agree that what you are calling a "sidebar" is nothing but a content... You enter that content as a part of your article.
So, to achieve what you are asking for I would recommend you use what is called CCK - Content Construction Kit - extension for Joomla using Form2Content. There's a free light edition that would be enough.
Form2Content let you setup a content type. You define what fields you want for each content. Then you create a template that will use the info you are going to enter on the fields to built an article layout.
So let's say you are going to create 3 fields like this :
1- Intro text
2- Full text
3- Sidebar
You are going to create a template as we said. each content type will have 2 templates an intro text template and a full text template
The full text template shall be like this :
<div class="content-container">
<div class="content-sidebar">{$SIDEBAR}</div>
<div class="content-fulltext">{$FULLTEXT}</div>
<br clear="both" />
</div>
The {$SIDEBAR} and {$FULLTEXT} are the text you entered in the form and Form2Content will use it to create a regular content with layout.
If you don't want to use another extension or that solution looks too complicated, you could use a javascript solution. For example you could create an HTML module in Joomla and assign its to the sidebar. On this module switch the view to HTML code and enter this:
<div class="content-sidebar"></div>
When you enter an article, switch the view to HTML code and enter the text you want to show on the sidebar and add a class to the paragraph or the div like this :
<p class="special-content">Lorem ipsum dolor<p>
Then use jQuery to append this special text to the sidebar like this :
jQuery(".content-sidebar").append(".special-content");
Note: Joomla does not load jQuery by default, you have to add it on your template or use a plugin.

Resources