HTML Block Image Referencing
Permalink
In an HTML block, how can I reference an image (with the standard image tag) that is either stored in the local concrete5 site files, or in the theme files (if either is possible). Right now I'm having to list the file as a remote url (e.g.http://www.site.com/images/file.jpg).... What I'm wanting to do is have it listed as "images/file.jpg", or what have you. Just wondering if this is possible!
tl;dr: I'm currently having to do this:
And I want to be doing this:
tl;dr: I'm currently having to do this:
<img src="http://www.site.com/images/file.jpg"/>
And I want to be doing this:
<img src="images/file.jpg"/>
Hi there. I know it's been a while, but did you ever find a way? Thanks!
Hi there. I know it's been a while, but did you ever fine a way? Thanks!
In concrete5 5.7, I believe it can be done this way.
- go to the file manager
- click on the desired image
- from the popup menu, select Properties
- under the Basic Properties section, look for URL to File
- copy the URL
http://mysite.com/concrete5/application/files/7414/3943/4750/chines...
- the portion of the URL after the domain name can be used for the img src
/concrete5/application/files/7414/3943/4750/chinese_house2.jpg
Example:
- go to the file manager
- click on the desired image
- from the popup menu, select Properties
- under the Basic Properties section, look for URL to File
- copy the URL
http://mysite.com/concrete5/application/files/7414/3943/4750/chines...
- the portion of the URL after the domain name can be used for the img src
/concrete5/application/files/7414/3943/4750/chinese_house2.jpg
Example:
<img src="/concrete5/application/files/7414/3943/4750/chinese_house2.jpg">
Thanks for the reply. The images are showing up now, but what are the directories with the numbers for? I uploaded all four of those images at the same time using the bulk uploader, and am using Bootstrap to align them properly in the Elemental theme that I'm editing (in an HTML block). I had assumed that they would all be in the same folder so I copied one image url and edited the other three with the proper file name (e.g. copied the url for mbe.png, and pasted it and changed the mbe.png to dbe.png). Then I realized the other three images were broken...because they were in different folders. Is there any way to predict this folder structure since I foresee myself doing this often?
Thanks!
<div class="row"> <div class="col-xs-12 col-sm-3"> <img src ="/application/files/7614/4665/0939/mbe.png" style="width: 150px;"> </div> <div class="col-xs-12 col-sm-3"> <img src ="/application/files/3614/4665/0939/dbe.png" style="width: 150px;"> </div> <div class="col-xs-12 col-sm-3"> <img src ="/application/files/3714/4665/0939/hub.png" style="width: 150px;"> </div> <div class="col-xs-12 col-sm-3"> <img src ="/application/files/6214/4665/0939/vosb.png" style="width: 150px;"> </div> </div>
Thanks!
The hashing (numbers) is to provide some security to files you do not want to show directly to visitors. It also serves to spread the files evenly across multiple directories. You should avoid referencing files directly from these hashes. As you noted, they are unpredictable and they even change with image versions. Files are best referenced by code that uses the concrete5 fileID, which is a database id and remains constant for a file even when new versions are uploaded.
Taking all that into account, an HTML block is not a good way to create lists of images from the file manager.
Better would be to use any of the many blocks designed for images, image lists or galleries. They will track your images by file ID, look after the hashed paths for you and also keep them portable should you decide to move the site. If you need extra formatting to columns, you could then code a custom template for the block.
Even the regular content block with images inserted would be a better choice than the html block with hard coded image links. A content block uses file IDs.
Taking all that into account, an HTML block is not a good way to create lists of images from the file manager.
Better would be to use any of the many blocks designed for images, image lists or galleries. They will track your images by file ID, look after the hashed paths for you and also keep them portable should you decide to move the site. If you need extra formatting to columns, you could then code a custom template for the block.
Even the regular content block with images inserted would be a better choice than the html block with hard coded image links. A content block uses file IDs.
I haven't learned how to create a custom block yet. I'm new to C5. Basically, I used to hand code everything and only recently started working in a CMS. It sounds funny, but using the HTML block is quicker for me for some things for now. I will take the time to use the interface as it's meant. Thanks again for the suggestion. I plan on learning the ins and outs.
.){kind=link}
