I want to link images on my index page, to their permalink page, but the tags don't seem to be working. It's not that the images are not linking to the correct place, they're simply not being rendered as links at all.
This is the code:
{block:Photo}
<article id="{PostID}" class="post photo">
**<img src="{PhotoURL-HighRes}" href="{Permalink}" alt="{PhotoAlt}"/>**
{block:IndexPage}
<div style="{block:ifShowPhotoCaption} display: none; {/block:ifShowPhotoCaption}" class="control">
{NoteCountWithLabel}
This should link the image on the index page to its permalink page, but it doesn't create a link at all, in the same way 'note count' label does, in the second block of code.
I've tried:
<img src="{PhotoURL-HighRes}"><a href="{Permalink}" alt="{PhotoAlt}"/>
Instead of the code I posted, but it makes no difference. I've also tried moving the {block:IndexPage} to before the {block:Photo} tag, but this doesn't work, and also has the effect of messing up the permalink page when I view it through the 'notes count' link.
My tumblr: http://ginnypig.tumblr.com/
Thanks in advance.
Fixed it.
The code needed to be:
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
As opposed to what I was using:
<img src="{PhotoURL-HighRes}" href="{Permalink}" alt="{PhotoAlt}"/>
Related
I have a simple pagination that looks like
<ul class="pagination justify-content-end" th:field="*{page}">
<li class="page-item page-item disabled">
<a class="page-link" href="action">1</a>
</li>
</ul>
I would get the following behaviour with Thymeleaf. Clicking on the page and before submitting the action, the value of the th:field associated with the pagination should be changed by setting it to the th:value of the selected page. In other words, clicking on the page number should change the value of "*{page}" and then call the method. Is there any way to do that, for example, combining th:onclick with th:action?
Thymeleaf is a rendering engine, as such it can do nothing once the page is served to the end user. At best u can fill variables into javascript when rendering to achieve the desired result.
As for your described functionality the given code is far to limited or faulty to give a suggestion for a javascript solution, for one th:field on a non-input element doesn't do much. Also the shown href is just a simple href that doesnt interact in any way with the encapsulating th:field.
i know <h2>Hamburger</h2> are good, but how about this:
<div><h2>Food » Hamburger</h2></div>
or thats are ok for google seo?
The tag with an anchor link inside it will work same as a normal tag for Google SEO. Both the methods are Ok, but the problem that can occur is your readers may go away because you added a hyperlink in the Heading text of your webpage. So, it is not a good practice to use hyperlinks in tags or any tag.
So I am trying to create a one page site and I only want the navigation links to scroll to anchor links upon click. I am wondering though why the activeClassName does not work when I click those anchor links. What I noticed is that the active link that shows upon clicking the anchor links is the parent link.
I have already tried using partiallyActive={false} to the parent link but still nothing happens.
So this is my code:
<li>
<Link className={headerStyles.navItem} activeClassName={headerStyles.navItemActive} to="/" partiallyActive={false}>
Home
</Link>
</li>
<li>
<Link className={headerStyles.navItem} activeClassName={headerStyles.navItemActive} to="/#portfolio">Portfolio
</Link>
</li>
I expect the "Portfolio" link to be highlighted upon click but the highlight remains on the "Home" link. The url changes too but the activeClassName does not transfer from "Home" to "Portfolio". What could be going on here? Does activeClassName not work for anchor links?
As explained on the Link docs, you can't use a hash with Gatsby's Link:
Neither <Link> nor navigate can be used for in-route navigation with a hash or query parameter. If you need this behavior, you should either use an anchor tag or import the #reach/router package —which Gatsby already depends upon— to make use of its navigate function...
Also note that if you set partiallyActive to true on the "/#portfolio" link, then the "/" link will be highlighted given that "/#portfolio" also matches "/".
We're having a weird problem in our AEM 6.3 application.
For some reason, the link to the contact-us page gets rendered with a space at its end, making it useless.
I'm trying to figure this out but I'm kinda new to sightly (I used to be working on CQ5).
To visualize it better, the configured link in the page properties is:
/content/app-name/hk/hk/info/contact-us
And the code in the HTML/sightly page is:
<a href="${inheritedPageProperties.linkToContactUsPage # extension='html'} ">
Contact Us
</a>
While what gets rendered in the actual page is:
<a href="/hk/hk/info/contact-us%20.html">
Contact Us
</a>
This happens only in the chinese pages of the site, I'm not sure if this is relevant or just a coincidence.
At first I thought the problem could be the blank space at the end of the href attribute, but shouldn't it result in "/hk/hk/info/contact-us.html%20" then? Also why would this problem affect only the chinese language pages and not all the other languages?
AFAICT you do have a space in the page properties link:
Please remove the space in your
<a href="${inheritedPageProperties.linkToContactUsPage # extension='html'} ">
like this
<a href="${inheritedPageProperties.linkToContactUsPage # extension='html'}">
I've been looking everywhere for code that would allow me to make the banner ads on my site show on the homepage only. Right now they show up site-wide and the advertisers are asking me to change it. I've unsuccessfully tried looking up the right code, but so far it has proven impossible. I'm only coming up for fixes for Blogger and Wordpress, and I need something for tumblr.
Any help would be much appreciated.
Thanks!
Output certain div only on homepage? — No.
Show certain div only on homepage? — Yes, with css snippet.
How to output certain div only on homepage?
Tumblr has only two main types of page:
PermalinkPage
IndexPage
IndexPage include 3 sub-types:
TagPage
DayPage
SearchPage
Tumblr has no else statement for if blocks, that's why it is impossible to output banner ads only on home page — it would be outputted on other index pages.
How to show certain div only on homepage?
You can hide #banner ads with css using this tip:
Step 1. In your Tumblr markup to your html change your body tag to this snippet:
<body class="
{block:IndexPage} index-page {/block:IndexPage}
{block:TagPage} tag-page {/block:TagPage}
{block:DayPage} day-page {/block:DayPage}
{block:SearchPage} search-page {/block:SearchPage}
">
Step 2. Then make sure you output #banner only for index pages:
{block:IndexPage} <div id="banner">...</div> {/block:IndexPage}
Step 3. After that you will have four classes for control demonstration(show/hide) of your #banner div, this css snippet must be added to Custom CSS field on customize page:
.index-page #banner {
/* not neccessable, only for tip's logic demonstration */
display: block;
}
.tag-page #banner,
.day-page #banner,
.search-page #banner {
/* hide on all index pages except home index-page */
display: none;
}
Notice: this tip only hide div, not non-output.
I posted screeenshots of Edit HTML button and Custom CSS field to show the simplicity of the second method and to cheer you up.
Could you use javascript to only should the page on the homepage?