Suppose that I have defined 5 custom posts, and in each of them I defined photoset to post multiple photos. But in each of one I only want to execute 1 time and get the 1 photo. So how can I break a photoset block?
{block:Photoset}
<article>
<span class="break" style="padding-bottom: 19px;"></span>
<!-- Go through each Photo in the Photoset -->
{block:Photos}
<img src="{PhotoURL-HighRes}" class="highres">
{/block:Photos}
{block:Caption}
<p>{Caption}</p>
{/block:Caption}
<p></p>
<time>{TimeAgo}</time>
</article>
{/block:Photoset}
Something like this:
{block:Photoset}
<article>
<span class="break" style="padding-bottom: 19px;"></span>
<!-- Go through each Photo in the Photoset -->
{block:Photos}
<img src="{PhotoURL-HighRes}" class="highres">
{/block:Photos}
{block:Caption}
<p>{Caption}</p>
{/block:Caption}
<p></p>
<time>{TimeAgo}</time>
</article>
**BREAK HERE??**
{/block:Photoset}
There doesn't seem to be a way to limit them, but you can comment them out:
{block:Photoset}
<article>
<span class="break" style="padding-bottom: 19px;"></span>
<!-- Go through each Photo in the Photoset -->
{block:Photos}
<img src="{PhotoURL-HighRes}" class="highres">
I assume you want the break here
<!--
{/block:Photos}
-->
{block:Caption}
<p>{Caption}</p>
{/block:Caption}
<p></p>
<time>{TimeAgo}</time>
</article>
{/block:Photoset}
See that <!-- before {/block:Photos}? That opens an HTML comment right after the first image, so the rest of the images in the loop will be in a comment, invisible. After the loop we close the comment with -->. Done, all the images in the photoset after the first one will be hidden.
Related
So i was making a project tribute page and as i started to write the css i was first checking it with firefox device toolbar, but when i opened the same code on chrome the image that i had given a img-fluid class was taking up its original full width (1065px)
The div #content is inside a div with .container-fluid
this is how it looks on chrome
this is how it looks on firefox
<div id="content" class="container">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.webp" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption>Why I Write</figcaption>
</figure>
</div>
</div>
edit: okay so i started to add elements to a new file to see when the error would start to occur and it happened when I pasted the section that follows #Home which is #Bio.
I will edit the code so you can see the following section because i still dont know why it's causing the issue
/*I'll take away the css because none of it proved to be an issue*/
<div class="container-fluid">
<!-- there's a nav div here but it doesnt cause issues-->
<div class="container-fluid" id="content">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.png" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption>Why I Write</figcaption>
</figure>
</div>
</div>
<!--the #Bio has three .achivement elements but even if its just one and the figure element the issue occurs-->
<div id="Bio" class="container">
<div id="summary">
<h1>Her life</h1>
<div class="achivement">
<ul>
<li>The iconic writer got her start when she won Vogue's "Prix de Paris" contest and got a job opportunity in the magazine's
New York office as price for one month. Once there, she got a permanent position after writing a seminal article on self-respect on the fly after the reporter that was supposed to make the assignment failed to deliver a complete article. She worked at the famed magazine for years after that.</li>
</ul>
<blockquote cite="https://www.nytimes.com/1976/12/05/archives/why-i-write-why-i-write.html">
<p>
" Had I been blessed with even limited access to my own mind there would have been no reason to write. I write entirely to find out what I'm thinking, what I'm looking at, whot I see and what it means."
</p><cite>-- Joan Didion on her "Why I Write" article for the New York Times</cite>
</blockquote>
</div>
<figure>
<img src="images/tradlands-flickr.jpg" alt="joan didion in later years">
<figcaption>Didion by Irving Penn.</figcaption>
</figure>
</div>
</div>
</div>
</div>
Try adding the rule in your css file:
<style>
figure .img-fluid {
width: 100%;
}
</style>
I'm pretty sure it will work for you.
So after taking off and adding elements one-by-one I realized that an image on the section that followed the #Home div didn't have .img-fluid
I don't know why that wasn't an issue on firefox but I've tested the code on both browsers and it's working properly.
I have a component and want to give authors the option in the dialog to add a link path. If this link path is filled in, then I want the component wrapper to be an <a> tag. If it's not filled in, I want it to remain a <div>
<div class="section" data-sly-test="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
Is there a cleaner way to do this than creating two separate build outs of the whole component with a data-sly-test switch? I've struggled on a lot of examples like this where the wrapping tag/div is changed by the dialog. Looking for something similar to how data-sly-element behaves on the <h2> within my code here.
There are multiple ways to achieve what you are trying to do.
Using data-sly-element and data-sly-attribute
data-sly-attribute doesn't add the attribute to the tag if the value of the attribute is empty/null. Hence, it can be used as shown below to replace the anchor tag with a div if the path is unavailable.
<a class="section" data-sly-attribute.href="${properties.path}" data-sly-element="${properties.path ? 'a' : 'div'}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
Using data-sly-unwrap
Unwrap only removes the containing tag and doesn't remove all the inner tags. Hence, this can be used as shown below.
<div class="section" data-sly-unwrap="${properties.path}">
<a href="${properties.path}" class="section" data-sly-unwrap="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
</div>
Using data-sly-template and data-sly-call
This is similar to what you have initially written, but instead of duplicating the entire inner HTML, it can be moved to a template and called twice.
<div class="section" data-sly-test="${!properties.path}">
<sly data-sly-call="${tpl}"></sly>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<sly data-sly-call="${tpl}"></sly>
</a>
<!--/* The template */-->
<template data-sly-template.tpl="">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</template>
For more information on HTL Block statements, refer this official doc.
I'm using Schema.org and RDFa to mark up an HTML page. I have an image as follows:
<div class="image_container">
<a href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever">
</a>
</div>
What is the correct way to mark this up, so that:
1. big_whatever.jpg (the link href) becomes the contentUrl
2. The alt property becomes the description
3. The title property becomes the name
4. Ideally, I would also like the alt property to be the caption, as well.
Now, this is easy enough with JSON-LD, but I prefer to use RDFa for this particular case. This is what I've got so far:
<div class="image_container" vocab="http://schema.org/" typeof="ImageObject">
<a href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever">
</a>
</div>
It is not possible to use the values of alt or title attributes in RDFa.
You could duplicate them with "hidden" meta elements:
<div vocab="http://schema.org/" typeof="ImageObject">
<a property="contentUrl" href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever" />
</a>
<meta property="description caption" content="A picture of Whatever" />
<meta property="name" content="Whatever" />
</div>
If you don’t need a property on the img element (e.g., for thumbnailUrl), you could use property+content to save one meta element:
<div vocab="http://schema.org/" typeof="ImageObject">
<a property="contentUrl" href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever" property="name" content="Whatever" />
</a>
<meta property="description caption" content="A picture of Whatever" />
</div>
Thanks to the content attribute, RDFa won’t use the src value. But I think it’s more clear to go with the first snippet.
I am trying to code my tumblr html, and it's going well but i can't seem to get audio posts to show up correctly. Youtube videos are fine, but soundcloud specifically seems to be problematic. I'll try to list the audio coding that i have that i think you need (it's not in the order i block it as)
{block:Audio}
<div class="postaudio">
{block:AlbumArt}
<div class="albumart">
<div class="album-shine"></div>
<img src="{AlbumArtURL}" alt="Album Art" />
</div>
{/block:AlbumArt}
{AudioPlayerGrey}
{block:Caption}
{Caption}
{/block:Caption}
<div class="space"></div>
</div>
{/block:Audio}
{block:Audio}
{block:AudioPlayer}
<div class="hold">
<div class="player">{AudioPlayergrey}</div>
</div>
{/block:AudioPlayer}
<div class="audio_info cal">
{block:TrackName}<span><b>Track:</b> {TrackName}</span>{/block:TrackName}
{block:Artist}<span><b>Artist:</b> {Artist}</span>{/block:Artist}
<span><b>Plays:</b> {playcount}</span>
</div>
{/block:Audio}
You need to include the theme operators to support embedded audio players, such as Soundcloud:
{block:AudioEmbed}
{AudioEmbed}
{/block:AudioEmbed}
Reference: https://www.tumblr.com/docs/en/custom_themes#theme-options
Having some issues trying to get my photoset width to 340px without messing up the way the smaller photos in the photoset display. http://d.pr/icuf
{block:Photoset}
{block:IndexPage}
<div class="photo_set">
<div class="header">
<h1>photoset</h1>
{block:NoteCount}<a href="{Permalink}">
<div class="note">{NoteCountWithLabel}</div></a>
{/block:NoteCount}
<div class="clear"></div>
</div>
<div class="view">
<a href="{Permalink}">
<div class="link">View Photoset ↦</div></a>
</div>
{Photoset-250}
</div>{/block:IndexPage}
{block:PermalinkPage}
<div class="perma_width">{Photoset-500}</div>
{/block:PermalinkPage}
{/block:Photoset}
You won't be able to get a 340px width using Tumblr's default code. You have two options:
1) Don't use Tumblr's {Photoset} tags and display each photo individually with {block:Photos}...{/block:Photos} and style them as you want.
2) Use a plugin like this: https://github.com/PixelUnion/Extended-Tumblr-Photoset (full disclosure, it's something that I wrote)