plugin.tt_news.displaySingle {
imageWrapIfAny = <div class="newsImageWrapper">|</div>
caption_stdWrap >
caption_stdWrap.wrap = <div class="captionHolder">|</div>
}
Can any one tell me why all my images go into div.newsImage wrapper insisted of single one??
If you want to wrap every single image with a new div, then use this Typoscript:
plugin.tt_news.displaySingle.imageWrapIfAny >
plugin.tt_news.displaySingle.image.wrap = <div class="newsImageWrapper">|</div>
Related
I have a svelte app where I map channelcodes to imported logos and render that logo in a div that is in a focused or unfocused state. Currently I have been mapping 1 image and changing the CSS of the logo(SVG) conditionally. But I find it kind of hacky and makes more sense to switch between a focused and unfocused versions of the logo image. The style of the element I can change, but i don't know how to switch images through my mapping (I want to avoid long if statements or switch cases as there could be many logos).
How would I switch between two images? Let me know if more information is required. (One idea I thought was an array of two images and I pass in an index 0 or 1 somehow)
TS FILE
import { Television_ChannelCode } from '#gql/schema';
import Logo1 from '#logos/Logo1.svelte';
import Logo2F from '#logos/Logo2F.svelte';
import Logo2U from '#logos/Logo2U.svelte'
const map = new Map<Television_ChannelCode, any>();
map.set(Television_ChannelCode.News, Logo1);
//I want to switch between 2, use array?//
map.set(Television_ChannelCode.Sports, [Logo2F, Logo2U]);
export const getLogoFromTelevisionChannelCode = (
televisionChannelCode: Television_ChannelCode,
): any => {
return map.get(televisionChannelCode);
};
SVELTE FILE <--- Can change style but how to swap images??
{#if hasFocus}
<div class={focusedStyle}>
<svelte:component this={getLogoFromTelevisionChannelCode(channelCode)}/>
</div>
{:else}
<div class="unfocusedStyle">
<svelte:component this={getLogoFromTelevisionChannelCode(channelCode)}/>
</div>
{/if}
In your example the if block could be avoided by combining the class
<div class={hasFocus ? 'focusedStyle' : 'unfocusedStyle'}>
<svelte:component this={getLogoFromTelevisionChannelCode(channelCode)}/>
</div>
Your approach with the array could work like this
<div>
<svelte:component this={getLogoFromTelevisionChannelCode(channelCode)[hasFocus ? 0 : 1]}/>
</div>
(if every channel had the two version array) but I think the better approach would be to stick to the one component per Logo version, handle the styling intern and export a hasFocus flag from components, so it could look like this
<svelte:component this={getLogoFromTelevisionChannelCode(channelCode)} {hasFocus}/>
I am using a powermail form inside of a two-column gridelement. While outside of the gridelement, the form works finde, but as I soon as I pack it into a column, it doesn't get rendered in the frontend.
Instead I just get a cache-reference (something like this: '< !--INT_SCRIPT.bac5b8b4bd3180848642d7849f -- >' ). So obviously the problem is somehow related to the content being cached.
So my question is: Where can I get started on fixing this?
How can I tell the gridelement to output rendered content instead of the cache-hash? Or would I need to get into the powermail code?
Here's my grid setup, in case that is any help:
plugin.tx_gridelements_pi1.setup.2col {
outerWrap = <div class="row"> | </div>
outerWrap.preCObject < lib.stdheader
columns.default {
outerWrap = <div class="col col-xs-12 col-sm-6"> | </div>
renderObj =< tt_content
}
}
Have you check in witch order you include the static templates? Gridelements should be the last entry.
And do you have an output when you deleting the grid setup..?
Here's my code, lifted from waypoints docs:
var sticky = new Waypoint.Sticky({
element: $('.objectheader')[0]
})
<div class="object" id="object2">
<div class="objectheader" id="header2">Header Item 2</div>
<div class="objectbody" id="body2"><img src="images/samplechart.png" /></div>
<div class="clear"></div>
</div>
Basically, I have multiple objects (the list will grow, so hard coding for each ID isn't an option) that each contain an objectheader and objectbody. Every time I hit an objectheader, I want it to apply the sticky class and stick at the top until it reaches a new one, however it's only working on the first object. I know I'm missing something simple here...
with [0] you are specifying the very first element. You need to iterate over them to add a waypoint to each element...
var sticky = [];
$('.objectheader').each(function(idx){
sticky[idx] = new Waypoint.Sticky({ element: this });
});
then sticky will be an array of all your waypoint objects.
I try to read pics (for a slider) from a folder. I have a marker called ###SLIDER### and my images are in the fileadmin/sliders/ folder.
I would like to achieve the following output as in the template that I bought:
<div class="camera_wrap">
<div data-src="fileadmin/sliders/slider_1.jpg">
<div class="camera-caption fadeIn">Text_1</div>
</div>
<div data-src="fileadmin/sliders/slider_2.jpg">
<div class="camera-caption fadeIn">Text_2</div>
</div>
<div data-src="fileadmin/sliders/slider_3.jpg">
<div class="camera-caption fadeIn">Text_3</div>
</div>
</div>
How can I load the images from a folder using Typoscript and display it this way?
The following code will give you what you want but without the captions. It works in TYPO3 4.5.x. I'm not sure that it works in higher versions as the description of filelist in the current (as of 16/10/2013) manual is somewhat confusing so I don't know if something has changed in the newer versions.
YOUR_MARKER = TEXT
YOUR_MARKER {
filelist = fileadmin/sliders/
split {
token = ,
cObjNum = 1
1 {
current = 1
wrap = <div data-src="fileadmin/sliders/|"></div>
}
}
wrap = <div class="camera_wrap">|</div>
}
NOTE: This is a very simple example that presumes that all the images in the folder are already resized to appropriate dimensions and that all the files within the folder are images. To make it better, the first (1) object of the split might be set to be IMG_RESOURCE. This way it would check that only images are outputted and it would allow you to use GIFBUILDER to resize the images if needed.
Let's say I have a product to which I've added an image field called SmallImage.
When I show a list of products, I want the small image to be in the view.
When I go to the list of divisions I get the default summary view, like so:
<article class="content-item #contentTypeClassName">
<header>
#Display(Model.Header)
#if (Model.Meta != null) {
<div class="metadata">
#Display(Model.Meta)
</div>
}
</header>
#Display(Model.Content)
#if(Model.Footer != null) {
<footer>
#Display(Model.Footer)
</footer>
}
</article>
How does #Display(Model.Content) generate the HTML?
Where is the .cshtml file I can put #Html.Image(Model.SmallImage) into?
EDIT
Ok, I found the property off the model: Model.ContentItem.Product.SmallImage.FileName, so I just need to know where the template file is.
THX!
Dan
Bonus Question:
Using the designer tools in any list view. Go to Zone[Content].Content.List. Under Shape is says there are two alternate views. One is MyTheme/Views/List.Html. If you click on "create" it says The relative virtual path 'Orchard.Core.Shapes.CoreShapes::List' is not allowed here. Does that mean that there really isn't an alternate for this view?
I manually created the file that was giving me the error in the bonus question and this gets me the image. (List-url-products.cshtml)
<div>
#foreach(var item in Model)
{
<div>#item.Title.ToString()</div>
var division = item.ContentItem.Division;
var smallImage = (Contrib.ImageField.Fields.ImageField) division.ListImage;
if(smallImage.FileName != null)
{
<div>#Html.Image(smallImage.FileName, null, new { Width=smallImage.Width, Height=smallImage.Height }) </div>
}
}
</div>