I need to figure out a way to add information from sibling pages to my template file
Here is an image of the file structure (the red items are the siblings whos info I need to access inside my template):
Here is the tpl file code that I am using:
[[+total:isequalto=`1`:then=`<div class="equalHeightListItem full_width[[+idx:isequalto=`1`:then=` column-last`]]">`:else=``]][[+total:isequalto=`2`:then=`<div class="equalHeightListItem one_half[[+idx:isequalto=`2`:then=` column-last`]]">`:else=``]][[+total:isequalto=`3`:then=`<div class="equalHeightListItem one_third[[+idx:isequalto=`3`:then=` column-last`]]">`:else=``]][[+total:isequalto=`4`:then=`<div class="equalHeightListItem one_half[[+idx:isequalto=`2`:then=` column-last`]][[+idx:isequalto=`4`:then=` column-last`]]">`:else=``]]
<figure class="projectImg bwWrapper icon-box7">
<a href="[[~[[+id]]]]">
<div class="operations productImage" style="max-width: 100%; background-image: url('[[+tv.products.category.img]]')"></div>
</a>
<div class="projectDesc equalHeightListItemInner operations">
<h4>[[+menutitle:default=`[[+pagetitle]]`]]</h4>
<p>[[+introtext]]</p>
<div>Read More</div>
<!-- I need to add sibling info here -->
</div>
</figure>
</div>
Any help is greatly appreciated.
I use pdoResources (which similar to getResources, but faster). Place this code in instead <!-- I need to add sibling info here --> and this is would help.
[[pdoResources?
&parents=`[[+id]]`
&depth=`1`
&tpl=`your_sibling_row_tpl`
]]
Related
Let's say I have a ditamap file.I have published into html5.after published let's say my html file look like
<body id="SampleTopic">
<h1 class="title topictitle1" id="ariaid-title1">Sample topic</h1>
<div class="body">
<p class="p">some<strong class="ph b">bold</strong><span class="ph special">text</span></p>
<div class="p">
<dl class="dl">
<dt class="dt dlterm">Term</dt>
<dd class="dd">Defination</dd>
</dl>
</div>
</div>
</article>
</body>
here in Html file, I want to add some new attribute on the body element like
<body id="SampleTopic" class="test">
so can anyone help me with how to solve this????
can I add some plugin, if yes how to write the code???
If all you need is the HTML #class attribute, then there's no need to develop a custom plug-in.
You can just specify a value for the #outputclass attribute on an element in your DITA source files, and the value will be passed to the HTML #class attribute in the output.
I masked(mask-extension) a couple of plug-ins. When the image is generated in the template, it is always wrapped in following divs:
<div id="c63" class="frame frame-default frame-type-image frame-layout-0">
<div class="ce-image ce-center ce-above">
<div class="ce-gallery" data-ce-columns="1" data-ce-images="1">
<div class="ce-outer">
<div class="ce-inner">
<div class="ce-row">
<div class="ce-column">
<figure class="image"><img class="image-embed-item"
src="fileadmin/user_upload/bla" width="975"
height="678" alt=""></figure>
</div>
</div>
</div>
</div>
</div>
</div>
Is there any way to remove all those wrappers? I simply want to have the image.
Sidenotes:
1. f:image does not work, I cannot access the proper uid for it to show. (This is perhaps an issue with mask)
2. I cannot find the tt_content.stdWrap.innerWrap > in my typoScript, as I do not know where mask puts it. It is neither in the netup.ts nor in the NewContentElementWizard.ts
You need to overwrite the fluid_styled_content partial in Resources/Private/Partials/Media/Gallery.html.
How to overwrite, you can read here: https://docs.typo3.org/typo3cms/extensions/fluid_styled_content/8.7/Configuration/OverridingFluidTemplates/
Images are not showing on my site on github pages.
This is my site:https://rsgrw23.github.io/rate-your-beer/
Locally everything is working fine.
This is the repository: https://github.com/rsgrw23/rate-your-beer
What is wrong?
For example, here's an excerpt of src/components/home.vue <template>:
<template>
<div class="home">
<img class="home__img__header" src="src/assets/craft-beer.jpg" alt="Craft Beer">
<header class="home__header">
<transition appear appear-active-class="bounce-enter-active">
<h1>"Czasem najlepszym wyjściem</h1>
</transition>
<transition appear appear-active-class="bounce-enter-active">
<h2>Jest wyjście na piwo"</h2>
</transition>
</header>
<main class="home__main">
<h1 class="home__title">Fun Facts</h1>
<article class="home__article">
<div class="home__content content-1"><h1>Lepsze od wody?</h1>
<p>W mi... dziś.</p></div>
<img class="home__img img-1" src="src/assets/wish-you-beer-here.jpg" alt="piwo">
</article>
<article class="home__article">
<img class="home__img img-2" src="src/assets/beer-mine.jpg" alt="piwo">
<div class="home__content content-2"><h1>Nie tylko z chmielem</h1>
<p>Je...em.</p>
<p>Co cie...ika!</p></div>
</article>
<article class="home__article">
<div class="home__content content-3"><h1>IPA czyli napój żołnieży</h1>
<p>Bry...wa.</p></div>
<img class="home__img img-3" src="src/assets/water.jpg" alt="piwo">
</article>
</main>
<div class="description">
<div class="description__content">
<div class="description__article">
<h1 class="description__header">Piłeś piwko?</h1>
<h2 class="description__header">Oceń je!</h2>
</div>
</div>
</div>
</div>
</template>
Images are located at src/assets/craft-beer.jpg for instance.
So webpack is able to find the images and process them as resources, you should reference the assets (images) via relative paths, not absolute paths.
So, considering a file at /src/components/home.vue with images at /src/assets (being / the project root), instead of:
<img class="home__img__header" src="src/assets/craft-beer.jpg" alt="Craft Beer">
Use:
<img class="home__img__header" src="../assets/craft-beer.jpg" alt="Craft Beer">
Naturally, in other files, change the relative path accordingly.
For the images to work with Vue the generated file there are few ways.Here is an SO link on the same.
How to import and use image in a Vue single file component?
What you will want to do here is something like this.
<img class="home__img__header" src="~src/assets/craft-beer.jpg" alt="Craft Beer">
This lets the webpack know about the image being an asset and generate its path appropriately.
Hi am trying to design an accordion component using sightly in AEM where instead of jsp we write html code along with different file for css and js under client libs.
I simply coded the below written part and wrote js for the same but am not able to see any changes ... Could someone please provide me a solution to implement the same.. ->when i click on show a parsys section opens up and when show converts to hide and when i click on hide the parsys section closes and hide converts to show.
<div data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}" data-sly-unwrap>
<css data-sly-call="${clientLib.css # categories=['sd-singtel.accordion_2']}" data-sly-unwrap/>
<js data-sly-call="${clientLib.js # categories=['sd-singtel.accordion_2']}" data-sly-unwrap/>
</div>
<div data-sly-test="${wcmmode.edit}">Accordion_2 component</div>
<div class="about-contentcontainer">
<div class="about-content">
<div class="awards">
<h4> <span class="more">Show</span></h4>
<h4> <span class="more expanded">Hide</span></h4>
</div>
</div>
</div>
<script>// <![CDATA[
$(document).ready(function() {
alert("Hello");
$(".awards h4 a").click(function() {
enter code here
$(this).parent().next().slideToggle("slow");
var htmlStr = $(this).find(".more").html();
if (htmlStr == "Show") {
$(this).find(".more").html("Hide");
$(this).find(".more").addClass("expanded");
} else {
$(this).find(".more").html("Show");
$(this).find(".more").removeClass("expanded");
}
});
});
// ]]></script>
Looking at it, I think that this has little to do with Sightly or even with AEM. Also, I'm not sure which content you want to toggle.
Below's a working HTML fragment for toggling content (independent from AEM):
<style>
.toggle-content {
display: block;
}
.toggle-content-hide,
.toggle-content-hidden .toggle-content-show {
display: inline;
}
.toggle-content-show,
.toggle-content-hidden .toggle-content-hide {
display: none;
}
</style>
<a href="#" class="toggle-content">
<span class="toggle-content-show">Show</span>
<span class="toggle-content-hide">Hide</span>
</a>
<div>Sample content 1</div>
<a href="#" class="toggle-content">
<span class="toggle-content-show">Show</span>
<span class="toggle-content-hide">Hide</span>
</a>
<div>Sample content 2</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
jQuery(function($) {
$('.toggle-content').click(function () {
$(this).toggleClass('toggle-content-hidden').next().toggle('slow');
return false;
})
});
</script>
To implement this in AEM, you should place the inline CSS into a CSS file of a client library, and the inline JS into a JS file of a client lib. I usually recommend to place them in the same client library within the component itself, so that everything that relates to that component is in the same folder. But when doing so, it is important to keep in mind that on a publish server, all /apps requests are forbidden by the dispatcher for security reasons, so all client libraries located under /apps should be merged and minified as one file that is typically located somewhere under /etc. To do so, you can use following repository node structure:
/apps/
mysite/
components/
mycomponent/
mycomponent.html Sightly template
clientlib/
jcr:primaryType = cq:ClientLibraryFolder
categories = [mysite.mycomponent]
css.txt contains just a reference to style.css
style.css contains the style snippet
js.txt contains just a reference to script.css
script.js contains the script snippet
/etc/
designs/
mysite/
clientlib/
jcr:primaryType = cq:ClientLibraryFolder
categories = [mysite.publish]
embed = [mysite.mycomponent, ...]
dependencies = [mysite.jquery]
The embed property of the /etc clientlib will make that it embeds and merges within the same file all clientlibs that are listed there. As opposed to the client libraries listed under the dependencies property, which will not get merged and will be served as a separate file. You can play with these properties to build the structure you need to optimize your site. There are also settings to automatically minify or not these files.
On the page, you then include the mysite.publish master clientlib located under /etc. So your page <head> element, would contain something like following Sightly template:
<head data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientLib.all # categories='sd-singtel.accordion_2'}" data-sly-unwrap/>
</head>
If you're using AEM 6.1, you can even drop the data-sly-unwrap, because the <sly> tag has the same effect.
After that, the Sightly template of your component located under a path like /apps/mysite/components/mycomponent/mycomponent.html would look as follows:
<div data-sly-test="${wcmmode.edit}">mycomponent name</div>
<a href="#" class="toggle-content">
<span class="toggle-content-show">Show</span>
<span class="toggle-content-hide">Hide</span>
</a>
<div>${properties.myContentProperty}</div>
I've my markups as
<div id="home" class="current">
<div class="header">iScroll</div>
<div class="wrapper">
<div id="scroller">
<ul id="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
<!-- Events Details -->
<div id="events">
<div class="header">iScroll</div>
<div class="wrapper">
<div id="scroller"> <!-- stuffsss --></div>
</div>
<div class="footer">Footer</div>
</div>
For iScroll (http://cubiq.org/iscroll) to work, I need the #scroller as ID (as per the javascript Code I'm using to initialize iScroll.
//for iScroll
var myScroll = new iScroll('scroller', {desktopCompatibility:true});
// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);
But since I can't have two different elements with the same ID (please notice I've got two elements with same id scroller in my markup above), some conflicts are there and the iScroll isn't working properly.
I want to be able to implement the iScroll on the markup by changing the id as classes. I tried to change them into classes and see if it works but I couldnt get it right.
Can anyone help me change the codes so that it works by implementing classes instead of the the id??
Rob is right, but you can change your code to scroller classes as you said.
Then initialise your scrollers within unique wrappers like this:
var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}
I'm not totally clear on what you are trying to achieve but if you want two parts of your page to scroll I would suggest changing the IDs to be unique and instantiate two iScrolls with the different IDs.
I am sure you have figured it out, but for other users still struggling with similar layout (multiple scrollers) and want to make them work. Here is the answer from other thread
https://stackoverflow.com/a/7584694/1232232
but for this to work you need to assign ID's to your classed (div containers)
like
<div id="home" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
<div id="home2" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
Note: Remember not to assign same ID to multiple elements, always use classes for that purpose.