The original image is located in public/images/properties
The image is looked in the right folder
http://localhost:8000/media/cache/resolve/my_thumb/images/properties/pexels-expect-best-323780-6270d2f4c6366254457078.jpg 404 (Not Found)
but media/cache are not generated by liip_imagine
here is my config
liip_imagine:
# valid drivers options include "gd" or "gmagick" or "imagick"
driver: "gd"
filter_sets:
cache: ~
my_thumb:
quality: 75
filters:
thumbnail: { size: [120, 90], mode: outbound }
allow_upscale: true
and where I apply the filter
<img src="{{ vich_uploader_asset(property, 'imageFile') | imagine_filter('my_thumb') }}" alt=""/>
Related
In Vuepress, when adding an image to our markdown, it will process the image and add a hash to its filename.
For example, the markdown:
Will result in the HTML:
<img src="/assets/img/my-image.03c0601d.png" alt="My Image">
When the image is just used in the page, this isn't a problem, since the resulted HTML will use the processed image filename.
The problem is when we want to add a link to this image.
For example, the markdown:
[](../images/my-image.png)
results in the HTML:
<a href="/assets/img/my-image.png">
<img src="/assets/img/my-image.03c0601d.png" alt="My Image">
</a>
which is obviously a broken link, since the processed image filename is not my-image.png, but my-image.03c0601d.png instead.
How can I save this "processed" image filename into a variable to be used in a link?
Or, in other words, how could I handle this scenario where I want to open the processed image on its own?
Thank you in advance.
Updating the VuePress configuration file (config.js) with the code below fixed it for me. The links are now updated with the correct image path including the hash.
chainWebpack: (config, isServer) => {
config.module.rule('vue').uses.store.get('vue-loader').store.get('options').transformAssetUrls = {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: ['xlink:href', 'href'],
a: 'href'
}
}
Example:
The markdown:
[](../images/my-image.png)
Results in the HTML:
<a href="/assets/img/my-image.03c0601d.png">
<img src="/assets/img/my-image.03c0601d.png" alt="My Image">
</a>
Reference: https://github.com/vuejs/vuepress/issues/826
I've deployed a Jekyll blog using Github pages, but there appears to be an issue when it generates links for different menu pages.
Here's my _config.yml site settings.
# Site settings
title: Marvin K
description: "Now Loading"
baseurl: " "
url: "marv.ink"
# Build settings
markdown: kramdown
highlighter: rouge
permalink: /:title/
# html minify
compress_html:
clippings: all
comments: all
endings: []
profile: false
# Links to include in menu navigation
links:
section_1:
- title: home
url: /
key_trigger: 1
- title: my posts
url: /posts
key_trigger: 2
- title: series
url: /series
key_trigger: 3
- title: tags
url: /tags
key_trigger: 4
- title: about me
url: /about
key_trigger: 5
# projects in header index
projects:
# exclude my node related stuff
exclude: ['package.json', 'src', 'node_modules']
Any help figuring this out would be great
Thanks
In order to make your menu work on github pages you can :
In _config.yml :
baseurl: "/blog"
...
links:
section_1:
- title: home
url: /
key_trigger: 1
- title: my posts
url: /posts
key_trigger: 2
...
In _includes/menu-search.html, change
<a key-trigger={{ link.key_trigger }}
href="{{ site.url }}{{ link.url }}"> {{ link.title }}</a>
to read :
<a key-trigger={{ link.key_trigger }}
href="{{ site.baseurl }}{{ link.url }}"> {{ link.title }}</a>
This is based on what I saw here.
On my personal site, I style the post list on my home page based on the post's category. So if I have the front matter:
---
layout: post
title: "My Post"
date: 2016-01-26
category: code
---
Because the category is code, the div below will render to have a css class card-code and style the post excerpt accordingly.
{% for post in site.posts %}
<div class="col-1-2">
<!-- This Line! -->
<div class="paper-card card-{{ post.category }}">
<!-- other code -->
</div>
</div>
{% endfor %}
To try to make my life simpler, I set the default category for posts to be general in my _config.yml file:
default:
-
scope:
path: ""
type: "posts"
values:
category: "general"
However, {{ post.category }} comes up with nothing for these posts (i.e., card-). Any ideas why this ain't working?
Reading the documentation at Front Matter Defaults the section should be called defaults not default.
Try this in your _config.yaml
defaults:
-
scope:
path: ""
type: "posts"
values:
category: "general"
First of all, I would like to say I have tried for 2+ hours to try and correct this error, but alas I cannot figure it out. I am also a newbie to Jekyll and Github Pages. However, I am competent in code and can correct any errors.
When I go to my github pages for this repository:
Repository link 2:https://github.com/jeffward01/Conscience-Alchemy.git
Github pages link: https://jeffward01.github.io/Conscience-Alchemy
There is no formating applied. I know/suspect its a problem with my base.url and/or url in the _config.yml file. I have tried 14 combinations and cannot figure it out.
When I run jekyll serve --baseurl it runs and applies the formating/styles... But, when I go to the GitHub pages, it does not...
Does anyone have any tips/advice/answers?
Thanks!!
For your ease, here is my _config.yml file:
`
# Site settings
title: Conscience Alchemy
description: "A blog about Conscienceness and Alchemy"
url: "http://jeffward01.github.io"
author:
name: "Jeff Ward"
email: "conscience-alchemy#gmail.com"
url: "http://jeffward01.github.io"
baseurl: /Conscience-Alchemy
# Build settings
baseurl: /Conscience-Alchemy
markdown: kramdown
source: .
destination: ./_site
permalink: /:title
paginate: 8
paginate_path: /page:num/
# Default values
defaults:
-
scope:
path: ""
type: "posts"
values:
layout: "post"
# Custom variables
version: "1.68"
# Options
custom_header: false
custom_nav_footer: false
reverse: false
'
And here is the beginning of my index.html file (I was not sure if you needed other file so I did not add them. They are on my GitHub Tree tho.)
---
layout: default
---
<!-- Posts -->
<ul id="posts">
{% for post in paginator.posts %}
<li class="post">
<h2>{{ post.title }}</h2>
<time datetime="{{ post.date | date_to_xmlschema }}" class="by-line">{{ post.date | date_to_string }}</time>
<p>{{ post.content | strip_html | truncatewords:50 }}</p>
</li>
{% endfor %}
</ul>
In your _config.yml repository you have baseurl: /, I think you must change it to baseurl: /Conscience-Alchemy.
The baseurl: subpath in the _config.yml file must be pointed to the project's repository name.
Example: baseurl: "/<repositoryname>" or, in this case baseurl: "/Conscience-Alchemy"
When I have image stored in my bundle dir structure displaying image is easy with Assetic as from documentation:
{% image '#AcmeFooBundle/Resources/public/images/example.jpg'
filter='jpegoptim' output='/images/example.jpg'
%}
<img src="{{ asset_url }}" alt="Example"/>
{% endimage %}
but how can I use assetic for my uploaded images? below my getWebPath returns path relative to web dir for example: "/uploads/images/image.jpg". Maybe this solution is ok and there is no need to use assetic? I think that using it for some filtering like above jpegoptim could be useful
<img src="{{app.request.basepath}}/{{ entity.getWebPath }}">
<img src="{{ app.request.scheme ~ '://' ~ app.request.host ~ '/' ~ entity.getWebPath }}" />
you can store them on the automaticcaly generated web direectory 'uploads/files/' using getUploadRootDir(),getAbsolutePath()... and call them using
src="{{ asset('uploads/files/'~entity.path) }}"