Looking plugin ST2 in which this can:
Do U know a Emment (previously version has named ZenCoding).
When u try this example =>
div#wrapper>div.someclass>p.class2{text}|c + tab
===>
<div id="wrapper">
<div class="someclass">
<p class="class2">text</p>
<!-- /.class2 -->
</div>
<!-- /.someclass -->
</div>
The difference is that this I use the finished text (Emmet it knows when it write from scratch)
Related
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.
Actually I found the answer already on this site
Preferred way to add an extensions into Fluid Powered TYPO3 template
but I don't get it to work :-(
I have a page template with main content and in the sidebar content from FlexSlider extension and at the bottom I want to render the list view of extension news. So I guess answer 1a from Claus will fit:
1a) create the element in a sys folder and reference it from your Flux form settings then use v:content.render to render it by UID.
but how is that done? How do I reference it from my Flux form?
Has somebody an example code. I couldn't find a tutorial or a documentation...
Thanks for reading and hopefully you have an answer ;-)
Jürgen
An easy way is to create a typoscript element and then render it in fluid:
lib.rightcolumn = CONTENT
lib.rightcolumn {
table = tt_content
select {
pidInList = 42
where = colPos=1
}
}
<f:cObject typoscriptObjectPath="lib.rightcolumn" />
Another way is to directly create it in fluid:
https://fluidtypo3.org/viewhelpers/vhs/master/Content/RenderViewHelper.html
Finally I got it accidentally by fixing another problem:
Fluid Powered TYPO3 FLUX Fluidcontent - No Output in Frontend?
I had to add the file "typo3conf/AdditionalConfiguration.php" with
<?php $GLOBALS['TYPO3_CONF_VARS']['FE']['contentRenderingTemplates'] = array('fluidcontentcore/Configuration/TypoScript/');
Thanks for help nBar, I used "f.cObject" as workaround.
Now here is my Page/Template code:
<f:section name="Configuration">
<flux:form id="homepage">
<flux:grid>
<flux:grid.row>
<flux:grid.column colPos="0" colspan="2" name="main" label="Main content"/>
<flux:grid.column colPos="1" colspan="1" name="logoslider" label="Logo slider"/>
</flux:grid.row>
<flux:grid.row>
<flux:grid.column colPos="2" colspan="3" name="news" label="News"/>
</flux:grid.row>
</flux:grid>
</flux:form>
</f:section>
<f:section name="Main">
<div class="container">
<div class="row">
<div class="col-md-8">
<v:content.render column="0"/>
</div>
<div class="col-md-4 team_logos">
<div class="infobox">
<v:content.render column="1"/>
</div>
</div>
</div>
<div class="row infobox">
<div class="col-md-12">
<v:content.render column="2"/>
</div>
</div>
</div>
</f:section>
I am using ng-flow in my app, is there any way to limit the number of files for upload?
A code sample:
<div class="thumbnail" ng-show="$flow.files.length">
<img flow-img="$flow.files[0]" />
</div>
<div>
Select image
Change
<a href="#" class="btn btn-danger" ng-show="$flow.files.length"
ng-click="$flow.cancel()">
Remove
</a>
</div>
The attribute flow-file-added is expecting a boolean value.
You can put all your conditions in there.
$flow.files.length returns the number a files you have already added
For example:
<div flow-init flow-files-submitted="$flow.upload()" flow-file-added="$flow.files.length<3"></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.