Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ability to set feature image as URL #1216

Merged
merged 3 commits into from
Feb 10, 2024

Conversation

aakashnand
Copy link
Contributor

Thank you for this awesome theme @nunocoracao.

When I started using this theme I faced a problem with setting images in my theme. The current version only supported images from the asset folder. This can make the git repository and history bigger if we want to use multiple images for each blog post. Many users already had raised issues about this feature. I summarized all of them in #1211

To fix this, I have added the following functionalities.

  1. homepage.homepageImage can now be set as an external image URL. The theme will check if the file is present locally if not it will check if the file is present in the URL specified.
  2. Introduced new front matter configuration featureimage. This will be the external URL of an image to be used as a feature image.
  3. Introduced new front matter configuration featureimagecaption. This will be the caption for the image which will be displayed in article.heroStyle=big
  4. Updated documentation for frontmatter and configuration.

Let me know your feedback and if anything needs to be improved.

Closes #1215

@LITUATUI
Copy link
Contributor

LITUATUI commented Feb 5, 2024

This is very useful if you're moving from a theme that supports feature image via URL.

@nunocoracao
Copy link
Owner

Thanks @aakashnand I'll need some time to review this PR. My initial skim I would ask you to not do a style override in the single.html file. Either use the tailwind classes or create a new object in the main.css files that gets compiled into the final theme. Inline styling is really hard to manage. Also kudos on getting docs sorted already :)

@aakashnand
Copy link
Contributor Author

Thanks @aakashnand I'll need some time to review this PR. My initial skim I would ask you to not do a style override in the single.html file. Either use the tailwind classes or create a new object in the main.css files that gets compiled into the final theme. Inline styling is really hard to manage. Also kudos on getting docs sorted already :)

@nunocoracao. Understood. I will update and see what can be done. I also forgot to add documentation about the new config that I introduced. .Params.maxWidth which allows customization from frontmatter.

@aakashnand
Copy link
Contributor Author

aakashnand commented Feb 6, 2024

@nunocoracao can you share any example of fetching frontmatter variables in CSS? I read many sites but I could not find how to access .Params.maxWidth in CSS.

What do I want to achieve?

Currently, the maxWidth responsible for markdown width is fixed at 65ch. See #834 and #847

.max-w-fit, .max-w-prose {
    max-width: {{.Params.maxWidth}}ch
}

this can be problematic when we enable a table of contents for the article. I wanted to add a front matter to be able to customize this width

@nunocoracao
Copy link
Owner

@aakashnand please remove the extra parameter .Params.maxWidth from this PR. This is getting a little bloated and should be separate things. Also I don't think we should have that parameter in frontmatter

@aakashnand
Copy link
Contributor Author

aakashnand commented Feb 8, 2024

Yes will remove it soon. After going through the related issue. I think it's not necessary as I can override for my site.

@aakashnand
Copy link
Contributor Author

@nunocoracao removed maxWidth. Let me know what do you think now.

@nunocoracao
Copy link
Owner

@aakashnand I think it's just missing a check for whether the URL is defined in frontmatter before trying the getRemote calls. Also (and I didn't have time to check everything yet) I was not sure if the logic is the same for all? i.e. local image -> remote -> site default

@nunocoracao nunocoracao changed the base branch from main to dev February 9, 2024 15:30
@aakashnand
Copy link
Contributor Author

aakashnand commented Feb 9, 2024

@aakashnand I think it's just missing a check for whether the URL is defined in frontmatter before trying the getRemote calls. Also (and I didn't have time to check everything yet) I was not sure if the logic is the same for all? i.e. local image -> remote -> site default

Let me recheck. If you can point to specific line or file that would be super helpful

@aakashnand
Copy link
Contributor Author

@nunocoracao

I made the changes you suggested.

  1. Added a check to see if featureimage is present in the front matter before calling GetRemote
  2. Also previously I forgot to add GetRemote for the author image. Now author image can be either present in the asset folder or can be set as an external URL as well.
  3. Formatted code to enhance readability.
  4. Added documentation for author.image saying that image can point to external URL now

Also added ability to set author image as external url and updated
relevant documentation in configuration
@nunocoracao
Copy link
Owner

sweet :) thanks a lot

@nunocoracao nunocoracao merged commit 14e4647 into nunocoracao:dev Feb 10, 2024
1 check passed
nunocoracao added a commit that referenced this pull request Feb 10, 2024
@nunocoracao
Copy link
Owner

@aakashnand I ended up making "some" changes e87e066

@aakashnand
Copy link
Contributor Author

@nunocoracao Thank you so much for making the additional changes. I am glad I found this theme. I will soon send PR to add my site as a user

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

❓ Featured images for different languages or in frontmatter
3 participants