I tried following this https://smallbusiness.chron.com/show-date-tumblr-44477.html
doing this
<div class="container">
<div class="main">
{block:Posts inlineMediaWidth="700" inlineNestedMediaWidth="700"}
<article class="
{block:Text} {block:Date} {block:NewDayDate} {DayOfWeek}, {Month} {DayOfMonth}, {Year} {/block:NewDayDate} {/block:Date} text {/block:Text}
{block:Photoset} {block:Date} {block:NewDayDate} {DayOfWeek}, {Month} {DayOfMonth}, {Year} {/block:NewDayDate} {/block:Date} photoset {/block:Photoset}
{block:Photo} {block:Date} {block:NewDayDate} {DayOfWeek}, {Month} {DayOfMonth}, {Year} {/block:NewDayDate} {/block:Date} photo {/block:Photo}
{block:RebloggedFrom}reblogged {/block:RebloggedFrom}
{block:Quote}quote {/block:Quote}
{block:Link}link {/block:Link}
{block:Chat}chat {/block:Chat}
{block:Audio}audio {/block:Audio}
{block:Video}video {/block:Video}
{block:Answer}answer {/block:Answer}
{block:Date}not-page post-{PostID}
{block:Date} {MonthNumberWithZero} / {DayOfMonthWithZero} / {ShortYear} {/block:Date}
{/block:Date} {block:PermalinkPage} active exposed{/block:PermalinkPage}" {block:Date}data-post-id="{PostID}"{/block:Date} {block:SupplyLogging}data-supply-logging='{positions}'{/block:SupplyLogging}>
<div class="post-wrapper clearfix">
But I still don't display dates.
That page I referenced was worthless
I followed instructions here: http://themesbyeris.tumblr.com/tutorial07
Did this
<div class="container">
<div class="main">
{block:Posts inlineMediaWidth="700" inlineNestedMediaWidth="700"}
<article class="
{block:Text}text {/block:Text}
{block:Photoset}photoset {/block:Photoset}
{block:Photo}photo {/block:Photo}
{block:RebloggedFrom}reblogged {/block:RebloggedFrom}
{block:Quote}quote {/block:Quote}
{block:Link}link {/block:Link}
{block:Chat}chat {/block:Chat}
{block:Audio}audio {/block:Audio}
{block:Video}video {/block:Video}
{block:Answer}answer {/block:Answer}
{block:Date}not-page post-{PostID}
{block:Date} {MonthNumberWithZero} / {DayOfMonthWithZero} / {ShortYear} {/block:Date}
{/block:Date} {block:PermalinkPage} active exposed{/block:PermalinkPage}" {block:Date}data-post-id="{PostID}"{/block:Date} {block:SupplyLogging}data-supply-logging='{positions}'{/block:SupplyLogging}>
<div class="post-wrapper clearfix">
<header class="post-header">
{block:LikesPage}
<a class="post-blog" href="{Permalink}"><img class="blog-avatar" src="{PostBlogPortraitURL-30}" data-blog-card-username="{PostBlogName}">{PostBlogName}</a>
{/block:LikesPage}
{block:RebloggedFrom}
<a class="reblog-link" href="{ReblogParentURL}" data-blog-card-username="{ReblogParentName}"><i class="reblog_sm"></i>{ReblogParentName}</a>
{/block:RebloggedFrom}
</header>
<section class="post">
{DayOfWeek}, {Year}-{MonthNumberWithZero}-{DayOfMonthWithZero} {24HourwithZero}:{Minutes}
and it worked just fine.
Related
i have this code in tailwind
#foreach($studenti as $student)
<a data-modal-toggle="defaultModal" data-target="#myModal{{$student->id }} href="#" class="hover:text-blue-700">{{$student->name}}</a>
and this is the Main modal
<!-- Main modal -->
<div id="myModal{{$student->id}}" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center">
<div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
{{$alum->nombre}} {{$alum->apellpatern}} {{$alum->apellmatern}}
</h3>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="defaultModal">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
</p>
</div>
<!-- Modal footer -->
<div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
<button data-modal-toggle="defaultModal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
<button data-modal-toggle="defaultModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Decline</button>
</div>
</div>
</div>
</div>
#endforeach
But when i pressed the link it does not work, i am using data-target="#myModal{{$student->id }} in order to pass #student data to tailwind Main modal id="myModal{{$student->id}}",
it seems that this is not the proper way to pass data, i am using Laravel 8, anyhelp is appreciated
Thank you in advance
Omar
I looked at many featherlight.js posts already, but just could not work out how to make the gallery work without a tags etc.
My example is here: http://jsfiddle.net/pwLnrmoc/5/
HTML Code:
<h3>Gallery with different Markup</h3>
<p>Works fine as "single" featherlight, but not as a gallery. I do not want to introduce a tags to make this work as a gallery. What needs to change in the JS to make this work as a gallery?</p>
<ul class="gallery">
<li class="gallery__item">
<div class="buttons">
<button class="openLightbox">Open in lightbox</button>
<button class="openLightboxGallery">Open in lightbox gallery</button>
<figure class="lightboxContent">
<h3>Item 1</h3>
<img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_b.jpg" />
</figure>
</div>
<img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" />
</li>
<li class="gallery__item">
<div class="buttons">
<button class="openLightbox">Open in lightbox</button>
<button class="openLightboxGallery">Open in lightbox gallery</button>
<figure class="lightboxContent">
<h3>Item 2</h3>
<img src="http://farm5.staticflickr.com/4005/4400559493_3403152632_o.jpg" />
</figure>
</div>
<img src="http://farm5.staticflickr.com/4005/4400559493_f652202d1b_q.jpg" />
</li>
<li class="gallery__item">
<div class="buttons">
<button class="openLightbox">Open in lightbox</button>
<button class="openLightboxGallery">Open in lightbox gallery</button>
<figure class="lightboxContent">
<h3>Item 3</h3>
<img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_o.jpg" />
</figure>
</div>
<img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_q.jpg" />
</li>
</ul>
JS Code:
$(document).ready(function(){
$('.openLightbox').click( function(evt) {
const $target = $(evt.currentTarget);
const $figure = $target.siblings('figure');
console.log($figure.length);
// to open in a single slide
$.featherlight($figure);
})
$('.openLightboxGallery').click( function(evt) {
const $target = $(evt.currentTarget);
const $figures = $target.closest('.gallery').find('figure');
console.log($figures.length);
// to open in a gallery
$.featherlightGallery($figures);
})
});
It works fine with the "single" featherlight button, but not with the gallery. I do not know how to set the content filter or target in my case. That's the error: Featherlight: no content filter found (no target specified).
Ideally the way you call featherlight and featherlightGallery should be consistent and work the same way.
I'm tagging my website with Microdata and questionning myself about tagging article's listing.
On category page I got a a big article which is tagged but I don't know if I should also tagged the listing.
<article itemscope itemtype="http://schema.org/NewsArticle" itemref="author publisher">
<header class="entry-header">
<h3 class="entry-title" itemprop="headline"><a href="/article1" rel="bookmark">article 1/a></h3>
<link itemprop="sameAs mainEntityOfPage" href=/article1">
</header>
<div>
<img width="150" height="150" itemprop="image" src="image1.jpg" />
<div class="resume-article-list">bépo bépo bépo … (Lire la suite…)</div> </div>
<footer class="entry-meta">
<time itemprop="datePublished" datetime="2018-03-15T04:48:53+00:00">
<time itemprop="dateModified" class="updated" datetime="2018-11-14T13:52:00+00:00"></time>
</footer>
</article>
<article itemscope itemtype="http://schema.org/NewsArticle" itemref="author publisher">
<header class="entry-header">
<h3 class="entry-title" itemprop="headline"><a href="/article2" rel="bookmark">article 2/a></h3>
<link itemprop="sameAs mainEntityOfPage" href=/article2">
</header>
<div>
<img width="150" height="150" itemprop="image" src="image1.jpg" />
<div class="resume-article-list">bépo bépo bépo … (Lire la suite…)</div> </div>
<footer class="entry-meta">
<time itemprop="datePublished" datetime="2018-03-15T04:48:53+00:00">
<time itemprop="dateModified" class="updated" datetime="2018-11-14T13:52:00+00:00"></time>
</footer>
</article>
Is it correct?
I got a big doubt if NewsArticle could be used on resume,
and also if isn't any trouble to used mainEntityOfPage as is not the full article?
If you are marking up a list of things that exist on other pages, then Google recommends using ItemList containing just urls. The destination pages should contain the full markup about the entity:
https://developers.google.com/search/docs/guides/mark-up-listings
I'm designing my Tumblr theme as grid (a two-column grid with 500px width on each post) and Masonry doesn't seem to work. The grid isn't "seamless." This is how it looks like right now: image
I don't really know what I'm doing wrong. I've been at it for hours and have tried more than two dozens of suggestions like adding "display: block;" etc. Nothing works. The only change I keep getting besides this is the posts would overlap over each other, which is worse than this.
Here is my complete Tumblr workup: [codes].
Thank you for the help.
There are actually two problems:
You need to move your <div class="post"> </div> tags inside of each post element
You need to close your function call on window.load
So, #1 will look something like this...
<div id="container">
{block:Posts}
{block:Text}
<div class="post">
{block:Title}<span class="title">{Title}</span>{/block:Title}
{Body}
</div><!--post-->
{/block:Text}
{block:Photo}
<div class="post">
<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}</center>
{block:Caption}{Caption}{/block:Caption}
</div><!--post-->
{/block:Photo}
{block:Photoset}
<div class="post">
<center>{Photoset-500}</center>
{block:Caption}{Caption}{/block:Caption}
</div><!--post-->
{/block:Photoset}
{block:Quote}
<div class="post">
<span class="quote">“{Quote}”</span>
{block:Source}{Source}{/block:Source}
</div><!--post-->
{/block:Quote}
{block:Link}
<div class="post">
<a title="" href="{URL}" class="postlink" {Target}>{Name}</a>
{block:Description}{Description}{/block:Description}
</div><!--post-->
{/block:Link}
{block:Audio}
<div class="post">
{AudioPlayerGrey}
{block:Caption}{Caption}{/block:Caption}
</div><!--post-->
{/block:Audio}
{block:Chat}
<div class="post">
{block:Title}<span class="title">{Title}</span>{/block:Title}
<ul class="chat">
{block:Lines}
<li>
{block:Label}<span class="label">{Label}</span>{/block:Label}{Line}
</li>
{/block:Lines}
</ul>
</div><!--post-->
{/block:Chat}
{block:Video}
<div class="post">
<center>{Video-500}</center>
{block:Caption}{Caption}{/block:Caption}
</div><!--post-->
{/block:Video}
{block:Answer}
<div class="post">
<b>{Asker} asked:</b> {Question}
<p>{Answer}
</div><!--post-->
{/block:Answer}
{/block:Posts}
</div><!--container-->
And #2 will look something like this...
jQuery(window).load(function(){
$('#container').masonry({
itemSelector: '.post',
columnWidth : 520
});
});
From what I see on your code when you make a call to masonry on jQuery(window).load(function(){, you forgot to close your load call.
Based off the code you provided your <script type="text/javascript"> has.
jQuery(window).load(function(){
$('#container').masonry({
itemSelector: '.post',
columnWidth : 520
});
(source: iforce.co.nz)
Which looks fine until I saw there is no closing syntax }); and I don't believe you ever call jQuery.noConflict() (it doesn't matter, it will work with jQuery too, but it should look like..
$(window).load(function(){
$('#container').masonry({
itemSelector: '.post',
columnWidth : 520
});
});
You can test it with alert('hello this is a working test');
$(window).load(function(){
alert('hello this is a working test');
$('#container').masonry({
itemSelector: '.post',
columnWidth : 520
});
});
(source: iforce.co.nz)
After the alert box disappears you will notice the jQuery takes effect and the {block:Posts}{/block:Posts} will disappear from view.
I'm new to all this so I apologise if my question is 'primitive'. I've looked all over and can't find the answer that suits my specific problem, which is...
I have several div's all with a the same class name and all with individual id's. All but 1 of the div's also contain an anchor tag.
I'm trying to get the id of only the div with an id that doesn't have an anchor tag - how do i do it? - also, I need to do it in a way that would work if I changed which div (with an id) didn't have the anchor, ie I would get the id of whichever div had the anchor removed (only 1 div with an id within the divContainer div would have no anchor).
eg: (occurs with other div's etc on page)
<div id="divContainer">
<div id="1" class="div"><a id="a1" class="a" href="blah blah">Blah</a></div>
<div class='other div'></div>
<div id="2" class="div"><a id="a2" class="a" href="blah blah">Blah</a></div>
<div class='other div'></div>
<div id="3" class="div"><a id="a3" class="a" href="blah blah">Blah</a></div>
<div class='other div'></div>
<div id="4" class="div">Blah</div>
<div class='other div'></div>
<div id="5" class="div"><a id="a5" class="a" href="blah blah">Blah</a></div>
<div class='other div'></div>
<div id="6" class="div"><a id="a6" class="a" href="blah blah">Blah</a></div>
</div>
I hope that makes sense! Happy to answer any questions needed to help!
Thanks in advance to the guru's with the knowledge to get me out of my hole.
You want
$('div:not(:has(a))')