I am trying to get a wrapper element around an image including its caption in the single view in tt_news for Typo3 6.1. How would I do that?
So far I only figured out how to do that for either all images
plugin.tt_news.displaySingle.imageWrapIfAny = ...
or the caption itself
plugin.tt_news.displaySingle.caption_stdWrap.dataWrap = ...
. But I have no clue how to create a wrapper for each single image including its caption...
Thanks in advance!
I know this is quite old, but as a follow-up that works in TYPO3 6.x you can use:
displaySingle.image.wrap = <div class="news-img">|
displaySingle.caption_stdWrap >
displaySingle.caption_stdWrap.wrap = <p class="news-single-imgcaption">|</p></div>
So each image and caption gets wrapped by <div class="news-img">...</div>
The following HTML will be provided by the below TS:
<div class="newsImage">
<div class="imageHolder">
<img />
</div>
<div class="captionHolder">
Caption
</div>
</div>
TypoScript:
displaySingle {
imageWrapIfAny = <div class="newsImage">|</div>
image {
file.maxW >
file.maxH >
file.width = 220
stdWrap.wrap = <div class="imageHolder">|</div>
altText.field = imagealttext
}
caption_stdWrap >
caption_stdWrap.wrap = <div class="captionHolder">|</div>
}
Related
i am trying to use Typo3 Fluid with Backendlayouts. But instead of rendering the Content Elements it renders the Html of the Content elements. For example i have a simple Text-Element in the Backend with "some text". It will show <p>some text</p> in the Frontend not "some text" as expected. The html of the homepage looks like this:
<p>
<p>test</p>
</p>
The viewhelper i used to render the content looks like this:
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '11'}" />
</div>
As you can see there is no <p></p> tag at all in my Default.html.
I know that the Text element itself uses the <p> </p> Tags in the backend but i am surprised they get rendered as text and also included in the html. I just want the html of the Contentelement to be included in the html of the homepage
I guess the mistake could be in this typoscript for the lib.dynamicContent in my custom theme extension:
lib.dynamicContent = COA
lib.dynamicContent {
10 = LOAD_REGISTER
10 {
colPos.cObject = TEXT
colPos.cObject {
field = colPos
ifEmpty.cObject = TEXT
ifEmpty.cObject {
value.current = 1
ifEmpty = 0
}
}
pageUid.cObject = TEXT
pageUid.cObject {
field = pageUid
ifEmpty.data = TSFE:id
}
contentFromPid.cObject = TEXT
contentFromPid.cObject {
data = DB:pages:{register:pageUid}:content_from_pid
data.insertData = 1
}
wrap.cObject = TEXT
wrap.cObject {
field = wrap
}
}
20 = CONTENT
20 {
table = tt_content
select {
includeRecordsWithoutDefaultTranslation = 1
orderBy = sorting
where = {#colPos}={register:colPos}
where.insertData = 1
pidInList.data = register:pageUid
pidInList.override.data = register:contentFromPid
}
stdWrap {
dataWrap = {register:wrap}
required = 1
}
}
30 = RESTORE_REGISTER
}
This is the Default.html
<f:layout name="Default" />
<f:section name="Main">
<main role="main">
<div class="container">
<div class="row">
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="pageUid: '{data.uid}', {colPos: '11'}" />
</div>
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="pageUid: '{data.uid}', {colPos: '12'}" />
</div>
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="pageUid: '{data.uid}', {colPos: '13'}" />
</div>
</div>
</div>
</main>
</f:section>
Thank you for your time and please comment if you need more information to be able to help me.
Daniel
I found the mistake and it was a basic one i guess. I did not include the Fluid Content Elements Css - only the Fluid Content Elements. Thanks for your input. If you have this problem include it in your typoscript or in your root-template in the backend. It should appear in "includes"
Probably missing a <f:format.raw> around your Content fluid will htmlescape by default
All of my content elements are wrapped using stdWrap.wrap.
I am looking for a solution to wrap content elements in the page which i have my ke_search added differently .
Why do you need another HTML-markup?
Normaly you have another <div> around your search results which should enable you to add another styling by CSS.
your page may look like:
<body>
<div class="header">
:
</div>
<div class="content">
<div id="C123">
<h3>my very special CE</h3>
<p class="bodytext">with some text to demonstrate.</p>
</div>
<div id="345">
<h3>your search results:</h3>
<div class="search-results">
<a href="index.php?id=67&s=special">
<div id="C123">
<h3>my very special CE</h3>
<p class="bodytext">with some text to demonstrate.</p>
</div>
</a>
<a href="index.php?id=83&s=special">
<div id="C52">
<h2>just a demo</h3>
<p class="bodytext">this text is nothing special.</p>
</div>
</a>
</div>
</div>
</div>
</body>
with appropiate CSS the first CE looks completely different to the same CE in the search results.
h3 { color:black; font-size:16px; }
p.bodytext { color:#444; font-size:12px; }
.search-results h3 { color:blue; font-size:10px; font-weight:bold; }
.search-results p.bodytext { color:#44b; font-size:10px; font-style:italics; }
I answer my own question:
You can conditionally wrap specific content elements using the following typoscript snippet.
tt_content {
stdWrap {
if.value = tx_kesearch_pi2
{
wrap = |
innerWrap >
}
wrap = <div class="someotherclass">|</div>
}
}
I'm creating a tag system on my website. So far it's all working great. But now I wish to create a page that shows all my tags under their own tab like you have with a portfolio page.
Example: http://www.don-zalmrol.be/tags?tag=Electronics
My page already displays the tags for a specific tag under it's own tab (i.e. electronics), but as you might guess I wish to populate the other tags in their respective tab as well.
So in short you land a view that displays the tag you've selected, but on the same page you can see the others as well.
Anybody has any idea how I can do this? I don't think I'm far away from the solution as I can already load the projects for specific tags under it's own tab. Now I only need to populate the remaining tabs with the tags!
Thanks!
This is my code so far:
http://pastebin.com/jwGW0NKZ
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
var portfolio = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text);
var tagList = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text);
string tag = Request.QueryString["tag"];
if (!tag.IsNullOrWhiteSpace())
{
var publishedContent = Umbraco.TagQuery.GetContentByTag(tag);
if (publishedContent.Count() > 0)
{
#* Show title *#
<div class="media contact-info wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<center>
<div>
<i class="fa fa-tags"></i>
</div>
<br />
<div class="media-body">
<h2>Tags</h2>
<p>Browse content by tag</p>
</div>
</center>
<br />
</div>
#* Show tag titles in tabs *#
<ul class="portfolio-filter text-center">
<li><a class="btn btn-default" href="#" data-filter="*">All tags</a></li>
#foreach (var tags in tagList)
{
<!-- Create a selected tag -->
if(#tags.Text == #tag)
{
<li><a class="btn btn-default active" href="#" data-filter=".#tag">#tag</a></li>
}
#* Show all other tags *#
else
{
<li><a class="btn btn-default" href="#" data-filter=".#tags.Text">#tags.Text</a></li>
}
}
</ul>
<div class="row">
<div class="portfolio-items">
#* Start picture content *#
#foreach (var tags in tagList)
{
#* Put selected tag in the right tag tab *#
if(#tags.Text == #tag)
{
#* Show tag content *#
foreach (var item in publishedContent.OrderByDescending(i => i.CreateDate))
{
<div class='portfolio-item #tag col-xs-12 col-sm-4 col-md-3'>
<div class="recent-work-wrap">
#* IF the project has a picture *#
#if(item.HasValue("pictureOfTheProject"))
{
var featureImage = Umbraco.TypedMedia((int)item.GetPropertyValue("pictureOfTheProject"));
<img class="img-responsive" src="#featureImage.GetCropUrl(250, 250)" alt='#item.GetPropertyValue("titleOfTheProject")' />
<div class="overlay">
<div class="recent-work-inner">
<h3>#item.GetPropertyValue("titleOfTheProject")</h3>
<a class="preview" href="#featureImage.GetCropUrl(250, 250)" rel="prettyPhoto">
<i class="fa fa-eye"></i> View
</a>
</div>
</div>
}
#* Else when the project doesnt have a picture, show default one *#
else
{
var noImage = "http://www.don-zalmrol.be/media/1440/no_image_available.png";
<img class="img-responsive" src="#noImage.GetCropUrl(250, 250)" alt="No image" />
<div class="overlay">
<div class="recent-work-inner">
<h3>#item.GetPropertyValue("titleOfTheProject")</h3>
<a class="preview" href="#noImage.GetCropUrl(250, 250)" rel="prettyPhoto">
<i class="fa fa-eye"></i> View
</a>
</div>
</div>
}
</div>
</div>
}
}
#* Put the other tags under there own tab *#
else
{
}
}
#* End dynamic tags *#
</div>
</div>
}
#* No content matching the tag? *#
else
{
<p>There isn't any content matching that tag.</p>
#Html.Partial("TagList")
}
}
#* Show the tag list with amount *#
else
{
#Html.Partial("TagList")
}
}
EDIT 27-03-2016
Ok so I now know that I need to play around with my tag query or use the IEnumerable. But I can't seem to find it out how I can do this without breaking the code...
#* Get all tags and order them by name *#
var tagList = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text);
#* Get requested tag *#
string tag = Request.QueryString["tag"];
#* Show all content by requested tag *#
var publishedContent = Umbraco.TagQuery.GetContentByTag(tag);
Above are the pieces of code that list all the tags I have in a var, gets the name from the URL (i.e. Electronics) and one that then displays all content that matches said queried tag.
So in short I need to change the last part of the TagQuery to list all content that has a tag and then filter it out by the querystring to display them in their own category.
But how can list all tagcontent?
Cheers,
Don
Your issue is on line 76 of the pastebin where you loop through the published content, which is already filtered by the selected tag. Because of this, only content with the selected tag ever gets written to the template.
What you need to do is use the loop on line 70 where you're looping through all tags. The jQuery plugin you're using will handle the filtering by using the CSS class you add on line 78. You can get rid of the loop on line 76.
For clarity, I would also change the
#foreach (var tags in tagList)
to
#foreach (var item in tagList)
since the foreach is producing a single tag rather than plural "tags" as your code insinuates. This has the added bonus of allowing you to keep the rest of your code the same once you remove the loop on line 76.
Question:
lets say, I have this layout:
(There might be a markup-error, but that is not the most important part)
<div class="helpmaincontainer">
<div class="w-clearfix helpnavi">
<div class="language">
<f:format.raw>{language_menu}</f:format.raw>
</div>
<div class="w-clearfix helptext"><a class="sitemap" href="#">Sitemap | </a><a class="sitemap" href="#"> Impressum</a>
</div>
<f:format.raw>{indexedSearch}</f:format.raw>
</div>
</div>
As you can see, i include some "variables", which i fill in my typoscript.
for my case, the indexedSearch isn't working.
my typoscript looks like this:
indexedSearch =< lib.searchbox
lib.searchbox = COA
lib.searchbox {
plugin.tx_rzautocomplete_pi1
}
But nothing appreas in my frontend.
Thank you in advance
That should be
<f:cObject typoscriptObjectPath="lib.searchbox"/>
see http://docs.typo3.org/typo3cms/ExtbaseFluidBook/8-Fluid/5-using-typoscript-for-rendering-the-cobject-viewhelper.html
My Simple HTML Structure:
<html>
<body>
<p id="5">
My Text Qoted Here -
<span class="author">Author </span>
<br>
<span class="uptext">20</span>
<img class="im" class="upimg"
src="http://bgathinktank.files.wordpress.com/2011/01/vote-button.jpg" />
<img class="im" class="downimg"
src="http://2.bp.blogspot.com/_XeuZ1yDnv4Q/TSUkAT6T1dI/AAAAAAAADR8/nPHP4JvVxy8/s1600/vote.jpg" />
<span class="downtext">5</span>
</p>
</body>
</html>
as can be seen there are two images, and i want to change the count of the image based on which image is clicked.
i write the following jquery code for it:
$(function() {
$(".upimg").click(function(e) {
e.preventDefault();
alert("here1");
curr_val = $(this).closest(".uptext").text();
nos = parseInt(curr_val, 10) + 1;
$(this).closest(".uptext").text(nos);
});
$(".downimg").click(function(e) {
e.preventDefault();
alert("here2");
curr_val = $(this).closest(".downtext").text();
nos = parseInt(curr_val, 10) + 1;
$(this).closest(".downtext").text(nos);
});
});
But it does not seem to respond.
You can find the fiddle here
Your <img> tags have two class attributes:
<img class="im" class="upimg"
Try changing that to
<img class="im upimg"
Also, the closest() method returns the closest parent element, not an adjacent sibling, so to find the correct uptext element, you need to use:
$(this).prev().text()
you cant use 2 class attribute
you have to do like that
<img class="im upimg"
src="http://bgathinktank.files.wordpress.com/2011/01/vote-button.jpg" />