- Posts: 4
COMMUNITY FORUM
Template Using Images
- Eric
-
Topic Author
- Offline
- New Member
Less
More
7 years 2 months ago #163917
by Eric
Template Using Images was created by Eric
Is it possible to create a template using just images?
What I'm looking for is a way to have a template which has an image to the left, right, top and bottom with the normal K2 item content in the middle. The problem is, I need the images used to change for each article / item. So essentially it's akin to adding custom fields as images which we then place in the template.
So imagine there is a header, left column, right column and footer - these should be images (blended to site background) and then the content from the article item will sit in the middle. However, I want the 4 images that make the header, sides and footer to be editable when you add a new article / item so they can't stay the same as no two pages will stay the same.
My logic is build a template and assign the 4 images to the otherwise blank template, but it's getting them to sit in the right position and calling the image to the right place that confuses me. I don't want to have to create 100's of templates as each page is different.
Any ideas please?
Thanks in advance.
What I'm looking for is a way to have a template which has an image to the left, right, top and bottom with the normal K2 item content in the middle. The problem is, I need the images used to change for each article / item. So essentially it's akin to adding custom fields as images which we then place in the template.
So imagine there is a header, left column, right column and footer - these should be images (blended to site background) and then the content from the article item will sit in the middle. However, I want the 4 images that make the header, sides and footer to be editable when you add a new article / item so they can't stay the same as no two pages will stay the same.
My logic is build a template and assign the 4 images to the otherwise blank template, but it's getting them to sit in the right position and calling the image to the right place that confuses me. I don't want to have to create 100's of templates as each page is different.
Any ideas please?
Thanks in advance.
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- Offline
- Platinum Member
Less
More
- Posts: 15920
7 years 2 months ago #163929
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic Template Using Images
Hello Eric,
It is possible through overrides but you will need to get your hands dirty a bit :)
getk2.org/documentation/tutorials/174-templating-with-k2-and-the-concepts-of-sub-templates
A nice cheatsheet can be found here:
github.com/kricore/Advanced-templating-with-K2/blob/master/_inc/cheatsheet.php
It is possible through overrides but you will need to get your hands dirty a bit :)
getk2.org/documentation/tutorials/174-templating-with-k2-and-the-concepts-of-sub-templates
A nice cheatsheet can be found here:
github.com/kricore/Advanced-templating-with-K2/blob/master/_inc/cheatsheet.php
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- william white
-
- Offline
- Platinum Member
Less
More
- Posts: 3722
7 years 2 months ago #163934
by william white
Replied by william white on topic Template Using Images
Just a thought - If you use your template and its positions to do the heavy lifting, with a header,leftsidebar, rightsidebar, and footer position and create modules, one for each position, that shows only the image type extra field you want, the formatting may be easier.
You would probably still need to use overrides in k2 (to squash the extra fields that you dont want showing up with the rest of the non-image xtra fields and
In each module to only show the extra field you want to show.
The demo here bnrjoomla.com/bnr-content-for-k2.html
although i haven't tested it with the latest k2 or joomla shows sorta how to put k2 elements into a module position in your template.
The bummer(best feature) is that bnrk2 content has subtemplates as well that would probably be necessary as well.
Hands will definitely be a bit dirty!
You would probably still need to use overrides in k2 (to squash the extra fields that you dont want showing up with the rest of the non-image xtra fields and
In each module to only show the extra field you want to show.
The demo here bnrjoomla.com/bnr-content-for-k2.html
although i haven't tested it with the latest k2 or joomla shows sorta how to put k2 elements into a module position in your template.
The bummer(best feature) is that bnrk2 content has subtemplates as well that would probably be necessary as well.
Hands will definitely be a bit dirty!
Please Log in or Create an account to join the conversation.
- william white
-
- Offline
- Platinum Member
Less
More
- Posts: 3722
7 years 2 months ago #163935
by william white
Replied by william white on topic Template Using Images
It would work something like the attached image with 4 extra fields image, 4 modules (each with a subtemplate)
imgur.com/a/YsldV
imgur.com/a/YsldV
Please Log in or Create an account to join the conversation.
- Eric
-
- Offline
- New Member
Less
More
- Posts: 4
7 years 2 months ago #163950
by Eric
Replied by Eric on topic Template Using Images
Thanks - that's kinda exactly what I'm after but struggling to get my head around how it all works - there's no guides or docs with the BNR addon so not something I can risk right now.william white wrote: It would work something like the attached image with 4 extra fields image, 4 modules (each with a subtemplate)
imgur.com/a/YsldV
Please Log in or Create an account to join the conversation.
- Eric
-
- Offline
- New Member
Less
More
- Posts: 4
7 years 2 months ago #163953
by Eric
Replied by Eric on topic Template Using Images
Ok have figured a nice and easy solution so will share it here.
First create a new custom field group then add the custom fields and give each an alias, in my case I added image_top, image_left, image_middle_top, image_middle_bottom & image_right.
So now I have the custom fields set in admin, as images, I created a template to work with the layout needed. So I copied the directory /templates/YOUR_TEMPLATE_NAME/html/com_k2/templates/default and called mine 'demo' and then uploaded it to /templates/YOUR_TEMPLATE_NAME/html/com_k2/templates/
Then I went into K2 categories and created a new category and from the right side I selected the new template and changed the item settings to hide everything other than the custom fields and the intro / main text. I then created my new item and added the images in the Extra Fields tab of the new item, with some text in the main description.
Then I created a menu item and linked to the single K2 item. Opened my browser and I can see the images but they are just listed in the middle. So I now go into my new K2 template directory and edit the item.php file and then:
after
remove everything to
Then copy in my new script which is calling each custom field and my new css layout:
This has now allowed me to literally display the top image, an image down the left, two images on top of each other in the middle column and then the main description to the right with a final image below it to the right. See demo below:
i.imgur.com/rMf9vjX.png
and that's how to do it and make it 100% responsive.
First create a new custom field group then add the custom fields and give each an alias, in my case I added image_top, image_left, image_middle_top, image_middle_bottom & image_right.
So now I have the custom fields set in admin, as images, I created a template to work with the layout needed. So I copied the directory /templates/YOUR_TEMPLATE_NAME/html/com_k2/templates/default and called mine 'demo' and then uploaded it to /templates/YOUR_TEMPLATE_NAME/html/com_k2/templates/
Then I went into K2 categories and created a new category and from the right side I selected the new template and changed the item settings to hide everything other than the custom fields and the intro / main text. I then created my new item and added the images in the Extra Fields tab of the new item, with some text in the main description.
Then I created a menu item and linked to the single K2 item. Opened my browser and I can see the images but they are just listed in the middle. So I now go into my new K2 template directory and edit the item.php file and then:
after
<!-- Item Image -->
<div class="itemImageBlock">remove everything to
<?php if($this->item->params->get('itemHits') || ($this->item->params->get('itemDateModified') && intval($this->item->modified)!=0)): ?>Then copy in my new script which is calling each custom field and my new css layout:
<div class="row">
<!-- Top Row Image -->
<div class="col-md-12"><div class="custom-images"><?php echo $this->item->extraFields->image_top->value; ?></div>
<div class="row">
<!-- Left Column -->
<div class="col-md-4">
<div class="custom-images-top"><?php echo $this->item->extraFields->image_left->value; ?></div>
</div>
<!-- Middle Column -->
<div class="col-md-4">
<div class="row">
<!-- Middle Top Column -->
<div class="col-sm-6 col-md-12"><div class="custom-images-top"><?php echo $this->item->extraFields->middle_top->value; ?></div></div>
<!-- Middle Bottom Column -->
<div class="col-sm-6 col-md-12"><div class="custom-images-bottom"><?php echo $this->item->extraFields->middle_bottom->value; ?></div></div>
</div>
</div>
<!-- Right Column -->
<div class="col-md-4">
<?php if(!empty($this->item->fulltext)): ?>
<?php if($this->item->params->get('itemIntroText')): ?>
<!-- Item introtext -->
<div class="itemIntroText">
<?php echo $this->item->introtext; ?>
</div>
<?php endif; ?>
<?php if($this->item->params->get('itemFullText')): ?>
<!-- Item fulltext -->
<div class="itemFullText">
<?php echo $this->item->fulltext; ?>
<hr />
<!-- Right Bottom Image -->
<div class="custom-images-bottom"><?php echo $this->item->extraFields->image_right->value; ?></div>
</div>
<?php endif; ?>
<?php else: ?>
<!-- Item text -->
<div class="itemFullText">
<?php echo $this->item->introtext; ?>
</div>
<?php endif; ?>
<div class="clr"></div>
</div>
</div>
</div>
</div>i.imgur.com/rMf9vjX.png
and that's how to do it and make it 100% responsive.
Please Log in or Create an account to join the conversation.
- Eric
-
- Offline
- New Member
Less
More
- Posts: 4
7 years 2 months ago - 7 years 2 months ago #163954
by Eric
Replied by Eric on topic Template Using Images
Essentially the custom field can be placed anywhere in your K2 template by copying this and just changing the name to the alias you give it when you create custom fields in K2 admin (backend).
Hope this helps :)
<?php echo $this->item->extraFields->EXTRA_FIELD_ALIAS_HERE->value; ?>Hope this helps :)
Last edit: 7 years 2 months ago by Eric.
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- Offline
- Platinum Member
Less
More
- Posts: 15920
7 years 2 months ago #163966
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic Template Using Images
Kudos :)
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.